Blog

Read articles written by our team here at Splice.
Call us on 0845 652 2412 to book a FREE consultation.

RSS

How to Design a Responsive Website

Thursday, August 29, 2013   0 Comment(s)  

During my time as a web designer I have had to adapt to various challenges which have meant I needed to change my website design process.

These include ‘wireframing’ a site before designing it, designing sites wider to accommodate for larger screen resolutions and working to design trends to ensure my designs didn’t fall behind aesthetically. All of the adaptations to date have been fairly minor meaning I have still designed website in a similar way, but tweaking the process to cater for new hardware or follow improved design processes. Then along came responsive web design.

The process of designing a responsive website is so different from designing a traditional fixed website that I couldn’t tweak my process to suit; I had to start from scratch. This is what we came up with…

1. Sketch Wireframes of all Major Templates

Before getting your pencil and pad ready you should produce a site plan. This lists all of the pages the site will contain and a breakdown of the elements each page will be made up of.

You can then decide which of these pages you are going to wireframe (and then design). This should be all of the major templates of the site.

For e-commerce, we recommend:

  • Home (including fly-out menu)
  • Category Grid
  • Product Grid
  • Product List
  • Product Details (including basket fly-out)
  • Static Page Template
  • Contact Us
  • Basket
  • Checkout

For lead generation, we recommend:

  • Home (including fly-out menu)
  • Product/Service Templates (if different enough from each other)
  • Static Page Template
  • Contact Us

Now you can hand-sketch your wireframes using a pencil and either a website sketch sheet or squared paper for neat wireframes. A good responsive website will have an unconstrained width meaning it will fill the full width of the screen, no matter what the device. As a result we recommend you sketch your wireframes at 1920px wide as this is the maximum width your site should be viewed at (barring 4K TVs and very hi-res monitors).

You can also sketch each page at tablet (around 768px wide) and mobile (around 320px) but we’ve found they’re seldom used.

Some best practices for responsive wireframe sketches:

  • Sketch at the widest you plan each page to be (1920px for unconstrained pages)
  • Limit the amount of images on each page to keep the page weight down and load time up
  • Be aware of element positions – an element to the right on desktop is beneath on mobile
  • Include as much detail as possible

Read more about wireframes.

2. Produce a Responsive Prototype of the Website

Once all wireframe sketches are completed and approved, you need to produce a prototype. A prototype is a website version of your wireframe sketches. This will be produced by a developer who uses HTML and CSS with lots of media queries to produce a responsive layout version of your website.

For each wireframe you have sketched, your developer needs to reproduce it as an HTML page. The fun and challenging part is then making each page responsive. The best method for this is to sit with the developer and work-out the breakpoints needed when page elements collide with one another. Firefox has a great tab resizing tool for this - just hold down Ctrl+Shift+M.

3. Design your Templates

Now that you have a fully responsive prototype you can design each of the templates. Some recommend designing web pages at mobile resolution first and working up to desktop but we’ve found it doesn’t improve the design process in a noticeable way.

As a result, I recommend designing each template at the highest width each page will be displayed at. For example, if its unconstrained then you should design your pages at 1920px wide, but if you are constraining your site to a width (e.g. 1140px wide) then design your pages at this width.

Homepage Template
Inner Page Template

The main things to bear in mind when designing a responsive site are:

  • Anything which is clickable should be a minimum of 44px square (finger-tip size) for touch devices
  • Keep the number of images to a minimum to keep the page weight down
  • Keep it simple! The simpler the design, the easier it will be to look good at lower resolutions

An alternative to designing each template is to design an asset sheet. This way you design all of the graphical and typographical elements for the whole website on one page. We’ve experimented with this method but have found it is rarely used.

4. Cut Out your Designs for Build

Now that your designs are polished, the last step is to cut out your designs for a developer to implement onto the prototype. Photoshop’s ‘Save for Web and Devices’ feature allows you to save your images at the smallest possible weight (kb) whilst retaining their quality. Photos should be saved as JPEGs and everything else is usually best as a GIF, unless transparency is needed where PNGs should be used. Your developer should be using CSS3 where possible to replicate your designs, including gradients, buttons and shadows.

Icon fonts should be used for all icons where possible. This means your icons are essentially characters of a typeface meaning they will remain crisp on all devices including those with retina displays.

SVG images should also be used where possible to retain superb image quality on retina displays. Social media icons, for example, are ideal icons to be processed as SVG images.

A great tool to optimise your images is Kraken. Simply upload all of your cut out images to the site and download the processed versions which can reduce file sizes by up to 90%! Imagine how happy your visitors will be when your pages load in a second.

Summary

As with most things, the more you do something the better you will get at it - this definitely applies to designing responsive websites.

We’re always on the look-out for the latest responsive sites to see how ours compare. As the concept of responsive websites is still relatively new the number of sites that have been made responsive is very low, especially e-commerce sites. If you have seen any great responsive sites, let us know as we’d love to take a look at them.

If you would like to discuss having your website made responsive to work across all devices, call us today on 0845 652 2412 (Mon-Fri 9am-5pm) or email us on enquiries@splicemarketing.co.uk.

By

Comments (0)
Post has no comments.
Post a Comment

Captcha Image
Post a Comment

Captcha Image

0845 652 2412
Hampshire's Leading Conversion Specialist