Wednesday, April 9, 2014

Fixed, Fluid, Adaptive, and Responsive Website Designs

It's quit often to see these names while developing websites. However, I had no chance to learn deep into these things until today. In my own understanding, these names are mainly focus on the "dynamic width" problem all developers may face while designing the layout.

Background

Website width varies from 800px on small mobile devices to 2560px on expensive Macbook Pro Retina. To have the best user experience, most of the time we should test the website on different devices (screen sizes), and make sure the everything is working well (at least it's under the designer's control).

First, it's always a good idea to start the design on the size that most people are using. We can check the "Screen Resolution Statistics" on w3schools.com here: http://www.w3schools.com/browsers/browsers_display.asp

Second, we should test the website on different widths. The simplest way is to adjust the width of your browser, like:

Original width:


Decreased width:


Remember that it's okay to let the user scroll up and down (the height of the website is larger then the screen size), but it's a pretty BAD idea to let the user scroll left and right since most of the mouse doesn't have that kind of control button or trackball.

Design Solutions

I can still recall the days in elementary school, my teacher asked me to put "screen resolution of 1024x768 pixels" at the bottom of the website. I think that's because
  • we are not having good CSS/Javascript at that time to solve the dynamic width problems, 
  • users' devices are mostly having the same resolution (1024x768 pixels), 
  • and it's easier.
Now I learned that this kind of website design is called "fixed-width", it's kind of old fashion but classic. And, here, I am listing out all the comman design solutions:

Fixed

"a set width and resizing the browser or viewing it on different devices won’t affect on the way the website looks." -- teamtreehouse
This is the kind of design I just mentioned, and it's widely used for the traditional websites. Here are some examples:


- Pro: The layout is totally under controlled since the designer doesn't have to care about the screen resolution, but only cares about the selected and fixed width instead.
- Con: It may be hard to read on different size of screens, users have to scroll left and right if the website width is larger than the screen width.

Fluid

"built using percentages for widths. As a result, columns are relative to one another and the browser allowing it to scale up and down fluidly." -- teamtreehouse
The main point of fluid is that the columns are assigned specific "percentages" of the whole width, which means the columns are having fixed proportions no matter what the screen width is.



- Pro: The website remains almost same designs on different sizes of screens, which is corresponding to the fixed proportions.
- Con: Designs will be destroyed if the screen width is too small. For example, 20% of a 800px mobile screen is 160px, which may not be large enough for displaying the original content. Therefore, it may be a good idea to set the minimum website width (apply "min-width" in CSS).

Adaptive

"introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile." -- teamtreehouse
Adaptive website designs offer serval layouts based on different types of devices, such as smaller monitors, tablets, and mobiles. Just for example (may not be true in real world practice), they may apply "original layout template" for width over 1024px, "tablets layout template" for width between 600px and 1024px, and "mobile layout template" for width less than 600px. Really good explanation I found is in this website.

* Some people think adaptive designs are as same as responsive designs (which will describe later). I think they are similar and with slight differences.

Original:

Smaller Screen:

Mobile:


- Pro: This works pretty fine on most of screens, it's offering different layout templates based on it's type (traditional monitor, tablet, mobile, etc).
- Con: Instead of designing "one" layout, the designer should bring out "several" layouts to reach this purpose.

Responsive

"built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device." -- teamtreehouse
It's pretty the same as the adaptive design, but it applies the "fluid" design on different templates which are targeting to different types of devices. And, I believe this design offers the best user experience since the designer has to care about every layout for any size of the screen.





- Pro: I think this is the best design for the websites, it cares every layout possibilities for users on any devices.
- Con: It may cost a lots to reach this design, and the code could be complex. More tests should be held to make sure there's no bug.


Note

  • Lots of websites are not supporting mobiles in the same page, but offer any other version instead. It detects the devices you are using, and redirect you to the mobile version one if you're on a mobile device. Example is here: http://facebook.com/ and http://m.facebook.com/
  • To detect the screen width (viewport width), we should apply "CSS Media Queries".


Sum


I draw the graph as the summary of this post, and please tell me if there's any mistake in the graph. Also, I believe that these designs are just "principles", which means that we don't have to fix to any of them, but wisely use them in different situations.


Reference

* thanks Shumin for raising this topic
Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)