Essential tips for better Responsive Design

Essential tips for better Responsive Design

Introduction

Responsive web design has been a mushrooming trend in 2012 and slowly it has become the order of the day in current scenario due to increase in mobile usage.

Responsive web design in simple terms can be explained as an approach which adapts to the user’s environment. In short it will suit any mobile, tablet and desktop with different screen sizes.  It consists of fluid grid, flexible images and CSS3 media queries.

Need for a responsive design

  • Google strongly recommends the usage of responsive design for smart phone optimised websites since it is easy to crawl and index the website’s contents.
  • With the changing trends in technology, responsive web design is easier to maintain and has a longer life compared to mobile web design which requires frequent update and maintenance.
  • Responsive design is likely to reach large audience which helps us to expand business.

Tips to create a better responsive design

Keep your layout simple:

The first thing that should pop in our mind when we start a responsive site is, to create a simple layout and HTML code. Please avoid CSS3 special effects and Java Script for critical parts of the layout.

silly

Purpose:

  • If we use more HTML element and complex structure in our coding, it will be very difficult to edit and manage the template.

Keep your layout flexible:

A fluid grid system uses percentages to define column or div widths instead of pixels.

f

Purpose:

  • The flexible layout method aids the users to manage the dimension in different resolutions by altering the content width, accordingly to the width of the browser thus eliminating the need for a horizontal scroll bar.

Note: The standard formula to help convert the solid layout into flexible layout is given below:

target ÷ context = result

Define the breakpoints:

Before starting a responsive design we have to define the breakpoints to the targeted device width. Most often these targets are the smart phones (iPhone at 320px and 480px), the tablets (iPad at 768px and 1024px) and finally anything above 1024px.

Common resolutions are classified into 6 major breakpoints. We can work with them the following way:

m

Purpose:

  • Breakpoints are the points through which the sites content responds, to provide the user with the best possible layout to consume information.
  • Break point performs the template adjustment based on the device screen dimension.

Note:

  • Instead of wasting effort with device breakpoints, the best practice would be to design    for the smallest viewport first.
  • Focus on major breaks
  • Set the full desktop version above 1024px.

Use SVG and Icon Fonts:

One of the excellent features of the icon fonts and scalable vector graphics (SVG) is its flexibility to scale shapes and also change the colour of the shapes using simple CSS property. Icon fonts and SVG files have less weight, compared to the image formats (PNG, GIF and JPEG) hence the performance of the application will be higher in desktop and mobile.

ii

Icon Fonts

Icon Fonts behave mostly like regular fonts. They make use of the CSS3 @fontface declaration. The best thing about Icon Fonts is that they can receive CSS styles just like real text.

They require a little bit of learning and planning to get started, but there are tools that make it relatively painless to start with and run.

  • IcoMoon
  • Font Awesome
  • Fontello
  • Typicons

SVG Icons

SVG has been around for a long time, but has never seen widespread adoption. Many are now starting to see the benefits of SVG, especially with regard to the responsive design.

  • Fully scalable at all sizes
  • Usage of multiple colours
  • Allows animation
  • SVG have their own syntax from regular CSS (i.e. instead of background: red; you would write fill:red;)

Understanding the content choreography:

Some parts of our design will never be used in a mobile context, so we might as well remove them.

b

In case of a smaller screen, omit the non-essential content from the view and align the content based on hierarchy.

Apply this code to remove the non-essential elements:

Purpose:

  • To re-arrange layouts in small contexts that wouldn’t make sense otherwise. Sometimes there is no need to change the layout order.

Note:

  • Skip contents relating to advertising, tips, help, points to remember etc.
  • Use Flexbox, Regions and Grid Layout for aligning the column perfectly.

Please remember:

  • Make sure the Meta tag is on the top
  • Make sure the breakpoint is defined from higher dimension to lower dimension (i.e. starting from 1024px which narrows down to 320px in CSS). If this strategy is not followed some CSS will not work.
3512 Views 1 Views Today