Join Morten Rand-Hendriksen for an in-depth discussion in this video Designing in the browser, part of Mapping the Modern Web Design Process.
- Following the three constants of responsive web design, the actual job of designing your site across all possible screen widths is best done in the browser. You design for the medium the final product will be presented in, and that medium is the browser. In practical terms this means we build the design from the ground up just like we did with content and accessibility: one piece at a time, in code. To web designers who are used to doing the visual design in Photoshop and then transposing it over to an IDE, this will be a bit of a transition.
That said, there are major benefits to the in-browser design process that will make you less dependent on Photoshop in a very short time. And of course you can still use other design tools to help this process along, especially to make mock-ups for clients. But the majority of your design work should be done in the browser. Here, like before, there are different ways of doing things so I will provide you some basic guidelines to get you started, and then you can develop your own preferred methodology.
My method involves starting from the global and moving in towards the local before focusing in on individual components and elements. Assuming you've followed my lead so far you should have a content-only HTML build that is fully accessible. Now you can start applying CSS rules to that markup and bring the live site closer to the style guide you've established. Again, following the three constants of responsive web design. Where exactly you start is a matter of preference.
I like to start with a full CSS reset, and then build out my global elements: body fonts, headings, links, block quotes and other standard HTML elements. For fonts I apply a standardized set of media queries that increase the font size on wider screeens. I also group background and font colors of the entire site and main sections like header, sidebar and footer in with the global elements.
The design decisions for all of this should either already have been established in the style guide, or should be added as you move forward. If it turns out your initial ideas don't work as well in the browser as you originally envisioned, simply find what works and augment the style guide to reflect the change. With global elements styled I typically move on to main layouts. Here it's important to follow the already established content priority hierarchy and information architecture closely, to ensure the work done in the content strategy phase pays off.
Style layouts for the mobile screen first and add media queries as necessary to account for wider screens. Because I typically work with content management systems I physically separate all layout styles and place them in their own stylesheets. That way I can have multiple layout stylesheets for different types of views, and those stylesheets can be called in dynamically to achieve multiple layouts with one main stylesheet handling everything else. With global styles and layouts in place I move to individual content blocks which we'll cover in the next movie.
- Understanding what your users care about
- Creating user personas
- Creating content priority hierarchies
- Testing wireframes and interaction patterns
- Establishing a three-track build process
- Incorporating accessibility principles
- Using content blocks
- Testing and revising your web design
- Optimizing for social media and SEO
- Launching your web design
- Getting feedback from users