Start with a baseline presentation as the main body of your CSS file (i.e. no media queries). This should include resets, colours, typography and core elements of the site. At this stage the layout should be minimal and strictly linear - however tempted you might be, do not include floats or positioning at this stage. This is the layout that older browsers that do not support media queries will receive, this is sometimes referred to by the maxim: "The absence of media queries is the first media query."
This is where we have our first media query and is used to enhance the presentation for browsers that support media queries. We use a media query of
@media only all to target these browsers.
As we now know the browser has a reasonably modern CSS engine and can be relied on to handle most layout instructions corrects we can now start using floats and positioning to move away from the strictly linear baseline presentation. This is what you would typically think of as your first mobile layout for smartphones.
Layered Media Queries
I'm not going to say too much about this as it is one of the cornerstones of responsive design - use the code within the media queries to build out your layouts to adapt to screen size or other signal. Pay particular attention to how declarations override each other and pay attention to the 'reset' value of CSS properties as they differ.
<html> element that signifiy support for browser features that then let you override earlier CSS declarations to better support that feature.
Another key feature to detect is support for a touch screen interface. Whilst - in my experience - not all touch screens correctly identify themselves, the most common devices will do so. There are two key areas that you should be using touch support to modify the UI:
- Touch targets
Items that are the target of touch interactions - such as buttons and links - can be given increased padding and margins to make interactions with them easier. Small targets are fine with a mouse but the pad of a finger can cover a large area of a small screen so large and well spaced touch targets make interaction less error prone.
- Hover states
Touch interfaces don't support a hover state in the way a mouse pointer does, especially for items that also have a click interaction where touching the item will trigger the click state without previously triggering the hover state. Many sites, and especially navigation menus, rely on the hover state to reveal further information and, in some particularly bad cases, the inaccessible hover state is the only way to access an item.
I have expanded on this topic in my post on building a layered UI.
Bringing it all together
We start with a baseline, linear, layout that is suitable for less capable browsers such as older mobiles and legacy versions of Internet Explorer.
Then, in an
only media query, we enhance the baseline layout with a more complex layout suitable for narrow screens.
Using further media queries we then build out the layout with breakpoints as we would do for any responsive design.
Finally we add in specific style enhancements based on feature detection.