Common Mistakes of PSD to Responsive Conversion
In the world of web, technology is changing everyday. Smartphones and tablets are changing the way of internet usage and taking web everywhere. Responsive web design (RWD) is around from some years now. CSS media query is helping us in making of responsive template for different resolution of mobiles and tablets.
What is Responsive Web Design (RWD) ? Responsive design gives a better organized look to user across multiple devices. To get a perfect responsive conversion you need to take care of below written points.
1. Not adding Viewport Meta Tag – We need to add viewport meta tag in <head> section. This means that the browser will render the width of the page at the width of its own screen. Don’t use a responsive meta tag if your website isn’t specifically designed to be responsive and work well at that size, as it will make the experience worse.
2. Using inline CSS – Don’t put a fixed value for any designing element. You can set width and height according to the device’s browser pixel ratio setting. This is a very common mistake while converting PSD to responsive design.
3. Use of Tables – If you want a perfect Responsive design, you should never use <table> tags to generate sections as it creates some designing issues while converting your PSD to Responsive design.
4. Disabling the zoom effect – When the user is filling up the form on any responsive site, you should not disable the zooming effect. You can use maximum scale property for the designing elements.
5. Not testing on actual device – Mostly you test your responsive site in browser add-ons to validate the design instead of actual devices. I know you don’t have every device but at least you should have some devices available to check your Responsive design.
Hope it Helps 🙂
Kapil Chotwani
