google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank
Guest, register






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.


Label: responsive website design, search engines

Free iPage Web Hosting for First Year NOW



If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
Try iPage for FREE First Year NOW

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 15 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

JavaScript by day


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web