Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Explore the Evolution of Responsive Web Design

Explore the evolution of responsive Web design and how it became the dominant paradigm to design sites and applications.


advertisement

In this article, we will explore the evolution of responsive Web design and how it became the dominant paradigm to design websites and Web applications. I'll explain what responsive design actually is, discuss the rise of mobile and the dreaded matrix, then explore the rise of responsive design itself and touch on Bootstrap support.

The Rise of Mobile

For many years Web development meant developing for a personal computer medium. Laptops came along, but their display capabilities were pretty similar to desktop computers, so the same Web designs worked for both. But, over the last few years there was a big change. Mobile phones became ubiquitous, the Web evolved and became much more entwined in the day-to-day lives of most people. Many of these people wanted to access the Web on their phones. They want to buy shoes online, order pizza, make a reservation in a restaurant, check the weather and watch cats playing the piano. Many websites and Web applications designed for desktop/lap computers were either totally unusable or so annoying on phones that people just didn't use them. That change came very quickly and companies paid attention.

The Matrix

Even before people used their phones to browse, the Web front-end developers had to deal with multiple targets being different browsers. IE6 in particular was the bane of front-end developers for years due to its prevalence and lack of standard support. When you add a large number of mobile devices with unknown form factors, you end up in a difficult spot as far as testing and quality assurance. Sometimes even more browsers were added because some devices shipped with custom mobile browsers, such as Opera, that weren't very common on desktop and laptops.

What Is Responsive Web Design?

Responsive Web design is the practice of developing Web pages that look great on multiple devices with different form factors. Think about a desktop computer, a laptop, a tablet, a mobile phone, a smart watch and even full screen TV. People browse the Web on all these devices. It turns out that a single rigid design doesn't fit all of them. Even if you use relative units and flexible grids. The key to responsive Web design is to detect the properties of the device, such as width, height, landscape/portrait mode and resolution. The developers then create multiple designs that looks great for multiple points in this multi-dimensional space.



The important principle here is that you detect the properties of the device and NOT the device itself. There are too many devices for you to chase, but all these devices belong to a space that you can cover adequately with a relatively small number of designs. The design itself is typically consists of style sheets.

Here is an example of a responsive Web design:

<code>
<link rel="stylesheet" type="text/css"
  media="screen and (min-device-width: 480px)"
  href="small.css" />
<link rel="stylesheet" type="text/css"
  media="screen and (min-device-width: 760px)"
  href="medium.css" />
<link rel="stylesheet" type="text/css"
  media="screen and (min-device-width: 960px)"
  href="big.css" />
</code>

A different CSS style sheet will be selected on the fly depending on the browsing device's screen width.

The Rise of Responsive Web Design

In 2010 Ethan Marcotte published an article called "Responsive Web Design" that started the ball rolling. All the elements of responsive Web design were clearly explained:

  • Fluid grids
  • Flexible images
  • Media queries

Over the following years, the concept sank in and more and more Web designers and developers subscribed to it. Initially, many companies had a regular website and a separate mobile site. But, those are not as common anymore and most companies switched a single responsive website.

Bootstrap and Mobile First

Twitter's Bootstrap is arguably the most popular Web framework (HTML, CSS, JavaScript). Bootstrap has supported responsive Web design for a long time, but beginning with version 3, it introduced the concept of mobile first, which puts responsive Web design front and center. It is a testament for the importance of this paradigm.

Conclusion

Responsive Web design has been around for a while and it's not going anywhere. If you a Web designer or a Web developer you should understand and follow it in order to design great websites and Web applications that looks great and are accessible.



   
Gigi Sayfan is the chief platform architect of VRVIU, a start-up developing cutting-edge hardware + software technology in the virtual reality space. Gigi has been developing software professionally for 21 years in domains as diverse as instant messaging, morphing, chip fabrication process control, embedded multi-media application for game consoles, brain-inspired machine learning, custom browser development, web services for 3D distributed game platform, IoT/sensors and most recently virtual reality. He has written production code every day in many programming languages such as C, C++, C#, Python, Java, Delphi, Javascript and even Cobol and PowerBuilder for operating systems such as Windows (3.11 through 7), Linux, Mac OSX, Lynx (embedded) and Sony Playstation. His technical expertise includes databases, low-level networking, distributed systems, unorthodox user interfaces and general software development life cycle.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date