Responsive Web Design

June 19, 2014

Responsive Website Design

Responsive web design is a practical way to ensure your website is easy to use and looks good on phones, tablets, laptops and large displays. Before responsive web design, an entirely separate mobile website was needed for pages to display on a phone where the text size was large enough to read without having to zoom in.

Want to see responsive web design in action? Just shrink your browser window horizontally to see how things on this site shift and change to accommodate a smaller screen width without the text getting any smaller or horizontal scrollbars appearing.

Traditional websites vs. responsive websites

Traditional websites are often designed with a fixed width of about 990 pixels. This number became an unofficial standard around 2007 when the most common screen resolution was bumped up to 1024x768 pixels. A website that's 990 pixels wide fits neatly inside of a screen that size. While computer screen resolutions have steadily increased through the years, the standard width of 990 pixels has persisted for two reasons. First, new and smaller devices like netbooks and tablets have gained in popularity. Second, a significant portion of those who have large displays don't browse the web with their browser window at full screen.

Thanks to the decline in use of older browsers like Internet Explorer 6 and 7, as well as continued development of CSS (the language used to style websites), responsive web design has been allowed to take off in the last couple of years.

Instead of having a desktop and a mobile version of your website, responsive websites make use of newer CSS3 coding techniques to apply different rules to the elements on a web page based on the width of the browser. This method allows for the resizing and shifting of content so that everything always fits and without causing left and right scrollbars to appear.

Ways of developing responsive websites

Twitter developed a CSS and JavaScript framework called Bootstrap that made coding a responsive website much simpler. After seeing a presentation on Bootstrap that explained the basics of it, I developed my first couple of responsive designs using it.

However, after working with it and learning the concepts, I started experimenting coding layouts without using the framework. Now I prefer to hand code all the CSS that is needed to make a website responsive rather than messing with a bulky framework like Twitter Bootstrap. It takes me less time and it loads faster to boot!

I have to mention it!

Even though I no longer use Bootstrap, it still has a special place in my heart! I love Twitter's Bootstrap Examples page because the second to last example, called Sticky Footer, is a demonstration of Twitter Bootstrap that incorporates my CSS Sticky Footer code that I developed in 2007 and released to the public. Thanks guys!

Comments

I know it's long overdue that I allow comments on my resources. You can now submit them!
Note: I approve comments before before they appear on the site, so please don't spam.

Leave a comment






Las Vegas Web Design Services