Common Responsive Website Design Problems

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.


Sampled by © JavaScriptBank.com

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 Phong Thai is a Web Developer, Web Coder for 16 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

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB
WordPress Landing Page Conversion Essentials to Convert More
4 Development Hacks To Make Your Website Launch A Success
Why Data Recovery Software and Services are Important
Why Engineers Specializing in DevOps Are the Wave of the Future


Top view articles
Top 10 Beautiful Christmas Countdown Timers
65 Free JavaScript Photo Gallery Solutions
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
Top 10 Free Web Chat box Plug-ins and Add-ons
Top 10 Best JavaScript eBooks that Beginners should Learn
50+ Beautiful Resources of HTML Form using CSS and JavaScript
The Ultimate JavaScript Tutorial in Web Design
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com