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.
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.
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.