Responsive Web Design Infographic

| August 16, 2012 | Reply created an amazing, interactive info-graphic that explains in detail what responsive web design is all about. Continue to read the rest of this post as I go over each point of this new way to design websites.

The Difference 

The difference between adaptive and responsive design is that adaptive has multiple fixed width layouts, where responsive has multiple fluid grid layouts. The initial concept behind responsive design was based on responsive architecture, in which rooms and spaces have the capacity to adjust automatically to the number and flow of people within it.


Responsive Web Design

Responsive we design is an approach that suggests that website design should respond to the user’s behavior and environment based on screen size, platform and orientation.

“Responsive design allows you to fill in the blanks within devices classes through the application of fluid grids, flexible images, and (where possible) media queries.”
  –Luke Wroblewski

Fluid Grids

Fluid grids refer to fluid designs where the grid units resize according to screen size. It is about defining your own parameters for various objects in code like columns, spacing and containers. Size and spacing are the two main components to focus on in creating your flexible grid system. Whether you’re using a premade grid system or creating a custom solution, use percentages (or ems) rather than pixels as your units of measurement.

Flexible Images

Flexible images move and scale with the flexible grid. This means scaling down according to the HTML attributes of height and width for more text content on smaller devices. The other way to scale images is cropping them with the help of CSS overflow property. The containers around images will shift to fit new display environments. One more way is loading different image versions to a server and displaying the proper size version dynamically depending on the used device.

CSS Media Queries

Media queries allow designers to build multiple layouts using the same HTML documents by selectively serving stylesheets based on the user agent’s features, such as the browser window’s size, orientation, screen resolution, color. They act as conditional comments that are able to indicate the used device and serve up different code for different device attributes, in other words target different screen resolutions with different styles.

Screen Resolutions

Common resolutions include the 320px portrait width and 480px landscape width of smartphones, 768px portrait width and 1024px landscape width of tablets (and typical netbook resolutions) as well as various desktop monitor resolutions. A layout that only caters for preset resolutions is often referred to as being adaptive, whereas a truly responsive layout will be built using ems or percentages, allowing an infinite level of scaling.

Google Recommends

With the new Panda update, Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.

The advantages of using a responsive web design is iy keeps your desktop and mobile content on a single URL, which is easier for your users to interact with, share, and link to and for Google’s algorithms to assign the indexing properties to your content. Google can also discover your content more efficiently as we wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content.

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”
    –Jeffrey Veen 



  • more Responsive Web Design Infographic

    Related posts:

    Responsive Web Design Infographic
    Responsive Web Design Infographic

    Tags: , , , , , , , , , , , , , , , , ,

    Category: Responsive Website Design Trends

    About the Author ()

    Sara is a Kent State University alumna with a degree in public relations.

    Leave a Reply