Compare to Classical age of web design today designing a successful web page is not so easy. During we develop a web page we have to think variety of devices & their resolutions. As you know web is available from mobile devices to television media. Practically it is difficult to maintain several web applications for several devices. That’s why Responsive Web Design introduced in UI development. Responsive web design (RWD) is nothing but the tricks using which we can handle several resolutions in a single web page. As an UI Developer off course you know how to design a responsive web page but few things are there which comes with experience. Let us share those Responsive Design best practices to make your job easy.
Responsive Design Best Practices
1. Before designing a responsive web page first noted down the targeted resolution you are going to handle. Depending upon those resolutions plan your layout. Sit with UX Designer to discuss the mockup & how to handle this in real-time. Some time it happens UX designer creates some kind of design which may not possible to achieve during certain resolution. By Discussion you can rectify this before into real-time implementation.
2. Decide which type of layout (Fluid or Fixed) you need to implement for basic template design. If you are going to implement fluid layout set width of your container div to 100%. Inside container handle pans in percentage ratio. Don’t ever take a fixed width unless until it is a small static object. In case you are creating fixed layout template, Define a CSS class (wrapper) to your container div with fixed width. Inside the container similar to fluid layout use percentage ratio to divide pans.
3. Images are very common is web page design. Keep remember to make your image responsive don’t ever apply image as a background to any div. In this case you have to define height. About width it can be handled using 100% but height creates problem. That’s why during responsive web page design use HTML image tag to place images like banner or ads. Advantages of using image in image tag is during user resize the page image tag will automatically take care of image to resize depending upon the screen resolutions.
4. Some time it was found using percentage also for certain resolutions layout breaks. In this case practice to handle this scenarios using media queries.
5. Use easy navigation pattern for mobiles compare to desktop view. If any effects you added in desktop version like slider or carousel try to avoid that in mobile view. Always remember mobile view need to light weight. Then only you web page can mobile friendly.
6. To develop Responsive Design faster as a professional UI Developer learn Responsive CSS frameworks like BootStrap or Foundation. Responsive design is a technique rather then a programming language. During development use both in-built CSS Framework classes & your own tricks.
BootStrap: Bootstrap is majorly used for UI development in applications because of the incredible amount of UI options it provides like type, head or media objects. It is easy for front-end designers to get started by providing a host of html templates showcasing some of the base functionality and layouts available, including some neat ones such as sticky footers and login pages.
Includes responsive grid framework, a fixed and fluid grid framework, typography styles, a variety of button and form styles, nav bars and tabs, plus other UI elements like breadcrumbs, breadcrumbs, tooltips and progress bars. Bootstrap truly shines in the JavaScript area. It offers a programmatic API that allow developers to use Bootstrap plugins purely through the JavaScript API.
Foundation: Generally used in blogs, marketing and informational sites, etc. The markup is a little more intuitive, and the base styles require less manipulation. Foundation makes it easy for front-end designers to get started by providing a host of html templates showcasing some of the base functionality and layouts available in Foundation.
Includes responsive grid framework, responsive typography styles, a variety of well-designed button and form layouts, navigation and tabs galore (all responsive), and a slew of other UI elements like alerts, labels, tooltips and accordions. Foundation shines in the Jquery plugin area with snippets that are handy and more easy to implement.
7. Clear your fundamentals about position attribute of CSS. Where to use absolute & where to use relative or static. This has a very strong effect in responsive web design. Bugs related to wrong use of position settings takes long time for fixation. Even some time it required to updated code structure. Learn this well before Getting Started.
8. While implementing Media Queries maintain smooth ratio for resizing form elements. For an example if you want to reduce font size of a specific label depending upon the screen resolution from 1200 pixels to 900 pixels. Reduce the font size slowly. If earlier font size is 22 pixels reduce this to 20 pixels not 12 pixels. By reducing a large difference generates breaking in sequence & look odd.
9. Avoid of using scripts to design UI. Try best to handle all situations using CSS only. If finally you found the problem is not achievable using CSS you can use scripts. But in UI design it is a bad practice.
The above tricks will help you to achieve better Responsive web pages. Share us to your Colleagues. Let us learn from Experience.
