It should be noted that responsive design is really, really, really hard.
Really hard.
It takes a lot of time and a lot of planning. The technique of responsive design is brand new and the implementation is totally different to the way we usually will implement websites. By that definition we need to change the way our internal processes work as well as the client journey through the project.
Responsive Design should not be looked at costing extra. What we're doing with responsive design is saving the client money by taking a single website and making it an awesome experience for any number of possible devices that the users might access it from.
We are effectively saving them having to create 3 or more websites with 3 times as many editors and 3 times as many approvals…. all for an additional upfront cost that goes towards the wire framing, user experience and designing.
Do not sell Responsive Design cheaply, it is SAVING the client money.
The process.
- Meet the client
- Explain the process
- Do they have an existing design
- Do they want a new design?
- Do they want to responsify their current design
- Collect the brief from the client as per usual processes
- Wireframe the possible layouts (a must is mobile and desktop at minimum)
- Label the wireframes with the page elements
- Get sign off for wireframes & page elements
- Get sign off for the content ordering within the wireframes
- Build basic wireframes for the client in the browser (with Zurb Foundation, which is what this site is running, or Twitter Bootstrap) and label the elements (images can be done with http://placehold.it/200×200)
- Designer, finally, designs the site within photoshop.
- Get sign off for designs and any style tiles.
- HTML & CSS commences
- HTML & CSS review by developer & designer
- Any additional breakpoints, if agreed, added to the design
- Get sign off for html & css ensuring the client tests with you (in the same room)
- Add to matrix
- ????
- Profit
Explaining the process
There is a lot of confusion around responsive design. It gets called responsive, adaptive, mobile, tablet, fluid, the new thingy when the thing changes when you drag the window bit… lots of names.
Important things to remember is…
- Be clear they SEE what you're explaining
- Get them to agree on the main break points (desktop, tablet, mobile… devices and widths would usually align with iPad/iphone dimensions but more on that later)
- Make sure they are aware that additional breakpoints required in between these sizes come at T&M's and are lead by the designer & client (<- what does that mean)
Recommending Designs
We should recommend creating a new design every time. Even if the main sections of the full screen/desktop design remain quite similar it is very important to make some changes as it will have been designed with a fixed width in mind and will most likely look rubbish when it becomes "fluid".
Wireframing Layouts
Wireframing layouts should entail wire framing each of the breakpoints that have been discussed.
Build basic wireframes
At this point it should be built within the browser and tested on both the browser and the devices. Page elements can be hidden when not used to improve the development time because the focus should be on fast turn around of results with the framework tool rather than on semantics and writing custom HTML & CSS.
I should point out that while I say "elements can be hidden" I refer to hiding a full width navigation element and showing a smaller mobile version, or showing a button to drop down the navigation. Rather than trying to build that into the wireframe you simply need to show the changes.
Additional Breakpoints
There becomes a point between 1024px, 768px, 480px, and 320px that the fluid design looks shit horrible, however we need to concentrate on certain sizes due to fixed priced quotes.
If the client would like to ensure that the design works across ANY width (and this really is what responsive design is all about) then we need to site down with the finished design… with both the front end dev and the designer (and possibly the client) and move the width of the browser up and down. At the point that a heading looks wrong, or the text becomes too small/too long/too short then we need to add a breakpoint and fix that particular issue.
Sometimes there's lots of breakpoints, sometimes there is only one or two. With this in mind it's most beneficial to do this bit as part of time and materials.
Content Ordering
Responsive Design is all about repurposing the full website content on multiple sized devices so that the content can be consumed in the best possible way.
Keeping that in mind the sign off around the mobile content ordering is KEY because that gives the front end dev (for the purposes of the DOM order) and the designer (for the purposes of visual hierarchy) a good understanding of the most important things on the page.
It is also a brilliant way to get the client to focus on what is really important.
Note: This is NOT an opportunity to hide content from the user. THIS IS NOT OKAY.
Responsive Design with Photoshop
Photoshop is designed for fixed width layout. Open it up, select your canvas dimensions and it's done.
While true this does not mean that you need to throw it away when it comes to designing a responsive design. The client and possibly the project sponsor will want to see the full site design because that is what they are used to. We should still provide this to them, however it does not need to also contain EVERY breakpoint.
Any changes to elements on the page (navigation swapping from text to an icon) should be designed as style tiles rather than building the entire design in every single format. If the client demands the 3 designs it needs to be clear upfront when discussing the process because it requires additional time and money.
