5 Essential Points You Should Know About Responsive Web Design

Over the past couple of years we have witnessed a revolution in web design: the text-heavy versions of the websites are undergoing significant changes to accommodate their mobile counterparts. However, in an attempt to make sites work faster and more efficiently on mobiles, the primary function in web design – the elements that were representative for the brand of the company – is most of the times lost.

In addition to the web design elements that more often than not associated with the brand identity, many mobile sites do not incorporate call-to-actions and advertising. Not to mention the fact that most web designers ignore the fact that the vast majority of desktops and laptops are wider than 1024 pixels and are still building websites at 960 pixels.

Perhaps some web designers have not understood what responsive design stands for yet. This is why we’ve decided to create a list of the web design elements you should not lose track of during this process.

Doing mobile websites first is not a rule

The main reason why large developers prefer starting with the mobile websites first consists of the fact that they have the time and money on their side. However, this is not a rule that you should stick to and there is a simpler way, Kevin Mckenzie explains.

Essentially, the main site can be split up into various blocks or nuggets, which allows the designer to change their position according to the width of the browser. Since the blocks have an approximate fixed size, an idea is to incorporate them in a grid, which can be filled with blocks and non-blocks of information.

This approach will ensure you have the principal branding elements with as little information as possible and it is cheaper and faster than a complete site redesign. We would like to point out that scaling should also include text, images, ads and headlines in a way that does not affect the integrity of the site.

From our perspective, solving the navigation issue can be achieved by assigning its layout according to the width of the browser. Since users like consistent designs, you should keep it simple: when displayed on a mobile, keep the main menu top and centered, while shown on computers you can place it below the logo in the top right corner.

User-friendly elements for desktop websites are not necessary good on mobile sites

Nowadays, a good interface should be judged according to the device it is designed for. Simply put, what generally works for desktop sites does not always work for mobile devices and tablets. Here are 2 self-explanatory examples in this regards:

Hovers

The main problem with content visible through hovering is that it does not work for touchscreen devices. Nonetheless, you can modify the code when you really need to use hovers in the design if you are using JavaScript and add a tap event.

Lightboxes

Lightboxes are highly appreciated in desktop web design because they allow you to display small amounts of information without having to load an entire page for it. However, the problem with lightboxes and mobile devices is that the latter do not include options that allow you to set their positions. The solution in this case is to load a new page or tab for the lightboxes.

Fixing Internet Explorer

One way to realize the complexity of mobile website development is to think about the difficulty of integrating older IE versions into the new technology. The issue with this comes from the fact that older IE versions ignore queries, which can constitute a real problem if your site depends on them. There are essentially 3 solutions for this:

  • JavaScripts polyfills
  • A completely separate IE style sheet
  • Creating a separate CSS file for each device

Calls to action

It is important to note that the call to action is a mandatory element in the responsive design and hence, it should be displayed in a clear and visible area, irrespective of the browser or device.

The eternal problem with white space and padding

Because white space and padding are highly efficient ways of organizing and setting the hierarchy of the information on the site, we consider it an element that should not miss from mobile web design. Just think about how useful it would be to make sure the site does not seem too crowded or misaligned.

Discussion

  • http://www.xakbox.com xakbox

    we use fluid grid 1 kb to create responsive designs. that really helpful..

  • Jaswant Kurmi

    hey, good article…. intresting and informative blog…

    • http://www.cssreflex.com/ Naeem Nur

      Thank you Jaswant :)