Beginner’s Guide to Responsive Web Design

Whether you’re a beginner or a seasoned web professional, creating responsive designs can be confusing at first, mostly because of the radical change in thinking that’s required. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. In fact, the magnitude of this paradigm shift feels as fundamental as the transition from table based layouts to CSS. Simply put, this is a very different way of designing websites and it represents the future.

Because site designers have to adapt and develop their traditional methods to meet the changing scope of users’ wants and needs, web design is continually evolving.

Now that so many people access the Internet on their smartphones, tablets, and other mobile devices, it’s important to create sites that perform as fluidly and fluently on mobile screens as they do on traditional desktops. And that’s where responsive web design comes in. This type of approach allows web designers to kill two birds with one stone, designing a platform that will map to mobile and desktop sites with ease.

Over at the Treehouse Blog, author Nick Pettit has put together a helpful guide to the subject: the Beginner’s Guide to Responsive Web Design. In his guide, Pettit gives an overview of how responsive design got started, explaining that we can thank a person (Ethan Marcotte) and a device (the iPhone) for its development. Pettit also breaks down the technical aspects of responsive design. As he explains, we get a responsive design by using what’s called a “fluid grid” in the page layout and incorporating “media queries” into the CSS. (Source)

Finally, Pettit doesn’t just explain responsive design: his guide uses it, too. Neat, right? Pettit shows, and explains, that a responsive design page can automatically be sized to fit the screen it’s viewed upon. Head to the Beginner’s Guide to Responsive Web Design to try it for yourself. (Source)

So, once you understand it, it’s time to think about whether responsive design may or may not be right for your site. Mark Ryan’s blog post, 7 Pros and Cons to Building Templates with Responsive Design, has some helpful hints. Ryan explains that responsive design is good for a lot of reasons, including the following: it unites mobile and regular sites, it’s clean to build, and it puts the focus back on what’s on your site, rather than what the site looks like. To be fair, Ryan also explains what responsive design is not good for. Among other issues, it can take longer to create, it may not work on all web browsers, and developing it can cost more. For the full list of problems and benefits, click over to Ryan’s post. (Source)

New Day Interactive is pleased to offer clients several approaches to web design, including responsive design. Before selecting any design approach, though, we think (like Ryan) it’s important to evaluate its benefits and problems, and measure them against your website needs:

● For example, does a fluent interface–a site that moves from mobile to desktop and back again–sound appealing to you?
● Are you less interested in creating a mobile version of your site that aligns with your larger site?
● Can responsive design support all the features you want your site to have?

Based on Ryan’s blog, if you really want your site to look the same across platforms and have a smaller amount of text you want your site to emphasize, responsive design could be a great solution. But, if you’re under time or budget constraints, a different design approach might be a better fit for you.

Would you sacrifice some design control for being able to have your website work nicely on multiple devices or would you stand your design ground?

Questions? Contact us to start the conversation, or post a comment here!