- Severe Mobile Usability Problems
- How Responsive Web Design Can Improve Your Site
- Make Your Pages Work for Large Screens, Too
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Make Your Pages Work for Large Screens, Too
In the past, web designers focused on the largest screens first and then added mobile screens as an afterthought. But the advantage of using RWD to add features to larger devices is that your pages will look good no matter where they are viewed. Plus, you can add media queries wherever they make sense, rather than splitting your design at arbitrary points based on the assumed size of your users' devices.
Once you have your mobile design in your CSS style sheet, you can start working on your larger-screen designs. Add a media query for a larger screen, such as an iPad or desktop monitor. Best practices say to place your media queries in the CSS in order from smallest to largest. If you are also planning on a design for tablets and a third design for desktop computers, you should put the media query for the tablets first.
Some styles you might add for larger screens:
- Columns. The wider the screen, the more columns you can add.
- Horizontal navigation. Larger screens provide more space for navigation across the top of the window.
- Complex tables. Tables are often hard to view on smaller screens, so you need to keep them as simple as possible in the mobile design. But larger screens allow for more room to create more complex tables.
If you get a letter from GWT telling you that your site has mobile usability problems, don't panic. Take the time to evaluate your site, and consider adding RWD to make your site work for first mobile and then desktop users.