Blog

Our thoughts and opinions on software development and technology. Sometimes, you'll read stories about what it's like at work here at Exist.

Responsive Designs 101 – The Future of the Web is Responsive

Written by

Gil Florendo

Jul 09, 2012

What is a responsive design?

What comes to your mind when you hear about responsive designs? To some of us it may seem like a design that interacts with the user/visitor of the site or perhaps a design that responds or talks. (Do they literally talk? ).

image from r2i

Responsive design involves the creation of a single website that automatically adjusts to the user’s needs and the device they are using.

Proliferation of responsive design started when majority of website visitors started using mobile devices to access websites. Different screen resolutions fromdifferent mobile device manufacturers urge web developers to implement responsivedesign.

Being an HTML/CSS developer, I have been coding websites using a fixed width layout that are not compatible with mobile and the result is poor. Thanks to the continuous enhancement of css3 and html5 that supports these devices nowadays. With the help of the code snippets available throughout the web, I am now able to code sites that are useful for mobile devices user. Here are few of the examples:

@media screen and (max-width: 320px) {

.sidebar { display: none }

}

@media screen and (min-width:1920px) {

body { font-size: 15px }

}

The @media screen is used for declaring different media devices such as mobile. While the attribute max-width: 320px tells the code to NOT display the sidebar if it detects a 320 pixel screen resolution.

The best responsive design free code that I use a lot came from this site: http://www.getskeleton.com. They provide the base css and the base structure for your website to start with. You can download the files from their site.

Get Skeleton

Skeleton's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ.

It also has a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles:

Responsive Grid Down to Mobile, Fast to Start and Style Agnostic. For more information about these principles, please visit their website at: http://www.getskeleton.com

One of the examples of a responsive design that uses skeleton framework is: http://www.eleventhedition.com

Why would I implement responsive design?

You should implement responsive design with your html and css codes because of its flexibility in terms of mobile screen. Since the majority of web visitors use mobile devices such as IPad, Samsung Tab, IPhone etc. using this technology could benefit both the developer and the user.

“We’re just now starting to think about mobile first and desktop second for a lot of our products.” -Kate Aronowitz, Design Director Facebook

PROS and CONS of a Responsive Web Design

PROS of Responsive Web Design

- Less maintenance

o Much easier to add and manage layouts for new devices that it would be to create and manage separate sites that are optimized for various devices.

- Search Engine Optimization

o SEO Authority will not become diluted as all links and bookmarks point to one URL.

- Social Media / Sharing

o If a user shares the site, the recipient will always get a similar experience in the most optimal view.

- Better User Experience

o Responsive designs does not imply plug and play. Inherent in this design approach, is deliberate consideration for multiple user experiences, which in the right hands will be thoughtfully designed to maximize the user’s experience on each targeted device.

- Conversion Optimization

o Your conversion goals are balanced effectively based on varying user intent and within the constraints of each specific layout to ensure optimal conversion.

- Web Analytics / Tracking

o Performance tracking is centralized, making conversion attribution and segmentation by marketing channel much easier to manage.

CONS of Responsive Web Design

- Technical Difficulty

o Responsive design is a completely new and evolving concept with its own set of rules and techniques.

- Performance

o By default, responsive doesn’t mean that performance will be improved for mobile but with additional work this is doable.

- Implementation

o Production time can be extended as there are more kinks to work out than usual.

- Limited Resources

o Resources that provide implementation guidance are still fairly limited.

For detailed information about responsive designs, you may visit these links: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ http://www.labnol.org/internet/responsive-web-design-faq/21361/

For CSS3 @media usage:

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

---

Are you looking into mobile and web development as as strategy for your business? Talk to us and let's help you deliver unique compelling web and mobile experiences.