I had a pretty cool idea for a post earlier today, but I didn’t write it down and now it’s gone.

Instead, I’ll be doing a little rant on developing websites to be compatible with mobile devices. Damn thing gave me a bit of a headache today. And I even got everything set up already to work nicely, as you saw in a recent screenshot I shared. Apparently iOS Safari was restriction its viewport to a minimum size, so where my website would normally shrink down to accommodate for screen width, it didn’t since the viewport was broader than the screen. Took some searching around to find the solution to this, but luckily it’s fixable.

But if we take some steps back, there’s some preparation before you can even get things trying to look decent on mobile. At least, in my experience. If you want your website to look good on mobile, you need to keep it in mind while designing and developing. That is to say, all the time. You need to make it so you can just slap some media queries on there (or even a different stylesheet for more extreme work) and be done with it. Responsive design can play a large role in fixing this, but isn’t a cure-all. If you got some extravagant elements on your page, be prepared to just hide a lot of them. At that point you’re better off making an entirely different page for mobile devices.

When designing, go with something that seems flexible. A single column for the entire page makes this really easy. Also try and cut down on text where you can. On slimmer screens a couple sentences can take up three sore thumbs of vertical space, which usually isn’t ideal. But this can’t be avoided sometimes, so just try to make the best of it.

Not that I’m an expert on the subject though, I just fuck around with it in my free time.
~ Fang