Designing a website used to be just creating for fixed resolutions. But in our modern mobile world things have changed.
How you style your site should vary based on target devices. Mobile users browse the web differently than desktop users and you’ll need to design for these differences. I’d like to share my go-to strategies for creating websites with user experiences that mesh nicely on both mobile & desktop environments.
The First Pageload
Visitors judge a website within seconds and your job is to encourage them to stick around. Not just sell them with a pretty design, but encourage them to take action.
This action might be different depending on the screen size. Most desktop users have larger screens and they have mice for clicking/scrolling. Mobile users only have their fingers and the screens are much smaller.
Plan your designs accordingly so that all the important stuff can be seen above the fold.
With the popularity of responsive design there are dozens of tutorials explaining how to create mobile-focused layouts. But the contrast between desktop is the biggest factor to consider, especially if your visiting audience is a 50/50 split.
With smaller screens on mobile you should capitalize in a few areas:
- Grabbing attention with large headlines
- Reducing the side of logos/navbars
- Squeeze a related image(or part of one) above the fold
Mobile users typically browse their phones in portrait view so content streams down the page vertically. This means you actually do have a good amount of space, but it’s just very narrow.
On desktops & laptops you’ll have plenty of space across the board. This leaves you more room to sell the user on what your site is about.
This is really what you should care about with the first pageload. Figure out how to sell and how to push your site to grab attention.
Mobile works best with headline text and an image, whereas desktop environments can lead right into the content. But either way the fold is your friend so design around that.
Here are some posts you can skim for more ideas:
- How to make users scroll down your page
- Life Above and Beyond the Fold
- Vertically Responsive Design: Keeping Things Above The Fold
The debate of responsive navigation has raged for years and it’s still a hot topic among designers. There is no clear-cut perfect solution for mobile navigation.
But there is absolutely a difference between desktop & mobile usability, and navigation should be a top priority. Comedy Central is an excellent example contrasting the differences.
Their desktop nav menu has fullscreen dropdowns with columns for dozens of links. Visitors usually have larger screens and mice so they can more easily browse through content.
But past a certain breakpoint the navigation hides behind a hamburger icon. This little menu is heavily contested and may not be perfect for every situation. But it’s widely considered the best option for massive navigation menus on smaller screens.
The differences come down to interactivity and screen space.
Mobile phones are just smaller and users interact by tapping/swiping. This behavior is much less accurate than a mouse cursor so mobile users need more “leeway” to accidentally tap outside the button space.
Great mobile UX comes with a keen eye for observing behaviors. If you can understand how people browse the web on their phones you’ll have a much easier time finding that divide between desktop & mobile.
Planning Content Structure
Content is pretty much the reason we browse the web. But we browse the web differently with a mouse & keyboard.
Your UX design should reflect this and it’s crucial to make adjustments for mobile/desktop users.
The majority of desktop screens have fairly large resolutions. Most widescreens run on 1920×1080 and some are even larger. This means you have plenty of horizontal space on desktop, but your page width is probably maxed so content remains centered.
Consequently most mobile devices are the exact opposite with very tall device screens. This means a lot more swiping to continue reading down the page.
Your content styles should differ slightly based on devices and these different styles can have radical changes to the user experience. These are some typical changes I see when comparing content styles against different devices.
- Mixed font sizes with a wider body
- More padding/spacing between blocks of text
- Lots of dynamic features like icons, image galleries, and tabbed widgets
- Larger text to increase readability on smaller screens
- Darker text with clearer links to increase contrast
- Greater line height so links are easier to click
You can adjust these styles based on your site’s fonts and the type of content.
For example, YouTube caters to video so they might care less about font size. But a huge blog like Mashable needs to create a usable reading experience.
Test various font sizes, font families, and colors to see what fits best. Ultimately you want to plan around the actual consumption of content. You should be concerned with how easily someone can read your site.
You may want extra space or padding between paragraphs or inbetween lines in a paragraph. Alternatively you might want to condense this content to help readers get through the page quicker—but does that make it harder to read?
Find a way to answer this question for all devices and you’ll produce an excellent reading experience for everyone.
Optimize Clickable Spaces
Buttons, text links, videos, images… plenty of stuff on the web requires user interaction. But users interact differently based on the device type.
Web designers have been working on desktop since the beginning of the web. All the best practices for interactivity seem geared towards desktop. Mobile is a newer space that has been around for a while, but still leaves room for improvements.
When you’re designing clickable assets for mobile you need to consider finger sizes for tapping. How big is the button you’re using as a CTA? Is it clearly visible and easy to tap?
Optimization is an ongoing process and you’ll always be trying new things to see what works best. CTA buttons are one aspect but certainly not the whole enchilada.
You should also consider how to deal with tabbed widgets, lightboxes, modal windows, sliding carousels, and other dynamic features. Carousels are typically bad practices and they’re even worse on mobile.
Be cautious when adding interactive elements to your page. Test them on mobile first and then expand up to desktop. This way you can build a quality experience for everyone on all devices.
There’s an ongoing debate over desktop vs mobile design and which should be the “main focus” of your initial design. They are both crucially important but in my experience it’s good to plan for mobile first and then grow larger.
Try this on your next web project and keep UX principles in mind. If you can build a killer mobile user experience then you can always scale this larger, but it can be tough scaling a desktop experience smaller.
Find what works for you and roll with it. But remember your #1 priority is always to offer the user a brilliant experience.