Responsive design becomes more and more popular around the web. Many sites abandon mobile versions in favor of responsive web design. But still there can be mistakes when developing such type of design which may end in incorrect displaying of your site online.


Hidden content

You don’t need to hide some part of content just because it doesn’t fit into a mobile screen. The thing is that mobile users expect to see the same content as desktop users. Possible exclusion is images. If you feel you can’t fit some minor images into a design then omit them. But still, when developing a concept of a new design try to include as much elements of the desktop version as possible.

Non-optimized for touch-devices

Most mobile devices nowadays have touch screen, and it means that if you develop a design which is not optimized for such devices users will experience certain difficulties when navigating your site.

Non-optimized typography

Well, it’s really difficult to optimize your design for ALL screen sizes but nevertheless you need to do your best to change the typography so that it’s comfortable for users to read a text from your site on a screen of any size.

Use of large files and images

The first thing you should remember is that the primary goal of responsive design is to provide smooth interaction with site for mobile users. And you shouldn’t use large files or images as they’ll slow the overall site speed. Secondly, mobile Internet is not always very fast and large images will make it even slower. So all images and files should be optimized.

Simplify the design

When developing a responsive design some may think that it’s enough if to create a pretty primitive design which will fold up on a smaller screen of a smartphone. Your design should display smoothly on any screen.

Use of heavy frameworks

Sometimes it’s too complicated to develop a site on adaptive framework with its all plugins and add-ons. In most cases a simple light array is enough. Alternatively, you can build a site from scratch.

Don’t think about content

The content of a site is generally varies – texts, videos, photos, tables, etc. You need to bear in mind how all these elements will  display on your responsive design.

Don’t think about big screens

Trying to make your design look perfect on mobile screens we may forget about big desktop screens or even smart TV screens. You should make your design attractive for these screens as well.

Turn off zoom

A lot of developers turn off the possibility of resizing on the responsive design by adding a corresponding viewport meta tag. It may irritate users. Also, Apple, for example, does not recommend to do that.

Forget about Home Screen icon

This point is for iOS devices. iOS doesn’t show favicons for sites, so it’s strongly recommended to add Home Screen icon.

Share on TwitterShare on FacebookShare on LinkedInPin it on PinterestSubmit to redditShare on Tumblr

Written by Eugene

Eugene is a senior online marketing manager for Apptraction, New York based mobile app development company with focus on tablet application design and development. Follow them on Twitter @Apptraction.