Is RWD really perfect?

In this semester, I study Responsive Web Design (RWD) and I have managed to use media query to control different styles for multi-device support. However, I began to think about two questions since the first time I knew RWD.

  1. Is RWD suitable for any types of websites? (or every website should be designed responsive?)
  2. Are there any problems brought by RWD?

 

For the question “a”, I found that RWD is not suitable for any types of websites. I classify the websites into eight types (some with examples) as followings:

All of them have different characteristics. Any companies and websites have different target user needs. So I will discuss how to choose the appropriate design solution from two aspects.

Firstly, I think if we want to make them responsive from the aspect of design complication, we just need to consider the amount of information.

We can see from the examples, web portal, company/industry information websites are all portal websites and E-commerce websites that gather information together in one site. These kinds of websites have complex navigation and layout to help users to reach the information they want. The more content we should take into account, the more error will occur when we do responsive web design. This means that websites with complex structures are not easy to design.

Second, as user-friendly is the key to the success of responsive website I will discuss from the aspect of user experience. If we want to design the website to be responsive, we should redesign it for mobile users. For example, hide unnecessary design, change the display style for the navigation bar, and change the layout of the content. These changes will cause the change of users’ operation. The responsive design has no meaning for us if these changes are designed bad and bring users a negative impact. So whether the website should be made responsive, we must evaluate our team first. We must make sure whether we have ability to understand our users and know their habit accurately.

 

For the question “b”, I found many problems brought by RWD when I wrote the code for our group work.

Problem 1. Data redundancy

It is obvious that we need to write more codes than before because we should redesign the website for different devices. I found this problem when I wrote media query for iPhone5 below the media query for iPhone4. When I tested, I found that the code in media query for iPhone4 still have impact on the display of iPhone5. That means iPhone5 need to download all the code until it read the media query for itself (see Appendix). The data size of the code is not big enough to cause my attention to consider this problem. But for images, it is a big problem. When we make the website responsive, we always set the images non-viewable for mobile devices. However, the mobile devices still download the images. The traditional design (apply another css style for mobile devices) will not have this problem.

Problem 2. Testing

Opera Mobile (www.opera.com/) is a good browser for testing the code but it still cannot truly simulate a mobile phone. Because it can only read width and height in media query but cannot know the accurate devices that the media query refers to.  There is no browser supported to test the code so I must borrow many kinds of devices from my friends and then test and debug the code on them. The time I spend on the debugging may equal to the time I write another style for each device.

Solution:

There are a few online sites available on the Internet which provide facilities to check the various functionality of the sites with RWD. Designers can make use of these sites to view the appearance and other aspects of their sites. It is worth mentioning that there are a few companies available these days which help the designers to have a look at their sites on rental basis. The designers are only required to visit the outlets of these companies and avail the facilities just by paying for it. (Themes4CMS, 2013)

 

Problem 3. Code order.

I found that media query is not so smart as I imagined. In this project, I spend a lot of time on the order of media queries. At the beginning, I did not know that we should to write media query according to the order from narrow to wide width. After Amy told us this rule, it can mostly work well. But it still have little problem. I must put the media query for iPad mini below that for the new iPad or it cannot display well. I still don’t know why.

 

I also research online about the problems of RWD and find that there are more that are really worth to consider although I did not occur in my project (WebDesignShock, 2012). Responsive web design is not perfect due to two reasons I have discussed above.

 

 

References:

Theme4CMS (2013), Common Responsive Web Design Problems

www.themes4cms.com/blog/common-responsive-web-design-problems/ [Accessed on 22 April, 2013]

 

WebDesignShock (2012), 11 Reasons Why Responsive Design Isn’t That Cool! www.webdesignshock.com/responsive-design-problems/ [Accessed on 22 April, 2013]

 

 

 

 

 

 

Appendix

/*show block1 for iphone 4 and iphone 4s*/

@media only screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

#block1 {

display: block;

background-color: #f7edd4;

height: 600px; width: 100%;

margin-top: -70px; }

}

/*show block1 for iphone 5 */ /*hide the block1 because we have let it display in the media query for iphone 4 above*/

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {

#block1 { display: none; } /*important*/

}