Responsive Design

 

 

What is Responsive Design? 

 

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market; which would be referred to as “Adaptive Design,” a completely different process that is just simply, a big ol mess.

 

The History of Responsive Design 

 

In 2010, Web Designer Ethan Marcotte wrote an article for “A List Apart,” where he addressed the issues of adaptability in the ever-evolving need for more flexible design in a digital world.  In the article, Marcotte coined the phrase “Responsive Design” in reference to his inspiration from the concept of “Responsive Architecture.”

 

“Recently, an emergent discipline called ‘responsive architecture’ has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced ‘smart glass technology’ that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy. 

Like responsive architecture, Web design should automatically adjust. It shouldn’t require countless custom-made solutions for each new category of users.

Obviously, we can’t use motion sensors and robotics to accomplish this the way a building would. Responsive Web design requires a more abstract way of thinking. However, some ideas are already being practiced: fluid layouts, media queries and scripts that can reformat Web pages and mark-up effortlessly.”

 

But responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design.

 

The First Responsive Website

 

While Marcotte was the first to coin the phrase in 2010, another web designer named Jim Kalbach actually put the concept into practice back in 2002 when designing Audi’s new website.  He noted that –

 

“Developing fixed-size Web pages is a fundamentally flawed practice. Not only does it result in Web pages that remain at a constant size regardless of the user’s browser size, but it fails to take advantage of the medium’s flexibility.

With an increase of alternative browsing devises on the horizon, such as WebTV, public access kiosks, video gaming systems, e-Books, small handheld devices, and other nonstandard applications, the continuum of viewable browsing sizes will only expand. Never before has the demand for flexibility been greater. Solutions developed on the Web now will affect and inform future design.”

 

Although his design was more adaptive, rather than responsive, what Kalbach accomplished was simply revolutionary.

 

How Does Responsive Design Work?

 

Making your website responsive is not a simple process. It requires advanced HTML and CSS skills so if you aren’t familiar with these languages then I suggest hiring a professional web designer. To make a website responsive it must use the following techniques in unison:

Fluid Layouts

The first step to making a website responsive is to switch from fixed widths to fluid widths. This allows the web page to expand and contract with the browser since its percentage based. For example, if the width of your old website is 1024 pixels, it will now be 100 percent so it spans across the entire web page no matter the width of the browser.

Responsive Images

The second piece of responsive web design is responsive images. Making your images responsive is a very important step because it can affect both your websites speed and its search engine friendliness.

Media Queries

Along with fluid layouts and responsive images, media queries are required to have a responsive website. Media queries allow you to add device specific rules for hiding, growing, moving or showing content to allow for a better user experience. Using CSS, Media Queries allow for different user interfaces for each device.

For example, let’s say you have a button on your website but you want to hide it when the visitor is viewing on a mobile device. With a small piece of code you can do this:

/* Smartphones (portrait and landscape) ———– */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
.button {display:none}
}

 

Why you need responsive design

 

  • mobile usage is on the rise
  • shopping on mobile devices is steadily growing
  • social media increases mobile visitors
  • responsive sites improve SEO rankings
  • responsive designs adapt to multiple devices sizes
  • one site is easier to manage and increase r.o.i.
  • responsive sites provide a better user experience
  • a better bathroom experience

 

 

 

 

 

 

 

responsive design


© 2013 brookside studios | 8221-B east 61st street tulsa, oklahoma 74133 | 1 918 392 0745 | Employment Opportunities