Top 5 Problems with Responsive Web Design

 
added by Jibari Daniels on
Jul 17, 2014
 
1 likes
 4 comments
 
 

With the implementation of CSS3 in late 2012, The creation of responsive design hit the scene and made it easier for designers to develop for mobile based sites. Despite the creation of this useful design technique, developers are still confronted with ever changing responsive design problems. In this article I will explain the Top 5 Problems with Responsive Web Design and offer solutions to fix these problems.

Responsive web design has a variety of inherent flexibility. By using fluid grids, images and CSS Media Queries your website will adapt depending on what device you are viewing the website on. Basically, you do not have to create a mobile version of your website or have to create an application for every popular device on earth. Just one and it will adapt to everything.

These are the Top 5 Problems with Responsive Web Design

01) Using Images with Responsive Design

The use of images in Responsive Design has been a major issue for a while now. This issue became more of a problem with the arrival of high-density retina display screens, hence causing website images to have Size and Performance issues.

2 solutions to fix the issue of Responsive Design Images

  1. Change the markup of embedded images on your HTML document by adding this code:
    <picture width="500"  height="500">
      <source  media="(min-width: 45em)" src="large.jpg">
      <source  media="(min-width: 18em)" src="med.jpg">
      <source  src="small.jpg">
      <img  src="small.jpg" alt="">
      <p>Accessible  text</p>
    </picture>
    
  2. Use Responsive Image markup called The Srcset Attribute a example of the attribute is shown below:
    <img  alt="The Breakfast Combo"
      src="banner.jpeg"
      srcset="banner-HD.jpeg  2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">
    
    

02) No more static html

Working with responsive design allows us to use fluid grids made of floats and inline blocks. This concept may become a problem for some web designers since the concept of static html design  becomes obsolete with responsive design. This is particularly significant on websites created with a CMS; since the designer can’t change the HTML of every page and every version of the website.

Responsive Layout Solutions

  1. Use the CSS3 flexible box layout model (or “flexbox”). This solution allows users to easily reorder elements on the screen, without touching the HTML. You can also change the box orientation and box flow plus distribute space and align according to the context. Below is an example of a layout that could be rearranged for mobile. The syntax would look like this:
    .parent {
      display: flex;
      flex-flow: column; /* display items in columns */
    }
    .children {
      order: 1; /* change order of elements */
    }
    
    
  2. The second solution for responsive design today is the CSS3 multiple-column layout. The main benefit of this model is that content can flow from one column to another, providing a huge gain in flexibility. In terms of responsiveness, the number of columns can be changed according to the viewpoints size.
    .container {
      column-width: 10em ; /* Browser will create 10em columns. Number of columns would depend on available space. */
    }
    
    .container {
      columns: 5; /* Browser will create 5 columns. Column size depends on available space. */
      column-gap: 2em;
    }
    
  3. The last solution is CSS3 grid layout. This gives designers and developers a flexible grid that they can work with to create different layouts. The syntax looks like this:
     .parent {
       display: grid; /* declare a grid */
       grid-definition-columns: 1stgridsize  2ndgridsize …;
       grid-definition-rows: 1strowsize  2ndrowsize …;
    }
    
    .element {
       grid-column: 1;
       grid-row: 1
    }
    
    .element2 {
       grid-column: 1;
       grid-row: 3;
    }
    
    

03) Navigation issues

Responsive design causes a variety of issues when creating the navigation. In the past, navigation on sites tended to be horizontal along the top of the page, or sometimes down the left of a page. When developing for responsive website this concept changes since the navigation will adjust depending on the device.

The Navigation Issue Solution

Develop your navigation on the content and information that your website will display. Stay away from third party javascript applications, and study similar websites.

04) No More Tables

With each passing year, tables become more obsolete. When developing for Responsive websites, tables, especially those containing a variety of information, can wind up looking disoriented. Tables and responsive design remains a challenge. However, some steps are being taken.

The Table Issue Solution

Use more Div’s and less Tables, if you can develop your concept with a div rather then a table, take the div route. I have seen a couple of solutions where hiding “less important data” is suggested. While I appreciate the experimental nature of the tables, I would personally recommend against the practice of hiding content from users depending on their viewing device.

A couple of responsive table options are:

05) IE and Backward Compatibility Issues

One of the biggest problems with responsive design is how to update code on a old fixed-width website. Another is backward compatibility, meaning developing responsive websites for old versions of Internet Explorer. The problems with IE are well-documented and while you probably wish it would just go away–especially the older versions–it’s here to stay.

The Internet Explorer and Backward Compatibility Solution

I offer two solutions for IE and Backward Compatibility issues:

  1. Typically, older fixed-size websites didn’t need to use mobile-first design. While it’s possible to reverse engineer code to make it responsive, on bigger sites it’s almost certainly going to be easier (and actually quicker) to rebuild than to work backwards.
  2. Phase out support for older versions, or you can develop a conditional IE style sheet.

Top 5 Problems with Responsive Web Design Sum Up:

The development for Responsive Design is here to stay, The problems and solutions stated above are to help you out when developing responsive websites. Remember responsive design won’t fix your content problem. it is just a solution of mobile compatibility on a website.

Written by Jibari Daniels

4 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>