Paradox Designs

Mobile web design is different than desktop web design. Different screen sizes, input devices, are difficulties that designers must work with. But designers are also presented with a set of powerful tools; tools they cant use on a desktop, for various reasons.

This article is a series of observations I have made wile working on reddit mobile.

Screen size

Mobile screens are, obviously, smaller than their desktop counterparts. You have a very limited area to work with. You may want to lower the font size, to present more content on screen, but this doesn’t work as well as you might hope. Unless you leave zoom enabled (more on this in a bit), users will be unable to read the content. So either bump up your font size, or use zoom.

Try to design your site it web app to make use of available real estate, and don’t try to cram too much in. Accordions, drop downs, tabs, and other ui elements can, effectively, adding more screen to the screen.

In reddit mobile, I have made use of various elements. Self posts have an expanding drop down, as they do on the main site. Post options use a little pop-up (see the post’s thumbnail) to present options, through an uncluttered interface. And finally, a menu is at the top of the site, to handle various administrative tasks, like login, registration, etc.

Input interface size

This demonstrates large, easy to use buttons, as well as inline links

On a computer, you have a mouse as your primary input device, and can design knowing the user will a well. On mobile, there are various input tools. The most prevalent is a touch screen, however, trackballs and d-pads are not uncommon. A good rule of thumb is, simply, design to fit your thumb. This is working to fit the worst-situation-possible. It ensures that no matter how fat a user’s fingers, they can use your device. Track-pads and other forms of more accurate input will have no problem. And on mobile, large, easy to use buttons, when designed properly, are quite pretty.

For in-line links and other content, don’t give them a special formatting, beyond basic text formatting. Don’t give links a border. The best way is to choose some color that stands out from your text. Apple has a series of guidelines that are typically well thought out, regarding mobile design.

In reddit mobile, I follow most of these guidelines. Interface elements that demand a lot of attention, such as reply links and buttons, are larger, have lots of padding and margin, and have a distinct style. The eye is drawn to these buttons, much like a call to action button. The buttons on reddit mobile use no images, they are purely designed using CSS3. Buttons that get toggled, like the reply buttons, get a special active class, that tells the user the button has been pressed. This continues the metaphor that this is a real-world button. In-line links, often user-generated, have a much less significant style, but are still easy to access.

Fidelity

Mobile displays have fairly high resolutions, compared to their size. Well designed content, particularly visual effects, can look absolutely amazing on a mobile device. Round elements look particularly good on these devices, as well as liberal use of clean gradients. I’m not talking about gradients that change hues (although that can look good), simply gradients that change brightness or saturation. This adds depth to an element, and makes it more interesting, and prettier, than just a flat color would. Chiseled text, a style Apple is famous for, can increase readability on mobile devices (especially in bright environments), and adds yet another layer of pop to your designs. Use text-shadow and alpha-channel colors to achieve this effect. This looks particularly good on buttons, headers, and other important parts of text. Box-shadow, the cousin of text-shadow, is a bit more difficult to use properly, but can lead to really cool effects, such as indented boxes, such as the search box on this site.

Be wary of box shadow on mobile. If your element takes up 100% of the screen, it can induce scrollbars, even if you attempt to disable user zoom. Box-shadow-scale should fix this problem eventually, but it is unsupported on mobile as of this writing.

Don’t go overboard with any of the above, keep style in mind. If it looks bad to you, it will probably look bad to your users. Don’t fall into the fopahs that can come with any of the above, such as overuse of drop-shadows, etc.

On reddit mobile, I use quite a few gradients. Gradients are used in the header bar, every button, the self post expands, and countless other elements. Text-shadow is used to create an embossed effect on the header text, button text, and some links. Box shadow is used to make buttons seem set into the page slightly, and to give pop to some menus.

Speed

Mobile devices are typically bogged down in one area more than anything else: speed. Slow internet connections, weak processors, and more can all contribute to slow web apps.
In mobile apps, it is advantageous to reduce the number of requests to the lowest number possible. This includes reducing the number of images, including sprites, to the lowest amount possible. Css3 makes this tremendously easy. Most images used in sites, particularly those in backgrounds, can be improved or replaced with css.
Using border-radius and gradients, you can make very stylish buttons, and should never need an image. If you need an odd shape, like the famed arrow-button common on the iPhone, you can use border-radius, and not have to make every single button get its own image.

Finally, some good server-side sense is always in order. Use a CDN, such as cloudfront, zip everything (particularly on mobile), and try to minify or reduce the size of files as much as possible.

On reddit mobile, we make use of all of the above. Reddit mobile’s scripts, CSS, and few images are all stored on Reddit’s amazon instances (just like the rest of reddit). We load our jQuery from google, so there is a fairly large chance that it will be cached.

In the future, we would like to save most files using CacheManifest (a HTML5 feature). This FORCES files to be cached, and can greatly increase page times. While there are other methods of controlling cache, such as modifying headers, this is really well suited for web apps, because it lets most of the processing of the app run locally, while it still fetches content from the server via ajax.

Rewards

Developing a mobile app can be quite rewarding. You are presented with a unique oppertunity to not only use CSS3 and HTML5 to their fullest, and not have to worry about other browsers. People use the internet differently from mobile. It isnt just hit-and-run, usually they look to read a whole article, and many other articles, to pass the time, say on a commute.

If you take into account the limitations of the platform, you can really improve yourself, your product, and, most importantly, impress clients.