- 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
How Responsive Web Design Can Improve Your Site
When you create a website that uses responsive web design, you solve the mobile problems GWT might find, while still keeping your site working well on larger screens. Responsive web design helps you create a site that responds to the browser or device showing the page, displaying the content differently to each device.
RWD lets you create sites that are mobile-friendly or even mobile-centric. Many of the best designs on the Web right now are built with a “mobile first” mindset. Mobile first is a way of designing web pages by focusing on mobile devices before designing for larger screens. After the pages work correctly on mobile devices, designs are adjusted to work on larger screens.
How to Use RWD for Mobile-Friendly Design
Responsive web design is done primarily with CSS media queries, and the most mobile-friendly designs are mobile first. So the first styles you should write would be the styles for all devices, but principally for mobile devices.
At the top of your style sheet, place styles like these:
- Fonts and typography
- Colors for text and backgrounds
- Image styles
- Mobile layout
These styles are not within a media query because they apply to all browsers that view your pages.
After the universal styles, add a section of styles specific to small-screen mobile devices—any styles that makes the page work better on mobile screens, as well as anything that addresses the problems GWT might find.
Only after your pages look amazing on mobile devices should you add media queries to address devices with larger screens. This technique ensures that your pages are as mobile-friendly as possible.
Remember to test your pages on actual mobile devices. Don't rely only on online and browser-based emulators, which won't give you as good results as you would get from testing on the actual devices.
To keep your designs looking good on mobile devices, consider the following recommendations:
- Use a single column. Mobile devices, especially phones and small-screen devices, are small. When you move beyond one column of content, the text and graphics will need to be even smaller to fit. Stacking everything in one column is easier to manage in your HTML, and is much easier to scroll through and read on small device screens.
- Use a larger font. It may be tempting to stick with 12 px fonts for aesthetic reasons, but type that small can be very difficult to read, and tapping on tiny links on a phone is not fun.
- Make your navigation links span the width of the screen. When you create your navigation, you should keep it in a single column as well. By making each link span the width of the screen, you make it much easier to tap.
- Don't force side scrolling. Make sure all your images and video fit in the window. A video might be hard to view when seen on an iPhone in portrait mode, but it's easier to see than with half of it scrolled off the screen to the right. Even though scrolling horizontally is possible on modern smartphones, most people don't like to do it.