Are you stuck on how to create a good-looking and functional mobile device layout for your site? Then you’re not alone–when you’re trying to design for a much smaller screen than you ever thought possible, it can feel as though you’re trying to cram your entire website into 480 pixels of space!

However, we independent designers can take cues from social media sites; Facebook, Twitter, and other sites manage to maintain their site’s “look,” while still making their design appropriate for a mobile device. How do they do that? Read on to find out!

Think small for site logo and content

Instead of doing a huge background image or a great big header image with your site name, a simple icon and text declaring your site name should be enough for a mobile design. Better yet, use CSS to style a text version of your logo so that mobile users don’t have to wait to load a weirdly-sized image.

Also, when designing how your content should display, imagine a space about 300-400 pixels wide, and about the same in height. Your content must fit comfortably within that space, in big enough font that mobile users can read on their small screens.

Choose text and background colors that contrast well

When someone is using a mobile device to view your website, you don’t want them having to squint and turn their phone every which way trying to read your content. Make it easy on your users’ eyes! Using a white background and black text is a classic choice, but feel free to choose any one very light color and one very dark color to use.

Use icons rather than text

Whenever possible, change out text links for icons. Not only is it space-saving on your smaller mobile-friendly designs, but it is also less tiny text to read, which will lower your users’ frustration level drastically. (Also, make the icons big enough to tap!)

Make your page easy to tab through using down arrow key

For those who have touch-screen smartphones, they will be able to scroll down with a swipe of their fingertip down the screen. However, you also want to make sure that your non-touch-screen mobile users can use the down arrow on their phones to “scroll” efficiently. Don’t crowd too many links or pics on one mobile-friendly page–that’s just more for the down arrow key to highlight. (This brought to you by a former non-touch-screen user)

Summary

With these tips, you can make a compact, easy-to-read, functional mobile design for any site. It might look a bit bare-bones on your big screen, but trust me, your small-screen users will thank you!