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*/

}

 

March 4th

No one is absent!

Discuss our thought of first submission mark and the coming submission.

  • We should figure out a creative way in presentation.
  • Actual work is the most important  for the marks.
  • Documentation like photos and videos, as Matin introduced in the second DMSP lecture, should be recorded.
Jacky came up with an new idea.
1\set 6 points in or around Alison house.
2\one person at every point holding an device
3\users use the information on the devices to find out the next one
4\the person who first finish the whole game, he/she win.
For Wednesday.
We need to figure out what content in our website and the way to present it.

 

Design for touching

Design for touching

As Aaron Gustafson described in his book that thinking of the user not the browser is what the term “progressive enhancement” is about, we also need to consider how to show our care about our users. For the current users, the approaches of accessing to the website are various: laptops, tablets with different screen sizes, touching mobile phones, etc. And as forecasted, the mobile devices are becoming the largest share in following years. Jake Rocheleau, field in web designer, believed that mobile users aren’t on keypad phones like BlackBerrys anymore. (www.hongkiat.com/blog/responsive-for-mobile-screens/) The reason we need to consider interaction design in the mobile devices twice is mainly because the differences between the ordinary interface design of web and the design of mobile devices.

 

Web

Mobile

Outputs

Relies on browsers

Relatively smaller screen

Inputs

Mouse and keyboards

Fingers and thumbs

Style

Limited by the browser and network performance

Limited by hardware and operation platform

Application Scene

Home, office, café, and other indoor space

Indoor, outdoor, in cars, horizontal or portrait screen

What are the users’ needs?

Understanding users is the foundational step, whether for mobile users or laptop users, when we do web design.

The most common needs of mobile users can be concluded into two points.

1)    They want to get more information in the narrow screen.

Mobile devices can provide service any time and place; however, users still cannot loss quantity of information. At the same time, the relationship between every block in the mobile devices may not so clear or obvious as that in laptop screens. So the problem about limited screen should be solved in design.

2)    Easy to use.

Users always hold their phones on one hand to control the screen and a thumb have limited range and flexibility. The hot zone of the screen is at the bottom of it on the side opposite the thumb. And other area is not easily to reach.

Fingers are bigger than mouse. If controls like drop-down list, link button are not resized in mobile devices, fingers cannot hit them accurately.

 

How to improve the design to meet users’ needs and satisfy them?

1)    Create “infinite” space in the limited space.

a)     Show different status in a same area.

b)    Show different tips or functions in a same area.

c)     Hide web decoration outside the central stage.

Many website are designed as full-screen page to cater to the wider screens nowadays. Some websites still use the central stage as the important area and decorate the area on either hand. When the width of devices is becoming smaller, the first thing is to reduce the decoration on both sides.

EXAMPLE

www.designweekportland.com/ & www.thesearethings.com/

d)    Hide additional functions.

e)     Rearrange horizontal menu.

If the horizontal menu (or global navigation) is arranged fully in a whole line of the full site, it should be rearranged when the width of the screen is less than 960px. The general solution is to put them into a drop-down box floating on the top layer.

EXAMPLE Time.com & www.macdonaldhotels.co.uk/

f)     Consider common visual stream

Visual stream means the eye tracking when users scanning a web page. Generally, it is from top to bottom and from left to right. This is the famous visual mode, “F” mode, defined by Jakob Nielsen. So the information should be arranged from top to bottom according to their importance.

(Jakob Nielsen’s finding)

2)    Design operation area.

The easy thing we can do for the controls is to enlarge them. We can enlarge the textbox, button, tabs and almost every things need touching. However, we can use some techniques to do these things in some case.

First is “page break”. We always use “1” “2” “3” “4” as a link button for users to click. When it comes to mobile devices, I think “last page” and “next page” are easy to touch. We can also design a gesture like swipe for flipping over.

EXAMPLE:

(The second is relatively larger for touching)

In mobile devices, we always put items in dropdown box. Or we find it is inconvenience to touch calendar control in the web page. Here, we can make full use of selector inside mobile devices.

3)    Guide users through visual design.

(reference: webstyleguide.com/wsg3/7-page-design/3-visual-design.html)

Create a clear visual hierarchy of contrast, so you can see at a glance what is important and what is peripheral.

Define functional regions of the page.

Group page elements that are related, so that you can see structure in the content.

Use nth-of-type to design column

I’ve learnt using nth-of-type to design column and I’ve put my web page on playground under my folder
The web page looks like:
_________________________________________________________________________
I firstly analyzed the code of a typical example of responsive web design:
The main points of this example are
  • using Media Query module
  • do not use absolute width
  • using relative font-size
  • using fluid grid
  • using fluid image
_________________________________________________________________________
Here is the link of tutorial:
 http://webdesignerwall.com/tutorials/responsive-column-layouts
The nth-of-type means targeting every “nth” .col element, stating from the first column.
  • .grid4 .col:nth-of-type(4n+1) target every 4th .col element, starting from the first
  • .grid3 .col:nth-of-type(3n+1) target every 3rd .col element, starting from the first
  • .grid2 .col:nth-of-type(2n+1) target every 2th .col element, starting from the first

We need set the stylesheet for them and then consider how to change from 4-column layout to 3-column and how to change 4-column layout and 3-column layout to 2-column layout when the width of the web page changes. The code in the tutorial helps us solve this  problem. And the website of this tutorial is also responsive. ^_^

_________________________________________________________________________

Useful links about grids system in responsive web design:

www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/

responsive.gs/