There is a lot of talk about responsive design today, but not a lot of tactical knowledge sharing HOW to do it. But first and foremost, Akendi avoids using the buzz word “responsive” and instead talks about what the purpose of responsive truly is: translating a website across multiple devices.
The key to designing for multiple devices is to deliver the “right things” at the “right place” at the “right time.”
We’ve found that coders want to dictate how the design process happens and will lock into there own personal definition of what the terms responsive or adaptive mean. The true intent is to design for multiple devices in a manner that best meets the needs of users and best communicates the client’s business goals. Design is what makes this happen, not a technological solution.
Akendi uses user and stakeholder research to determine what information needs to be presented though the web and to what devices. We then create an IA (or multiple IAs — one for each breakpoint that is determined) that allows users to complete the unique tasks that they have for each device. Akendi then creates wireframes for each device type that brings these use cases to life through interaction design.
In the visual design stage the designers work to bring all of these factors together to create the actual user experience that will be portrayed online. We design layouts that will then be coded, sometimes utilizing a framework, and translated to each device using media queries.
During the design process there are some critical considerations to make and critical understanding that needs to be established in order to have a successful outcome.
Websites are displayed on physical objects (mobiles, tablets, laptops, desktop monitors and TVs, for example) that have physical dimensions. An iPhone 4S is 2” x 2 7/8”. When designing for various devices it’s important to know what the physical dimensions of that object are. As explained above, how big your website is displayed is determined by both the physical size of the object and it’s resolution. To make it even more complicated, device screens are usually measured on the diagonal. For example, a 27” desktop monitor is actually 23 1/5” x 13 ½”.
Resolution refers to the number of pixels in each dimension (width x height) that can be displayed on any screen device. Screens that are different sizes can have the same screen resolution. For example, you could have a 13” laptop screen that has a resolution of 1280 x 800 or a 17” monitor with the same resolution. Although the monitor is larger, it will display the same amount of information because the total number of pixels is the same, everything just looks a bit bigger because the pixels are bigger.
There are many lists online that list screen resolutions of pretty much any device.
Media queries are bits of code that deliver different CSS styles (or design elements) to different devices, providing the best experience for each device user. They allow content to be displayed based on a number of device properties, such as screen width, resolution, orientation, and so on.
Breakpoints are where the layout changes based on device type. These are the actual sizes that you make your layouts. Of course they will adjust (we prefer to allow them to scale without reflow) to the specific size of your device, but we need to be able to put a stake in the ground and design layouts at a specific size.
Akendi tends to advise against the use of fluid grids. When fluid grids are implemented, the design composition suffers. For example, in playing around with responsive sites, you may have opened and closed your browser to different sizes to see how the site jumps and when. Next time, pay close attention to what happens to the text. There are often sub-optimal ways that the text is rendered that alters the type sizes and line lengths of leading to illegibility. You may have also seen that the images become too tiny or too big or overlap and relate to text in awkward ways. It’s never a good idea to leave how your website is portrayed to your customers in the hands of a machine. Instead, we use a combination of responsive and adaptive approaches and design for multiple devices to control how typography and design elements are portrayed.
There are several items that need to be resolved before design can begin:
> Define the content requirements (e.g what types of content will be communicated)
> Decide on browser compatibility requirements
> Define the breakpoints that will be accommodated
> Decide what happens between those breakpoints
> Determine image scaling requirements
> Determine best approach — will the pages be fluid or static or a combination of the two
> Determine page types and how many templates to create
Once these questions are answered and design begins, there are some rules to follow:
Work in a vector based format for anything that is not a photograph. This will save you time because you won’t have to save out the same assets over and over again at different sizes. In Illustrator, you can create pixel perfect layouts and utilize symbols to create a modular system of controls and assets. Vector assets will scale cleanly from 320px wide to 1536 and SVG files enable this.
Add safe zones of the smallest browser to your file and ensure that all the key content appears within the safe zone window.
Make sure that anything a user has to touch is actually touchable. A study by MIT has determined that the average human index finger tip is 16-20 mm. This converts to 45-57 pixels. Of course, the mapping of the target is what is most important. You can have a smaller target if it’s mapped to accept touch of 16-20 mm. Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall.
If you are using photographs that need to scale via media queries, use these as guidelines:
480 pixels wide – Android Phone/Windows Phone
960 pixels wide – iPhone 4 +
1536 pixels wide – iPad Retina display
> Make sure all artwork is pixel perfect
> Utilize symbols for easy editing of icons, navigation bars and repeatable graphics
> Design and align everything to the pixel grid
> Use paragraph and character styles for all type
> Create logical layers
> Delete all unused colours, type styles, and symbols
> Package all images and fonts
> Crop and reduce images to their appropriate sizes in Photoshop
> Add annotations for developers where there is animation/interaction that needs to happen
> Double check brand colours
> Remove any overset text
> Ensure consistent margins across the system
> Spell check twice!
The above guidelines and tips should help you to deliver the “right things” at the “right place” at the “right time.”
Athena Herrmann, is Design Director at Akendi, a firm dedicated to creating intentional experiences through end-to-end experience design. To learn more about Akendi or user experience design, visit www.akendi.com.
Akendi is a product strategy, user experience design and usability research firm. We are passionate about the creation of intentional experiences – whether those involve digital products, physical products, mobile, service or bricks-and-mortar interactions. We work shoulder-to-shoulder to optimize the experiences you deliver. Akendi Corporate Overview (PDF).
Experience Thinking innovation firm in Product UX Strategy, User Experience Design & Usability Testing for Companies: Toronto, Ottawa, Montreal, Vancouver, Canada.
T: +44 (0)20 35982601
22 Highbury Grove
London, N5 2EF