Mobile development – tiny screen, big headaches

Phil LaNasa

12 years ago

I've been creating mobile sites on a regular basis for over two years now and I still don't feel like I've gotten it 100% right. With just about every site I wrap up and put a pretty bow on, I discover a minor issue within the weeks following.

Sure, I take the blame, but I wonder how many others have the same issue, where the specifications and browser changes are happening faster than they can be reasonably kept up on.

Rotation Woes

A recent one I discovered is that one of my mobile apps wasn't scaling properly when it was rotated from Portrait, then Landscape, then back to portrait. The problem was that I was allowing the device to attempt to scale the site appropriately, when really, no scaling should be taking place at all.

I had setup various media query blocks to deal with each of these cases, so the device didn't have to. So, how do I prevent the mobile device from trying to "improve" the user experience through unnecessary scaling? With our favorite mobile meta tag, viewport.

<meta name="viewport" 
      content="user-scalable=no, 
               initial-scale=1.0, maximum-scale=1.0, 
               width=device-width" />

By telling the device that the width of the application is equal to the width of the device, then requesting that the device initially scale to 100%, then never exceed 100% scaling, we can essentially eliminate any attempts at scaling.

Unresponsive layouts died when tablets hit the scene

I remember a few years ago when I could create a "desktop" site, then a separate site for a mobile device. Certain assumptions could be made on the mobile version, such as the size of the screen; it was almost always guaranteed to be small (~320×480).

But, then the 10" tablet hit the scene, and we suddenly had some conflict. It wasn't too bad though, because we could simply use the desktop version of the site on these 10" tablets. That didn't last long.

When the 7" tablet became popular, we now had a bit of a crisis on our hands. Full-width "desktop" sites didn't look so good on 7" and tiny little mobile sites look a bit stretched. Did we really want to create and maintain three versions of the same website? And who's to say some other crazy fingernail-size device won't come out tomorrow.

The approach we needed to take was clear: responsive web designs that leverage CSS3 media queries.

They've devoted books to responsive web design, so I can't cover it in depth here. But, perhaps the hardest hitting aspect of responsive design is replacing pixel sizing and positioning with percent sizing and positioning.

Say, for instance, you are used to working with a 960 pixel wide document when you develop sites. You might create a three column layout as such:

</div>
<div id="col-content" class="column">

</div>
<div id="col-three" class="column">

</div>

CSS
.column { float: left; width: 200px; }
#col-content { width: 560px; }

That's bad news when your site needs to scale down to a 7" or mobile device, right? Responsive design tells us to replace those pixels with percents:

.column { float: left; width: 15%; }
#col-content { width: 70%; }

In this scenario, no matter what the screen pixel width, the columns will be laid out appropriately in relation to the full viewport width (100%).

Queries – not just for for databases anymore

That's right – the media query let's us pull information about the current browsing environment. In our case, we just want to know the width of the browsing viewport. The media queries, thankfully, don't require too much explanation, so I'll just provide an example pull from one of my sites:

@media all and (max-device-width: 768px) { /* smaller devices */ #document { width: 100%; } #column-right, #link-blog { display: none; } }

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* ipad portrait */ #document { width: 100%; } #column-right { display: none; } }

@media all and (min-device-width: 1205px) { /* wide screen desktop */ #document { margin: 0 0 0 10%; } }

As seen above, media queries allow us to use CSS to "conditionally" style elements based on the width the browser. Imagine being able to hide the right sidebar when the browser is too narrow to display it. Well, you can!

This is just one more way that the HTML and CSS specification has kept up with the changing face of the mobile world. It may be difficult to keep up with the specs but, for the most part, they make it possible to deliver your content in a way that fits any device like it was made for it.