To try and avoid the battle we’ve prepared a series of Responsive Design Patterns for you to use as a jump start when deciding how to layout your page designs.
Best approach for responsive design patterns
There are many ways to approach the design of a web page and I recommend using the approach that you feel most comfortable with and the one that allows you to produce the best possible design to solve the business goals of the site.
Regardless of your approach, however, there are a couple of key things to keep in your mind when going through and designing each of the page templates.
- Have I covered every viewport eventuality?
- Will my design scale appropriately and still deliver on the business objectives
Each of your design patterns will need to work just as well on the mobile as they do on a tablet, as on a small laptop, or a large scale monitor. If you’re building your desktop page templates first remember that anything you’re putting side by side is likely going to need to stack on top of each other, and for that reason, I always encourage designers to at least wireframe from a mobile first perspective.
The mobile first perspective forces the client to make tough decisions around the content hierarchy which then helps you define what the most important elements are when designing through the rest of the viewports.
Do I need to design page templates?
Great question!
In recent years there has been a push towards the use of style guides and building design components rather than page templates. The templates still come at the end, but they’re made up from a combination of the different components and pulled together to create the ‘perfect page’.
One of my favourite approaches for this is Atomic Design developed by the very clever Brad Frost.
