Responsive Web Design

In the early days of mobile internet devices it was common for web designers to be called upon to create one website for desktop viewing and one for mobile devices. This process not only increased the initial design cost but also added to the complications of editing and adding content to businesses websites.

Responsive design uses software and layouts to create a single site design that responds differently to create a specific view that is optimal to the device that it is being viewed on.

Layouts

Today we have hundreds of different browser screen sizes. We have 7”, 8” and 10” inch Androids, iPhones, iPad Minis iPads and full sized iPads. Then there are hundreds of different sized desktop and home entertainment screen options.

Responsive web design adjusts your layout to give the best view of your content no matter what width or height of the device is being viewed on.

Elements

Responsive design also allows for automatic switching between elements that are optimized for a particular device type. In most responsive sites, smartphone users will see a mobile-friendly menu while desktop users will see the larger, more robust menu system that looks best on a bigger screen. CSS3 media queries, enable site developers to create custom CSS classes that are triggered by characteristics of the browser, such as its width.

In addition to switching elements on and off, a good responsive design is fluid, and will scale as the window size is adjusted. This ensures that the same great user experience is available for users running browsers at virtually any pixel width.

Everything in a responsive design is laid out to be relative, rather than fixed. The layout grid, images, and other media components are placed at a percentage of the browser width.