Why you should design for the mobile browser first.
Kevin Moreland, Software Engineer
Everyone carries a mobile phone these days, and most people are addicted to them.
People’s first exposure to your web site is often through a browser on their phone.
It doesn’t matter if you are a business or organization, targeting B2B customers or the public at large; the user should be able to navigate easily.
If your content is valuable enough to the visitor, but the browsing experience on their phone was clunky, they may visit your site later on a desktop — but don’t count on it!
If those reasons aren't enough to sway you yet, did you know that Google gives a ranking boost to sites that are mobile friendly? If you site isn't mobile friendly, Google will also penalize your listing.
So, how might you go about it?
- Design your site while viewing it on a small phone that is in portrait orientation.
- Use minimal HTML markup and responsive techniques.
- Start with CSS rules that make it look great on a small phone screen.
- Don’t worry about how ugly it looks on desktop browsers at this point.
- Ensure everything clickable passes the fat-finger test, that the font sizes are appropriate, and the UI is as clean as possible.
- Then you can add media query overrides for larger screens (desktops & larger tablets), and override those CSS rules that don’t look so hot on larger screens.
- Because you’ve kept everything lean and mean, the site will load quickly on a mobile device, especially if your visitors are on mobile data, and load even faster on desktops.
Of course, this is just the tip of the iceberg. Test your site on all the mobile and desktop devices you have in your possession, with different browsers, orientations, resizing windows, etc. Link your site in the Google Search consider and check out the Mobile Usability section once your site has been indexed.
There are also online services that have connected devices which will show you screenshots of your site. In a pinch, you could make a trip to Best Buy to test on a large swath of the latest consumer devices.
Other articles on this web site:
- Why create a design doc? And why you shouldn’t skip it.
The benefits of having a design document before you start coding.
- Designing a Server Monitoring and Alerting Service (Cheat Sheet)
A checklist of items when rolling your own server monitoring service.
- Secure Server Implementation (Cheat Sheet)
Creating a secure Java server without using a framework.
- Automating the set up of a Linux-based VPS (Cheat Sheet)
Considerations when configuring a Debian-based Linux VPS.
- Certbot Automation for Java-based Servers (Cheat Sheet)
Ideas on how to automate Letsencrypt's certbot when you are running a Java-based server such as TomCat.
- Automate everything you possibly can, starting with your environment.
Automate everything you possibly can from the very beginning before writing the first line of project code.