1. Use a good responsive framework
The most common (and often easiest) way to develop a mobile-friendly web application is to develop just one set of web pages, and code them so they automatically adjust their layout to fit any screen size. Websites and web apps that are developed in this way are referred to as “responsive” because they “respond” to the dimensions of any screen. (To see this in action, go to a responsive website like www.boston.com on a desktop computer and slowly decrease the width of your browser window. You’ll see the page content collapse and readjust itself to fit a smaller screen.) Most web developers use code frameworks (such as Twitter Bootstrap) that take away some of the overhead associated with developing a responsive website. Using a responsive framework from the beginning can save a lot of time down the road.
2. Design for mobile first
Once you have an idea about what content and features you want to include on your site, start creating your site layout using a narrow viewport. It’s often much easier to scale to a larger screen size from a smaller one than it is to do the opposite – especially if your web app contains interactive functionality that needs to be available on all screen sizes. If you are working with a designer, make sure that their mockups are compatible with the super-sharp displays on many of today’s mobile devices, such as the iPhone’s retina display. This is because it’s easier to scale graphics from retina to non-retina than the other way around. Note also that the page layout often changes dramatically from mobile to desktop. Most mobile platforms use a layout in which areas of content tile vertically – but the same content can often exist side-by-side on wider screens – so design for mobile first, but keep in mind how the layout can appear on wider screens.
3. Choose font sizes carefully
Because small-screen devices such as phones have limitations on the amount of text that can fit on the screen, it’s often necessary to make adjustments to the font sizes on different devices, especially page titles and subtitles. Luckily, responsive frameworks like Twitter Bootstrap make it easy to define what sizes that your titles, subtitles, body text, etc. should be on various screen sizes. Consider adding white space to your larger screen design to help readers identify which areas of text belong together.
4. Avoid tables where possible
Tables are a great way of sharing data in a concrete, well organized way… but they are often difficult to render on a small screen! If you must include a table, try to restrict the number of columns as much as possible to increase readability on a mobile screen. You’ll also want to pay attention to how the table automatically scales for larger screens; even with only a moderate change in screen size, your data might be lost in table cells that have grown unwieldy with too much white space surrounding tiny bits of text.
5. Don’t forget tablets
It’s surprisingly common for designers and developers to create web apps that look great on small phones and large desktops – and to forget about all screen sizes in between. By default, Twitter Bootstrap has four pre-defined “breaking points”, or standard screen sizes that it accommodates. The smallest is mobile phones (in portrait mode) and the largest is a large screen, while the two in between are commonly used for tablets (portrait mode) and tablets or small laptops (landscape mode). Ignore these at your peril; much of your traffic might be coming from these other devices.
6. Use vector graphics where appropriate
Unlike photographs that appear pixelated and blurry when zoomed in, vector graphics are defined using mathematical equations – so they always appear sharp on any device, regardless of its size. Most browsers (with the frequent exception of Internet Explorer) let you insert logos, icons and other simple graphics into your website in SVG, a common vector format – which ensures that these can appear super-sharp, even on retina displays. Another common approach for displaying icons in vector format is to use a font icon library like FontAwesome. Although FontAwesome is a bit overused now, it provides an easy way to incorporate icons into your website or web app as a font (fonts use vector format), ensuring that they’re kept super-sharp on all screens.
7. Check performance at all sizes
Once all the elements in your design are in place, shrink and expand the width of your browser dynamically to check whether anything breaks down. Is there a section that starts to look awkward before the rest? If so, is there a different way to arrange and render that information so it scales more naturally? If not, do you need to set a new breakpoint to keep things easy to navigate across all the current and potential screen sizes? If your website or web app is currently operational and you track your users’ screen sizes with a tool like Google Analytics, test the site on the most common screen size used by your users. Can you easily find and use the key components of your site? If not, adjust as needed.
With mobile devices increasingly capturing market share among internet users, making your site responsive can make a huge difference to site traffic. Don’t lose customers; scale for screen size today!
Interested in updating your site for better mobile performance? Contact us! Have a great tip that we missed? We would love to hear from you.
