There are countless combinations of tools, frameworks, and processes to build a responsive website. While there may not be just one right or wrong way to begin, an outline is a great way to start your project. From the initial wireframes and concepts to the core markup and testing, this guide has you covered.
Never before have wireframes been so important. Responsive design presents new factors to consider since layouts are no longer static, but rather dynamic. Content areas need to expand, contract, and move depending on screen sizes. Wireframes provide a quick and easy way to build responsive flows and get a better understanding of your layout. Check out Mocking Bird, OmniGraffle, and Balsamiq. Remember to create wireframes for mobile, tablet, and desktops!
2. Concepts & Visual Design
While it may not be as useful as it was pre-CSS3, opening Photoshop and creating initial concepts and visual designs can be helpful. However, some would argue it’s not always necessary. Just remember, it doesn’t have to be pixel-perfect! Shadows, rounded corners, and gradients can all be created within CSS3 (and sometimes it’s easier to skip over to step three and begin designing right in the browser).
3. Grid Systems & Frameworks
Find a fluid, responsive grid system or framework you’re comfortable with. A good grid system or framework will save hours of your time. Some popular grid systems include the Golden Grid System, Less Framework, and Fluid Grid. If you prefer a looser approach, try a framework such as HTML5 Boilerplate or Twitter Bootstrap.
Although it won’t make or break the responsiveness of your design, the newer HTML5 elements will improve accessibility and searchability of your markup. HTML5 is the first step to future-proofing your website, so don’t take it lightly!
5. CSS3 & SASS
If you haven’t already, learn the ins and outs of CSS3 before you begin. Be sure to use rounded corners, drop shadows, and web fonts. It’ll save you time and help your website load faster. Media queries are the core of a responsive design, so learn how to use them. Create a shared stylesheet which contains core selectors, then add mobile-only, tablet-only and desktop-only stylesheets to compliment the core. Define fallbacks with Modernizr and Respond.js. If you’re willing to invest several hours to save many more, buy a copy of Compass and read tutorials on using SASS. It’ll lighten your load by automatically completing CSS3 vendor prefixes.
Start digging in and writing your markup. Always start with mobile first! (At the least, be sure the markup is optimized for mobile devices.) Responsive websites use fluid widths (percentages) instead of traditional, pixel-based sizing (px). Sometimes it’s easier to build the website with a static pixel width and then convert to percentages later (especially if it’s your first time). After you write markup for the mobile layout, build the tablet and desktop versions.
7. Images & SVG
Bandwidth on mobile devices usually underperforms desktop speeds and is often capped. One advantage to splitting desktop and mobile user experiences is the ability to deliver separate image sizes. Hopefully in the future more options will become available, but right now Responsive Images and @media responsive images are some of the best choices for scaling rasterized images.
When beginning your responsive design, rethinking the formats of your content areas is the biggest challenge. You should constantly be considering ways to improve your layout’s format. Check out Media Queries for ideas and inspiration for your layout. As you’re writing the markup, unfamiliar challenges may arise. Certain sizes may have unwanted wrapping text (orphans) or overlapping DIVs and content areas. At this point, it’s all about fine-tuning your CSS to resolve these issues. Look at other responsive websites to see how their designers tackled similar problems. Ask for help on communities such as StackOverflow.
Learn to let go. Very few will find the time or resources required to test their design on all of the countless mobile devices, let alone countless screen resolutions and pixel densities. Resize your browser’s viewport to find specific rendering problems. Use tools like Studiopress Tester to get a good idea of what your site looks like on mobile devices and tablets. Just remember, your site will never look the same in every browser, so make accessibility and readability a priority.
Hopefully this outline will help in your next responsive website! While it may feel a bit overwhelming at first, it gets easier with time. Eventually, you’ll want all of your designs to be responsive. Feel free to leave any questions in the comments below.