Plan Responsive Websites More Easily With the smooster RWD Checklist
2014.02.28 by Sebastian Maier
“Can we possibly do it like this? Is that possible?”
Responsive web design (RWD) is no longer a brand new phenomenon, but during communication between the designer and the implementation team, there are loose ends time and time again.
This blog post is a product of our experience in implementing responsive websites. Inside it, you will find a summary of what we consider the most important points, to which you should pay attention while planning an RWD draft. At the end of this article, you can additionally download all the information compressed into a checklist.
Before going over to the details of the individual website elements, you must first answer the question of how best to start planning a responsive design. The mobile-first approach turns the tables during web design planning. Instead of optimizing a desktop-size design for small screens later, it is advisable to create the design for the smallest screen resolution (smartphone: 320px) first. Thus, you will escape the problem of having to adapt many contents to a small screen. Elements that are required for the desktop version turn out not to be as important for the smaller display. In this way, the mobile-first approach helps to reduce the content to what is important.
Starting with the smallest design and the navigation suited to it, you can plan the arrangement of website elements for larger screens more easily. Further down, you can find more about the order of website elements on smartphones, tablets, and the desktop display in this article titled “ARRANGEMENT OF WEBSITE ELEMENTS”.
TYPE OF RESPONSIVE WEB DESIGN
Responsive (fluid) - “grows” fluidly with the screen size
- Adaptive (fixed) - adjusts itself to the screen size at fixed intervals
There are two variants of RWD to implement. “Real” responsive design grows fluidly with the size of the screen, so that individual elements like the header image, for instance, adapt themselves flexibly. With the adaptive variant, the adjustment occurs in steps fixed by the designer. At a certain screen size, it switches to a different display. Both variants are often used side by side. We mostly find out what suits each project best, while agreeing on designs for the various screen sizes in collaboration with the designer.
SCREEN SIZES FOR THE DISPLAY WIDTH
320px - 480px (smartphones)
480px - 960px (tablets)
- > 960px (desktop computer)
Hint: Depending on the structure of the design, it is sensible to create separate designs for each screen size. The arrangement can change depending on screen size, especially if many image and text elements are connected. Under “ARRANGEMENT OF WEBSITE ELEMENTS”, you will find even more information on that.
MINIMUM SIZE OF TOUCH ELEMENTS
All clickable elements like buttons, links or form fields should be at least 44px x 44px large, so that the user will find it easier to operate.
The limited space, especially on smartphone screens, usually requires a different type of display for navigation items than in the desktop variant. These navigation types are used on many websites for this purpose:
Toggle, Accordion or pop-up navigation
Off canvas navigation
Drop down menu
You can find more detailed information on these responsive navigations in my article: 6 Tips On Finding The Right Responsive Menu For Your Next Website
Important things to note:
Is the navigation single- or multi-layered?
Is the website multilingual? How will the language be selected through the navigation?
Hover effects cannot be used on touchscreen devices. This is especially important for planning multi-layered navigations, but also applies to the entire website on touchscreen devices
Even though planning according to the mobile-first approach essentially helps in reducing the content, it can happen that, there are contents important to the customer, which are difficult to operate on small screens due to their length or size. In this case it is possible to hide content specifically, e.g. in the smartphone version, and make them available to only the user of the tablet or desktop view.
Since smartphones and tablets are used ever more often not just on the go, but also as a second screen at home, you cannot make a general judgment that some content is definitely more important for smartphone users.
A user will most likely find his way, if he finds the same content on all devices. If it is not resolvable in another way, you should ask yourself the following questions:
Is there desktop content that should be hidden in the mobile view?
Is there content that is visible in the mobile version?
HEADERS, SLIDERS, ANIMATIONS AND VIDEOS
For website elements like headers, sliders, animations, and videos, you ought to decide, whether they should grow larger dynamically and be displayed in each screen size or be faded in or out as from a specified screen size. Here it is dependent on both the usability and the loading time of the individual elements.
For complex forms, which cannot be reduced in the desktop variant at the customer’s request, there is the option of specifically fading out individual fields in the mobile version. The form fields can both be filled directly on the website or access the input function of the touchscreen device’s OS. Since the user specifically has to be able to operate the fields with his fingers, it is particularly important to pay attention to the usability of the forms at this point.
The mobile-first approach helps especially while planning the order of website elements. In this way, you can plan the contents in a small space and give them more space on larger displays. In principle, it helps to think of the content like a chain. It is possible to change the arrangement of the chain, to bend it so to speak, on the other hand, re-mixing the order of the elements of the chain in a different screen size is more difficult.
If the of individual elements are changed fundamentally, it is not advisable to work with fade-ins and fade-outs, since duplicate content is created from it that can negatively affect search engine rankings. If the smartphone view will be built with a different structure, a dedicated mobile site makes more sense than responsive design. But if it’s about moving a single block of content - such as the navigation in footer navigation - to a fixed point, in this case the end of the page, it is easier done.
This information is presented in broad terms on purpose. Since it is almost always possible to find solutions in individual cases, you’re welcome to approach us about it for a concrete project.
If you create individual elements in a grid of at most 320px, you increase the flexibility of the responsive website
For the size of clickable elements, pay attention to the minimum size (40px x 40px) for touchscreen devices
In pages with a lot of content or footer navigation, creating a simple option to “jump” back to the beginning of the screen is recommended
Do you have questions or suggestions about the responsive design checklist? Get in touch with us.
Do you have a design draft for a responsive website and would like to implement it with smooster?
The following data are all we need from you:
Type of RWD:
320px - 480px (smartphones)
480px - 960px (tablets)
- > 960px (desktop)
The design for tablets is optional.
Which responsive navigation do you want to use?
As from what screen width should it be visible?
Should elements be faded in or out? If yes: As from what screen size?
...and finally, send your design as a Photoshop, InDesign or Illustrator file to firstname.lastname@example.org
Header image by: GALYMZHAN ABDUGALIMOV