Responsive website design has been around for over 2 years now and although major search engines now prefer such sites because of the associated advantages, we still have various problems that appear and that are sometimes difficult to solve.

• Demo
• Enlarge
• Reload
• New window

Based on discussions with different designers, we can now say that the following are the common problems that appear with this form of mobile website and they have to be addressed first.

No Static Design Phase

In order to take advantage of all that responsive design has to offer, you need to adopt a brand new design process. You do not create a static screenshot now and you rely on wireframing, CSS prototypes, quick sketches and similar design ideas.

Most designers prefer sketching and HTML work early, in order to then move towards Photoshop or Fireworks to create the assets instead of the full layout. With larger projects, wireframes should be as avoided as possible with a focus put on wireframe widgets or paper sketches.

Navigation Problems

The old design approach had navigation design as a horizontal feature, normally on a page’s top area. Nowadays, the approach should be more considered. Navigation choice strategy is a decision that is wide reaching. It has to be based on the information architecture, various design considerations and the content of the site. Make sure that you will test the navigation system on various different devices. You never know if something works everywhere if you do not try it everywhere.

Image Related Problems

In a similar way to navigation, using images in responsive website design is quite fragmented. There is no specification that is offered by W3C and this means that choosing how to implement images is normally a personal choice. There are many scripts that can help and that can be tested.

We definitely do not have an official solution that is offered for responsive images but we do have access to various options that would offer tremendous results without much code workaround. Everything should revolve around using differing pixel density display, devices and adaptive images.

Table Problems

Data tables can be problematic. This is especially true when they have to include complex information or many columns and rows. The difficulty relies in adding all the data on a small screen mobile device. Unfortunately, this is a problem that is quite hard to solve at the moment.

We should add that a common solution is to hide the data that is not too important. It is something that you should not actually consider due to various different reasons.

Converting Fixed Width Sites To Responsive Sites

This is definitely a huge issue that many think should not even exist as updating the old code is much less effective than simply creating new code. However, some clients do not take this into account. The solution to this problem is to use a template and stylesheet Greenfield rebuild. Alternatively reverse engineering can be done but it is preferred only when there is no other choice. Content structure differences can still appear.

Author

Phong Thai is a Web Developer, Web Coder for 20 years with PHP, JavaScript, CSS. He is the creator of JavaScriptBank.com - provide thousands of free JavaScript code examples, web development tips and tricks, helpful blogging guides.

Follow him on twitter@js_bank or connect with him on facebook@jsbank if you want. His websites for your knowledge: javascriptON.com, inOneSec.com, www.gomymobi.com

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New