Responsive Web Design continues to be a hot topic in 2013. Mashable just deemed 2013 the Year of Responsive Web Design. In order to better serve our clients (and their budgets) we here at FIREANT STUDIO have fully embraced responsive design and seamlessly integrated it into our process. From our project scopes to production workflow to our design process, we are happy to provide our clients with the latest techniques and tools to better serve their user base.

We feel the benefits of creating one code base which responds to all users’ devices and screen resolutions, simplifies the development process and reduces the number of interactive offerings the client is required to support – no more mobile-specific sites!

In our first installment, we’ll take a look at what exactly Responsive Web Design is and what makes it so valuable. Here’s the break down:

  • Responsive design is a new and emerging technology being used for many popular sites.
  • Responsive Web Design uses media queries to discover a device’s resolution. This means the site will automatically become a mobile or iPad site without having to expend additional hours to redesign and redevelop for those devices.
  • Responsive Web Design uses a fluid grid system with break points. A fluid grid means a column doesn’t carry a fixed width; it scales to fill as much room as it can. Break points are arbitrary values that determine when a site should change the content layout to accommodate a specific screen size. Standard breakpoints are 480px, 768px, and 960px. If a browser is opened and expanded to full-size, you can utilize a layout to display content at the full 960 pixels. If you were to collapse your browser to 768 pixels wide, you’d see a markedly different design.
  • Here’s an excellent example of a responsive website we just finished developing – http://impossible.tv. Go ahead and give it a spin. Check this site out on any/all devices you have; open it in a desktop and play with the width of your browser window. Notice how the layout “responds” to your device and viewing preferences.
  • The responsive design allows the layout to adjust, or “respond,” from three- to two- to one-column displays. Perfect for viewing the site across a variety of devices.

Next week, we will feature a post about why we, at FIREANT STUDIO, have adopted Responsive Web Design into our design process. To read more about what Responsive Web Design is, check out these links:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.alistapart.com/articles/responsive-web-design/

As always, FIREANT would love to hear from you. Please send any comments or questions you may have toinfo@fireantstudio.com. We’re interested in all of your opinions, suggestions and rants!