Choosing mobile over desktop: This is not a new idea; it has been around since before responsive design took off as a serious approach to creating sites. The mobile-first concept means that we should develop our content for smaller mobile devices first, before working up to tablets and desktops. At this stage, it is important to be aware of what visitors may be using for your current site; this will help determine which devices we should concentrate on as part of our design.

Breakpoints: Getting these right will be essential to the success of any site we build; not only must we choose the right thresholds for the devices we want to support, but also ensure that the cut-off points do not overlap each other. A common misconception is to develop for standard breakpoints such as desktops or tablets; instead, we should set our breakpoints to kick in when our content breaks within our layout. This screenshot shows the type of thresholds we have to consider in our designs:

The flow of content: When we start designing for smaller screens, content will naturally be squeezed and begin to flow downwards. This may be tricky to grasp as a concept, if you're used to pixels and points when designing, but it will make sense once you get used to how content will flow downwards in responsive design.

Relative units: This is an important concept in responsive design. It's a case of learning how to make the switch from static values to relative units. Calculating values in percentages means that content will always fit, no matter what the viewport size; for example, the size of a <div> set to 50% means that it will only ever fill 50% of its parent container, no matter what the size of the viewport. It may be a case of building the initial design with static values, but we should try to get into the mindset of converting to use percentages as part of our design process.

Max and min values: A part of using relative values means that our browser won't understand what the lower and upper size limits of each element will be. To work around this, we must set min-width or max-width values; these will ensure that no matter what width our elements are at, they won't go past the limits set in code.

Web fonts or system fonts: If you maintain a desktop version of your site already, and it uses one or more web fonts, then you have an important decision to make: should the mobile site use the same fonts? The reason for asking is because this requires additional content to be downloaded; it will consume extra bandwidth, which will be a concern for devices where this is limited. Bear in mind that anyone using a mobile device is likely to be under time pressure, they will want to do something quickly and with the minimum of fuss, so selecting a non-standard font won't be a useful way forward.

Bitmaps or vector images: When working with responsive designs, a key principle is scalability; we must have images that can easily be resized or swapped for larger or smaller as appropriate. Taking the latter approach on a mobile device isn't wise; a better route would be to consider using vector images. These not only resize without loss of quality, but can also be manipulated using CSS if desired, which reduces the need for separate versions of the same image (provided the vector image has been optimized prior to editing with CSS).

Content strategy: The aim of responsive design is to create the best possible experience, irrespective of the device used to view the site. Part of this centers around content; as a part of developing a strategy, content should always come first. We need to add enough to make our design a useful foundation; we can then add or develop this at a later date, when we add support for larger screens and resolutions.

Sketch and prototype: Once we have worked out our content and a strategy for managing it, it's time to develop the layout. A key part of this should incorporate sketching or wireframing; it will help turn the rough beginnings of a plan into something more solid. Many designers will use PhotoShop, but this is at the risk of wasting lots of billable hours that must be accounted for with the client. Sketching on paper is portable, and has a low visual and content fidelity, which means we can focus on how content interacts, rather than how it looks.

Frameworks: Using a framework in our development can bring several benefits to our development process; it's tried and tested code means that we can cut down on development time, and make use of the grid approach to build and refine our layout around our content. Frameworks will have already been tested across multiple devices, so the debugging time is reduced; we should concentrate on choosing the right framework, based on criteria such as the learning curve required, support, and documentation availability.

Scalable media: Images and videos are essential for any site; not only do they help add color, they can also convey more in a smaller space. All of our images must be scalable; it doesn't matter if we swap images out as our resolution increases, or we use a scalable format such as SVG. We need to give consideration to sourcing both standard and hi-resolution versions of our images, to cater for those devices that support the latter; these can either be individual or in the form of image sprites. Our media strategy should also consider using icon fonts, which are perfect for small, repeatable elements such as social media logos.

Minification: If we're building sites to work on devices where bandwidth constraints and limited resources may be a factor, then we must consider minifying our CSS and JavaScript content. Minifying should be a standard part of any development workflow. We can reduce the number of HTTP requests to the server and improve response times. When designing responsively, minification becomes more critical, as we are adding more CSS styles (such as media queries) to cater for different viewports. This will inflate the size of our style sheets even further so anything we can do to help reduce the size, will help encourage takeup of our newly developed responsive site on mobile devices.