Responsive design adjusts a single website based on the device used to access the site. This is accomplished using cascading style sheets, which can automatically detect the screen size and adjust the output accordingly.
Instead of building separate sites to support each device — laptop, iPhone, tablet — a single site can be designed and developed to support the current and future devices. This not only reduces development costs but also the operational costs of maintaining multiple sites. But while creating the responsive design most of designers forgot to pay attention on some common mistakes. In this article we have highlighted common mistakes done by designers while creating responsive design.
1) Incorrect skeleton
Most important part of any responsive design is its skeleton. If the skeleton is not prepared according to the responsive design, then it is very hard to regain the responsiveness on later point. Its results into very poor user experience. So, to overcome this issue we should think about the mobile design while creating the skeleton of the design.
2) Typography mistakes
This is also the most common mistake done by the designers while creating a responsive design. When we are creating a responsive design the font-size and line-height properties are must be used and changed according to the device. On mobile we can not have the same font-size as we have on the desktop or laptop. For adapting the font-size according to the resolutions, we can use the “em” or “rem” font-size properties.
3) Wrong division of skeleton design
while creating design we should have a appropriate division of the skeleton, so that its give very user friendly experience on various resolutions. To do so we must have a main container firstly which will have all the dom elements and then divide the design into the sections and each section then contain of columns. Means try to use the grid design structure. In this way, we are able to get very user friendly design on all the resolutions.
/*** container is main centered wrapper ***/
<div class="container">
/*** columns should be the immediate child of a .row ***/
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
/*** just use a number and class 'column' or 'columns' ***/
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
/*** there are a few shorthand columns widths as well ***/
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
4) Forget Img tag
In responsive design the another most important part is images. If the images are not used correctly then it will lead the design to very bad view and user experience. To overcome this problem designer should try to use background property rather than using the img tag. for eg. there is a text in the column and a image in the section, then we should keep that image in the background of the section.
5) Get rid of margin and padding
Most common mistake which has been followed by the many designers is give margin and padding to align the text or icons to desire design. this implementation will lead into text overflow on smaller resolutions. A designer should use “text-align:center” or if it is very necessary to use margin then use “margin: 0 auto” to align the text center on every resolution.
6) Never fixed the height width of section
Most designer usually fix the height and width of the section to archive the desire outcome, but they did not think about the mobile and about higher resolutions. when they fixed height of a section and that section consist of a background image, then the background image got shrink in small screens and lead to very poor view. one should use % property to give the width and try to avoid giving height.
7) Keep all the css in one place
when its come to the formatting point, most of designer lack to keep all the css in one place, they formatted the css according to the design. But one should design the base of the css according to the design for eg. the width of the container, sections, columns, various headings and the font-size of hole design. Never use Inline-css to get the design into right place.
8) Avoid Header Footer margin for icon placement
When a designer design the header and footer of a site then usually one used margin to give equal spacing between the menus and the icons which is very incorrect approach and it will lead the header and footer to break down into two lines in small resolutions. it looks very unfriendly to the user. we should think of a separate header and footer to get rid of this issue.
9) Verify the width of Each Dom element
Most no of designers are forgot to verify the width of the dom element, under which they are implementing the design. Because if the width of the dom element is getting outside the desire width, then it will cause a lots of issues in the smaller resolutions, means on mobiles. So, a designer should verify the width of each dom element through inspect element of the browser.
10) Hardcore testing of design
This step is most important and necessary step for a design. Most of the designers test the design for desktop for a normal resolutions. If one is design for desktop version then it should be tested for higher resolution 25 inch screen(2560 x 1440), 13- 15 inches screen( 1280 x 1024), 10- 11 inches screen (1024 x 768). And if design is responsive than it should be tested on each major resolution available today. you can refer this link for testing the design.
Conclusion
Building responsive web sites offers great potential for designers and businesses. The down side is that things are constantly changing. so to move forward with new things designers should kept these points in their mind. Feel free to contact us if you have any query.
