Responsive Website Development Common Mistakes to Avoid

I love to shareShare on FacebookShare on LinkedInShare on Google+Tweet about this on TwitterEmail this to someonePrint this page

Creating a Responsive Website is a big challenge for a web site designer. Some of the Responsive Websites do not get a good feedback because of mistakes in their HTML code, which may be with respect to slow loading speed on smartphones, the too small appearance of icons and various other similar issues.

A responsive website is a must for any online property. It doesn’t matter what kind of website you have or just a blog. Everything needs to be fit and accessible on all popular devices.

Naturally there is more of an investment required to design and develop a responsive website over a traditional desktop website, however, consider the audience and potential gained by reaching more and more users, everywhere, anytime.

The cost of creating a responsive website is also significantly less than creating dedicated desktop, tablet and mobile versions of the same website. Not to mention, it’s much easier to manage from a single backend CMS like WordPress, Drupal etc.

In this article we look at several Responsive Website Development common mistakes to avoid. Doing so will help you build a better responsive website

  1. Desktop first – Not starting with mobile:
    This is a very common mistake that an HTML Developer make when tackling a responsive web design project. It’s a challenge to get over the hump of thinking desktop-first when that’s what we’ve known for so long and we’ve found it to be an even bigger challenge for our clients to look at a mobile website first and envision how it would translate to a more robust desktop experience.

    The reason we’ve trained ourselves to think mobile-first is that working from the smaller screen and scaling up to the largest screen allows us to foresee any issues that may creep up with critical parts of the user experience. By working with a mobile-first mentality we are able to address these issues on the smaller screen first and create a better mobile experience that is much easier to scale up, than creating a desktop experience and scaling it down.

  2. Navigation Options:
    One of the most challenging aspects of creating a responsive website design is creating a navigational system that is not only for a desktop version of the website but it should be work of all other devices like: smartphones, tablets, iPhones etc. Many designers struggle with this aspect of responsive design as it can be challenging to change our way finding strategy at each level of the project.

    To avoid navigation issues we’ve found that using a mobile-first workflow allows us to think about the menu system in its most basic form before scaling up to suit the larger devices. It may feel uncomfortable at the beginning, but creating a unique navigation system for mobile devices, tablets and desktop environments that is specific to the familiar experience on that particular device is commonplace and offers the user the best and most efficient experience on the website.

  3. Ignoring the Mobile Experience:
    when creating a responsive website design and development with a mobile-first approach this should never be an issue. Where this issue often arises is when designers take a desktop-first approach and find themselves backed into a corner with the mobile version of the website.

    Desktop layouts and content cannot simply be compressed into the viewport of a mobile device. With this approach you risk overwhelming, confusing or frustrating users and you are ultimately left with a website offering a poor user experience that fails to convert users into customers. By taking a mobile-first approach, a designer is able to address the mobile user experience first and scale design, layout and content up for the larger tablet and desktop versions.

  4. Overlooking the Touchscreen Experience:
    Most handheld devices in use today make use of touchscreen technology. We are now seeing manufacturers incorporate this technology into laptops as well. With the growing number of website visitors using their fingers to navigate websites it is ever more critical to design for the touchscreen experience. If a visitor has to zoom in to press on buttons or navigational elements user frustration will quickly result in users landing on a competitor’s website.

    As a general rule for touch navigation we do not scale below 40 pixels by 40 pixels as we’ve found this to be the minimum size users can comfortably press without error.Icon sizes should be 44×44 pixels (these are the Apple specifications). The only problem is that these specifications are not consistent with different manufacturers. As an example, Nokia recommends an icon size of no smaller than 28×28 pixels and the design guide the Microsoft Windows phone recommends “a touch target size of 34px with a minimum touch target size of 26px.” Later in the same article, it was found that the ideal size of the human fingertip ranges from 45-57 pixels. It’s easy to see how this can cause confusion for designers and potentially create havoc for the end user.

  5. Ignoring Page Speed:
    There are many free page speed tools available online such as the Google Page Speed Analyzer and Pingdom Website Speed Test for designers and developers to test the performance of their website projects on desktop and mobile bandwidths. We aim for a minimum score of 80/100 to ensure websites are performing at a reasonable speed. In order to offer the best page speed score possible, designers and developers can employ several techniques to reduce load time, including:

    • Optimizing graphics and media – in addition to optimizing graphics in Photoshop designers and developers may use plugins or services to further compress graphics without any problematic loss in quality.
    • Using clean and organized code – ensuring website code is neat and tidy without bits of unused code floating around will reduce the work the browser has to do to load the website and allow for better page speed performance. Designers and developers can make use of the W3C Validator to help flag any issues in the website code.
  6. Hiding Content:
    Hiding content affects the SEO performance of a website as browsers can catch on that content is missing from the various versions of the website. Looking at a mobile site with less content gives the impression to search engines that the information offered is less in-depth and of less value resulting in lower SERP performance.
  7. One Size Fits All:
    This primarily refers to images, where a designer uses one image for all platforms. This is a huge mistake for several reasons. An incorrect image size will affect loading times, and if the image is designed for the desktop, the loading times will be quite noticeable on mobile devices. There will also be scaling issues, which could affect the quality. As an example, if your images are built for mobile devices but not for the tablet or desktop, the images could “fall apart” (become pixelated) due to scaling issues.
  8. Lack of Clarity:
    This affects all platforms. Since many layouts contain a lot of information, designers might build an interface where all the elements need to stand out. The result will be competing visual elements and confusion. In order to have clarity, the design must be clean, free of distractions (such as unnecessary animations), with text that is easy to read. If it’s important for certain elements to stand out, create additional pages, if necessary.
  9. Not using relative units:
    Gone are the days of using pixels as measurement units for the web. Instead we have to use em or %. If we use px then we are telling the browser to limit the size to a specific amount independent of screen sizes. This is not going to look responsive, so we should use em, which will behave depending on screen sizes. For example, if we want to make the font-size of a heading double the size of font-size of the body of the text, we can give font-size:2em to the heading as em works relative to the parent element.

    Similarly, when we are creating a fluid layout we have to give the width of columns in % so that it will adjust according to the screen size.

WebX Design Studio
Follow me

WebX Design Studio

Creative Designer at WebX Design Studio
I am a freelance creative designer. I have 8+ years of experience in Logo Design, Web Design and Development...
WebX Design Studio
Follow me

Latest posts by WebX Design Studio (see all)

I love to shareShare on FacebookShare on LinkedInShare on Google+Tweet about this on TwitterEmail this to someonePrint this page

You may also like

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter message.