Continuing yesterday’s post, today I’ll share a few things I’ve learned, how to make your site (or blog) display well on tiny screens. There are so many different mobile browsers. If you think designing for computer screens is difficult, mobile browsers are even more challenging. I don’t profess to
be a pro at this. So, if there’s anything inaccurate here, please do point it out and share your expertise.

For blogs:

If you’re using WordPress… I hope you are, then this is super easy. Simply install the WordPress Mobile plugin. This plugin displays a mobile version of your blog/site and also allows you to blog through your mobile browser.

The Good: I found the ability to blog from my Palm TX very convenient. I also liked the clean simple lines of the mobile display. It is quite customizable using CSS but didn’t spend very much time on it.

The Bad: In order to publish via the browser, you enter your blog account password which will reveal the post field for you to start writing. I did not like that the password entry is visible to everyone. Even if they didn’t know the password, they may try. If you have multiple authors on your blog who are not in the habit of keeping good passwords this can be a problem.

Tip: If you want to customize the display, get someone who is proficient in CSS (cascading style sheets).

For regular websites: 

When designing my own sites, I use a lot of CSS. Most of this is going to be centered around CSS techniques. So far, these are the two biggest things I keep in mind. There’s probably more I should be thinking about but this is a decent start.

• Use % instead of px when sizing fonts. Why? Apparently, % scale according to the browser but px’s are fixed measurements. So your 12px may look beautiful on your computer but absolutely huge on a mobile browser that makes reading difficult on a small screen because of a lot of scrolling.

  I have not made a switch to % on this site yet. We are using ’em’ which I was told is better than px but not ideal as % is. It looks OK on my palm though but I have no idea how it looks on other mobile devices.

• Format the columns to display content first. On my Palm, this blog will display content (the blog post) first before the menu. This is because in the HTML, the content is put first. Many mobile sites have their menu options at the very bottom of the screen anyhow so this is what (I think) is the standard, expected display.

  Putting your content first before your menu may also be a good thing when it comes to SEO. This is because it pushes all your yummy content that is fully optimized up to the top. Not being an SEO expert, I do not know if this is still valid, but that is what I have been taught.

• Optimize your images. This I admit should be done regardless and still needs lots of work. So used to high speeds on the computer.