Posts Tagged: user interface

Behave Responsively

Posted by & filed under HTML + CSS.

We are now 14 years into a new millenium with roughly 11 to 12% of the top 100,000 sites being responsive and there’s no doubt more will follow down this path. Responsive web design is not just a new trend but also a new approach towards the future of website experiences and interface in general. Being the marketing director or project manager you are, you sit there, watching these trends, viewing the sites and seeing the terms adaptive and responsive web design being tossed around. Next you wonder, what does all that mean and how can it be done effectively to benefit my company and/or clients?

Responsive Web Design vs. Adaptive Web Design

With tablets, mobile devices and various gadgets hitting the market, it’s beginning to overwhelm organizations struggling to keep up and integrate their businesses with these new technologies to address the issues encompassing user interactions and experiences. The good news is the general internet and mobile device users do not generally care how you approach the dilemma as long as they can effectively navigate and gain information from your organization on whatever device they are using at the time. There are two methods to solving the problem of bringing a website’s media up to modern device standards.

Responsive Web Design (RWD)

The phrase Responsive Web Design was coined several years ago by Ethan Marcotte and introduced in his A List Apart article, “Responsive Web Design” and later, his book, A Book Apart – Responsive Web Design. Responsive website design usually begins with the primary task of incorporating CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation. The websites structure relies on EMs, flexible images, flexible videos, and fluid type, allowing the responsive website to adapt its layout to the viewing device, user agent, and environment.

The distilled definition of a responsive web design is that it will fluidly change and respond to fit any screen or device size.

Adaptive Web Design (AWD)

The phrase Adaptive Web Design was coined by Aaron Gustafson, who wrote the book of the same title. It essentially utilizes many of the components of progressive enhancement (PE) as a way to define the set of design methods that focus on the user and not the browser. This Bauhaus approach uses a predefined set of layout sizes based on device screen size along with CSS and JavaScript in order to adapt to the detected device.

The three layers of Progressive Enhancement include:

  • Rich content layer with semantic HTML markup
  • Presentation layer with Cascading Style Sheets (CSS)
  • Client-side scripting layer of JavaScript or jQuery

The basic definition of adaptive web design is that it will change to fit a predetermined set of screen and device sizes.

So what’s the difference?

The main similarity between them is that they allow the website to be viewed in mobile devices and on various screen sizes. Where the two methods differ is in their delivery of the solution. RWD will repsond to the screens as pages load and switch between media while AWD dynamically builds the websites framework with pretermined settings versus responding to the media presented. RWD might present itself with more code with CSS, fluid grids, and a flexible foundation. AWD is the streamlined approach where all options are predetermined utilizing scripting to adapt the media to the current display.

Since the viewer really doesn’t care which one you use, bringing a successful user experience relies on choosing either a fluid or adaptable foundation for your website. After picking which road to go down, it’s up to the developers to make sure that site behaves responsively or adaptively.