How Responsive Web Design Works — Presentation

How Responsive Web Design Works — Presentation

If you already know the name of Ethan Marcotte and the term “responsive design”, you have chosen the right direction. If not — this direction is a fortiori necessary for you. Let’s take a look on the brief history of the responsive design.

The origins of responsive web design

Once upon a time there coded a guy named Ethan Marcotte. He already knew what fixed-width design and mobile revolution were, but he was not completely satisfied with these terms, and as many other mobile users he hated the problems with website performance on different screens.

‘This cannot last forever’ — decided Ethan one morning and started to write an article.

The article was titled “A list apart” and saw the light of day in May 2010. It contained previously unknown term “responsive design” that gave Ethan an opportunity to become a godfather of a new wave in web development. The main idea was to adopt websites to different screens.

However, persistent guy Ethan Marcotte did not stop on that and even wrote a book published one year after — in 2011. The work “Responsive Web Design (Brief Books for People Who Make Websites)” became a guideline to the developers who followed Ethan’s principles.

What was the book "Responsive Web Design" by Ethan Marcotte about?

The core of the responsive design is that you have one website with one URL and content that is resized and reorganized according to different screens.

This works due to three main components: flexible layouts, media queries and flexible media.

Flexible layouts are mainly grids — websites designed as different cards, so they can be simply modified by size and sequence according to different devices.

Media Queries is a way to adopt items by height and width, resolution and so on. In particular, there are typical screen resolutions: 1920 px, 768 and 460, so website page operates in fours or three variants and performs differently according to a type of device.

Flexible media is an option of modifying a size not within a template but automatically expand or constrict an image or video — just check moving a website window with your mouse.

Responsive design is about layout that may be the first stage of developing a website, but usually follows the design. Developers create responsive pages and code them. Therefore, Ethan’s novelty was approved by developers all over the world, and while his name is not a legend, responsive design is a dogma nowadays.

Why does your website need a responsive design?

51% Americans access internet via mobile devices, comparing to 42% who use desktop computer.

25% use only mobile devices for internet.

69% of tablet owners shop via tablets every month.

So let’s give Ethan an opportunity to continue mastering design and public speaking (as far as he is also experienced trainer) and try to become more skilled in responsive design. Immediately now thousands of developers worldwide code responsive websites, and you might be among them either.

Embed the presentation code:

<iframe src="" width="100%"></iframe> <p>Source: <a href="//"></a></p>
9 votes, Rating: 4.9

Read also


Being a design geek doesn’t mean stuffing your website user interface with all kinds of tricks and gimmicks. A good UI design...


Fast changing technologies do not leave a chance to web development services which have lived out their lives. Large images, responsive...


Drupal web development is at its peak so you can get a cutting-edge website by hiring a great...


Drupal is a popular open-source platform loved by many designers. However, there are a few golden rules to follow when designing anything for Drupal sites in order to ensure developers have an...


Nowadays services which provide out-of-box html-themes gain popularity. The question is whether it is that easy to use them as a basis for...

Need a quote? Let's discuss the project

Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

Join the people who have already subscribed!

Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

No charge. Unsubscribe anytime