Tips for responsive design

placeholder for a select box

A new web standard that emerges into the web world is responsive design where many software companies have accepted the challenge and leads to a new design solutions.

Here we will discuss some responsive design tips which will help to you in your design to make it more perfect.

  • Plan first and design: Make sure design your challenges on paper, after complete you are sure that you are ready to build your site.
  • Look and Feel: Build the entire design layout of the interface first, before doing any coding. Attracts people by design first the coding.
  • Consider a Mobile first: Make the overview design for mobile first then build the tablet and desktop designs.
  • Exact Measurements with Images: Set image dimensions to match resolutions. For e.g. 800x450px at 100ppi.
  • Limit the Use of Text on Mobile: Use when needed otherwise it creates long scrolling pages.
  • Navigation: If your website has small amount of menu then you show using link but if there are much more menu then creating a single icon that opens into a drop down menu of additional menu items will solve the problem.
  • Images: Create optimized images for each layout when using responsive design layouts. Use JPEG, GIF and PNG-8 file formats. Never use PNG because it increases your files sizes by 5-10 times.
  • Prototyping Software: Use Adobe Edge Reflow which allows you to use of media queries and design your layouts to fit desktop, tablet and mobile etc.
  • Parallax Scroll: For responsive design it has done a huge change in one page design.
  • Clean and clear Design: In responsive design it is very important to design clear and clean. This helps to improve page loading time.

Leave a Reply

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