Responsive Web Design by ContentSide

What is Responsive Design?

Responsive Web Design (RWD) is a web design approach for creating websites that provide optimal viewing, easy reading and navigation for a wide range of devices (desktop, laptop, mobile phones, tablets, ...).

What problem does Responsive Web Design address?

The spectrum of screen sizes and resolutions is growing every day, and creating a specific version of the website for each medium is not an option. This is the problem that Responsive Web Design solves.

What is Responsive Web Design technology?

Responsive Web Design is complex, it is a collection of techniques and ideas that form a whole. We detail the main techniques below.

Responsive Grids

Responsive Web Design uses a technique that is known as a fluid grid. Fluid grids are more advanced than traditional grids. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a visual is compressed on a mobile device or stretched across a large screen, all elements of the layout will be resized accordingly.

The fluid grid can be based on a number of different columns. The most popular is the 12-column grid.

source: https: twitter.github.io/bootstrap

The grid can be used as in the example below:

Webdesign illustration

Media Queries

The second part of Responsive Web design is CSS3 Media Queries. They are implemented in many modern browsers (IE9 and 10, Firefox, Chrome, Opera, Safari...). If you are not familiar with CSS3 Media Queries, they essentially collect data about the device used by the site visitor and use it to apply different CSS styles. For our purposes, we were mainly interested in the min-width and max-width media functionality, which allows us to apply specific CSS styles if the browser window is smaller than a particular width we want to specify. If we wanted to apply a certain style for mobile phone users, our Media Query might look like the following.

* Smartphone */
@media (max-width: 480px) {

  .content {
    margin: 10px;
    color: #000;
  }

  .navbar {
   background-color: #de0000;
}

  .article {
    display: block;
  }

  // etc...

}

By using a range of such media, we can work for large resolutions. The list of screen widths can be as follows:

* PC, ordinateur portable */
@media (min-width: 1200px) { ... }

* Tablette */
@media (min-width: 768px) and (max-width: 979px) { ... }

* Smartphone et Tablette */
@media (max-width: 767px) { ... }

* Smartphone */
@media (max-width: 480px) { ... }

Responsive Web Design Frameworks

Responsive Web Design CSS Frameworks contain predefined and preconfigured styles. They have a collection of tools to create a design for web-pages and web-apps. They help to develop faster and easier.

We detail the most popular frameworks below.

Twitter Bootstrap (free)

Twitter Bootstrap is the most frequently used framework for Responsive Web Design.

The framework uses the CSS - LESS preprocessor, but there is a version for SASS/SCSS.

Twitter Bootstrap exists in two versions at the moment:

  1. Bootstrap 2.3.2 - stable release
  2. Bootstrap 3 - Release Candidate

Twitter Bootstrap :

  • has a large user community
  • uses the 12-column fluid grid system
  • supports any device type, any resolution and any screen size
  • is very rich in components:
    • Drop-down menus
    • Buttons, button groups
    • Navigation
    • Breadcrumbs
    • Pagination
    • Typography
    • Labels and badges
    • Miniatures
    • Alerts
    • Progress bars
    • Media objects
    • Tabs
  • and offers an extension mechanism. Many plugins already exist:
    • Transition
    • Modal
    • Tab
    • Tooltip
    • Popover
    • Collapse
    • Carousel
    • Typehead
    • Scrollspy

Twitter Bootstrap allows you to download a custom version of the framework where you select the modules to be embedded.

ZURB Foundation (free)

ZURB Foundation is the second most popular framework for Responsive Web Design.

The framework uses the CSS - SASS/SCSS preprocessor. There is no version for LESS.

ZURB Foundation is currently available in two versions:

  1. Foundation 4 - stable release
  2. Foundation 5 - version under development

ZURB Foundation:

  • has a fairly large user community
  • uses the 12-column fluid grid system
  • supports any device type, any resolution and any screen size
  • is also very rich in components:
    • Drop-down menus
    • Buttons, button groups
    • Navigation
    • Breadcrumbs
    • Pagination
    • Typography
    • Labels and badges
    • Miniatures
    • Alerts
    • Progress bars
    • Media objects
    • Tabs
    • Panels
  • and also offers an extension mechanism where there is already:
    • Transition
    • Modal
    • Tab
    • Tooltip
    • Popover
    • Collapse
    • Carousel
    • Typehead
    • Scrollspy - Magellan
    • Tour - Joyride

Zurb Foundation allows you to download a custom version of the framework where you select the modules to be embedded.

External links :

For further information, we recommend the following resources

"Responsive Webdesign - present and future of mobile adaptation

https://www.alsacreations.com/article/lire/1559-responsive-web-design-present-futur-adaptation-mobile.html

"The Ultimate Responsive Web Design Beginners Resource List

https://www.targetlocal.co.uk/responsive-web-design-resources/

"Make the mobile web better: Don't make these 4 responsive-design mistakes".

https://venturebeat.com/2013/04/01/make-the-mobile-web-better-by-not-making-these-4-responsive-design-mistakes/

"CSS3 Media Queries

https://www.alsacreations.com/article/lire/930-css3-media-queries.html

"Logic in media queries

https://css-tricks.com/logic-in-media-queries/

"Responsive Web Design community on Google+ "

https://plus.google.com/u/0/communities/108447980678861671911

"Comparison of Responsive CSS Frameworks

https://responsive.vermilion.com/compare.php

Mathieu PALONEK

Are you interested in this topic?

CONTACT US