How to create a website optimized for mobile phones? This article does not present this at the code level, assuming you are familiar with CSS. What should you pay attention to beyond technical matters? Tips.
This article does not precisely demonstrate how to create an appropriate mobile view for your website; we assume you are familiar with CSS. If not, then learn it professionally in the FroggyCode front-end basic course.
When designing the mobile view of a website, the basic idea is that elements that are side by side in the desktop view should stack vertically, which can be achieved, for example, with flexbox. Media queries are used to write new CSS that only applies below a certain screen width. But you already know this! What else should you pay attention to? Here are a few important practical tips.
We know how many pixels we optimize for.
Based on our own statistics, more than half of the people browse websites with a screen width between 360-393 pixels. It’s worth optimizing for this interval. In practice, you should pay attention to the smallest, 360 pixels, but with media queries, you should switch to the mobile view at least at 600 pixels. Don’t be misled by the fact that the resolution of our phones is much higher on paper!
Font Size
Having the right font size for a desktop view doesn’t automatically guarantee success for the mobile view. You likely need to write media queries to ensure that the font size looks good on a small screen. But what does “good” mean? First and foremost, it should not be too small because that makes it hard to read. This not only annoys visitors on our website but also gets noticed by Google. Even if not for a headline, overly large text can be distracting in normal paragraphs because constant scrolling is required for reading. Generally, 5–7 words per line are considered excellent for mobile readability, even on a bumpy tram 🙂 Many recommend a font size of 14 pixels on mobile.
A good solution to the font size problem might be to use vw (viewport) units for font sizes from the beginning, even when designing for the desktop view. This ensures that line breaks are always in the same place in the text, especially for headlines. Apart from headlines, using vw is recommended in the intermediate range, between mobile and desktop views, around 600 and 1200 pixels. However, at the two endpoints, in the mobile and desktop views, it’s still advisable to set minimum and maximum fixed font sizes with media queries. Otherwise, your fonts might become too small or too large.
Elements Too Close Together
On a desktop, it’s not an issue if two clickable elements are close to each other since the mouse is a precise tool. However, our fingertips are much blunter, and it’s easy to press the wrong thing! Pay attention to ensuring that buttons, labels, and menu elements are far enough apart in the mobile view.
Padding and Margin
In the desktop view, it doesn’t look good if the text stretches from one side to the other. This is solved by adding padding and/or margin. An 80-120 pixel padding on both sides in the desktop view can be visually pleasing, but the same on mobile would take up half the screen. Interestingly, on the narrow screen of a mobile device, even a few pixels of distance from the edge of the screen is sufficient, and for images, it’s worth leaving it entirely. The key is not to omit margin and padding from the media queries!
Hamburger Menu
There are various ways to make our subpages accessible in mobile view, but please use the hamburger menu! This has become a standard expectation among users, and choosing a different solution may likely result in losing visitors. The hamburger menu icon should float as we scroll down the webpage because no one likes to “crawl back” to the top just to view a page in the menu.
Pay attention that there is no hover effect on mobile! When on desktop we bring up content, such as sub-menu items, by hovering the mouse over an element, on mobile, this should appear “on click” (but not by itself). An alternative solution is to have our menu items already expanded in the mobile menu. Vertically, significantly more menu items can remain well-organized than horizontally in the desktop view, with items side by side.
Finally, also be mindful that if anything is omitted from the mobile view (for example, a link to a subpage), it’s likely that Google won’t showcase it at all.
Size
If we want satisfied visitors and good SEO, our website should load within 3 seconds on mobile. There are many technologies for this, but the simplest is to reduce the amount of data.
Images take up a lot of space, but it’s unnecessary to display a detailed 2000-pixel-wide image if the user will only see it at 375 pixels on their device. Perhaps the simplest method is to use the less-used HTML picture tag to load a smaller image for mobile view. WordPress sites stay relatively fast on mobile because multiple versions of each image are created and displayed for different screen sizes.
If there are videos on our website, consider replacing them with a regular image. It’s enough for the video to load on click for those who want to see it!
Website Length and Content
As we stack content that would otherwise be side by side in mobile view, our website may become too “long.” Users might have to scroll a lot to reach the content they are interested in. While it’s not clear whether Google penalizes this, it can be unpleasant for users. Scrolling down with a finger takes more energy and time than quickly scrolling down with a mouse. Keep in mind that many people check websites between two tram stops on their way home from work, and if they can’t quickly find what they’re looking for, they might just exit.
There are two solution approaches to this problem. The design-based approach involves reducing the size of elements and the spacing between them or rearranging them on mobile. The content-based approach involves simply hiding elements and content on mobile. However, be careful to only exclude content, typically from the homepage, that remains accessible through the menu or is non-essential, like filler design elements or text in the desktop view. You can also choose to keep only the titles, under which the content appears only when a downward arrow is pressed; this is very commonly used in FAQs, for example.
Test on Different Devices or with an Emulator
It’s not enough to check the finished work in the inspect view on our large home screens! In fact, checking it only on our own mobile phones is insufficient. Verify the results on at least one Android and one iOS device; in the case of the latter, also check it on Safari. Alternatively, use a handy emulator like Responsinator.
Tips
- It’s not advisable to use custom fonts on Hungarian websites because on mobile or in a different browser, accented characters may not display correctly.
- Check whether your pages can be swiped left or right on mobile! It’s good if they can not.
- Horizontal rectangle-shaped images work well on desktop, but on the mobile screen, vertical rectangle or square-shaped images look better. If you don’t want to use new images for this, set it up so that the central part of your images appears on mobile.
