When creating a website with responsive design there are a lot of variables that need to be considered to provide the best experience to the user regardless of the device or connection they have available.
This article will show you the usability and accessibility considerations you need to start and finish a project faster.
1. Start with a mobile first approach, don’t worry about screen sizes
I start my responsive design with a canvas of 300px in width and as the height will be determined by the content. Once you have all the wireframes ready, jump to coding to start testing on the browser as soon as possible. (This will save you lots of time when testing and taking design decisions)
2. Find your breakpoints
The breakpoints will determine when the layout changes on your design. Your breakpoints will be determined by your content, not by the size of the popular devices out there, here is how:
Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT! – Stephen Hay
Different elements might need different breakpoints in your design and that is ok. Here are some patterns that you could use.
3. Independent modules
Each element on the project might have a different behavior in each breakpoint, we need to create modules that work as standalone, delivering functionality wherever they are included and that allow testing separately from other content. The modules must work nicely with the other modules as well.
4. Design for touch
Always allow to access the content with clicks or taps. Actions activated by ‘mouse hover’, ‘mouse in’ and ‘mouse out’ must be optional and should not be important part to show content since we are in a world where touch interfaces are dominating.
Tip: areas to be tap on should be at least 45×57 pixels for best results.