Mobile Web Design Tips for 2013

This is definitely the year for mobile website optimization. With the newest gadgets like the Lumia, Note II and a whole lot more to come, it’s important to consider how your website will look on a mobile screen. As recently reported, about 25% of clicks come from mobile devices! Here are some mobile web design tips to take with you this year:

1) Make everything big – Text, photos, buttons, navigation, calls to action, white space, and more. This is certainly a good year to think big when it comes to your mobile website. Big is better than small and it’s certainly almost always true for a smaller screen, so don’t be shy about it.

2) Prioritize content – Your mobile site can’t possibly have everything that the desktop version has. Instagram, Pinterest and Tumblr will serve as good practice for your content curation skills – this is where you’ll need to pick and choose the best content and arrange them in a way that’s pleasing to the eyes (as well as thumbs).

3) Follow typography trends – Pictures are great but if they’re too big or there are too many, it could slow your mobile website down… and that doesn’t include spotty cell phone coverage that’s thrown into the mix. Designers are gravitating towards using customized and stylized type. Who knew you could be so creative with just letters? Check out some trends here.

4) Utilize responsive web design – Wouldn’t it be great to have a flexible site that can shrink and grow depending on the device? When using the responsive web design approach, you don’t have to worry about making different versions of a site for specific devices.

5) Test for different screen sizes – If you’re not ready or able to take the responsive web design approach, testing your mobile website is crucial. There is no longer a “standard” size. Check out mobile device emulators like iPad Peek,  MobiReady, and ScreenFly.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ three = 5

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>