Web is becoming fun, interactive and responsive! More and more designers are adapting the responsive design. Given the rise in number of smartphone users globally, there is an acute need to adhere to responsive design best practices and provide an unmatched customer experience.
1. Keep the layout simple!
Try and kill pointlessly intricate divs, inline styles and float positioning. Instead try and use more of a reset stylesheet, HTML5 doctype and guidelines along with simple and semantic core layout. The menus, navigation etc. should also be built using simpler techniques. Do not rely more on the CSS and Javascript for critical parts of the design.
2. Use Media Queries!
Media queries rock and they are really easy to implement. Focus on width conditions and load alternate stylesheets or specific styles depending upon the client needs or your internal requirements. Some of the most frequent resolutions remain from 320 to 1200 px.
3. Define the resolution breakpoints!
Common resolutions can be sorted in 6 ways. Try to target the first Gen Smartphones in portrait mode with a below 480 PX rule. For high end smartphones and portrait ipads try to go above 768 px. 320 Pxstylesheetis ideal for low res mobiles.
|
Major Breakpoints |
Additional Possible Considerations |
||
| First Gen Smart phones | High end smart phones and Portrait Ipads | Big Tabs, Desktop, TV | Low Res Devices |
| Portrait mode, <480 Px rule | <768 Px rule | >768 Px rule And <1024 Px | <320 Px Stylesheet |
4. Make your layout flexible!
Flexible grids make life even better! They use columns to organize content and relative instead of fixed width to adapt to the viewport size. Fluid layout is best for multiple screen orientations. Combine the fluid layout with right media query and you will the king of all screens. To avoid rounding errors, use long decimals and let the browser do the maths. Fluid width, padding and borders aren’t a challenge if used rightly.
5. What about pictures?
So, if you have an adaptive layout and mismatched pictures, here is how you can make it work! Just to let you know a simple style can make the picture fluid too. You can use various breakpoints for alternate pictures, if bandwidth is not a big issue. Some mobile browsers won’t load pictures on display so hiding picture itself might not be a good idea, instead, use a background image, show/hide parent versions of picture in media queries. Resize the width carefully.
6. Don’t forget Max and Min!
Use max and min as boundaries applied to your relative sizes. This way you will prevent your layout to grow or shrink when viewed on large or small device differently! Combine fluid layout with min max sizes and media query breakpoints for increased adaptability!
7. Try to make the most things relative!
Adapt to the cascading % method or emphemeral unit method and make everything inherit. Either you can define a master container with fixed or fluid layout and compute every small dimension or define font size in master container and use it as base to compute anything with em based dimension.
8. Squeezed Content in low res mobiles!
So, now here is a new challenge if your subscribers use low res mobile phone! To overcome this issue, get all the content in one column. Simply override the width of every column bloc in your mobile stylesheet. For long layouts, this technique might work wonders as well!
Summing up, responsive web design is one of the most used and talked about the concepts of web design. Adapt to some of the above tips and ensure that your responsive design gives you an amazing mileage!
Webby Monks
Latest posts by Webby Monks (see all)
- What’s the holy link between metaphors and user experience? - November 11, 2023
- Mobile User Experience – Making it a celestial is an art! - November 6, 2023
- 4 must avoid sins while A/B testing your designs! - November 1, 2023
