Amber Weinberg: Freelance Web Developer specializing in semantic WordPress, Mobile, CSS and HTML5 Development

The Blog

20 Mobile UI Tips For Developers

Posted on 11/20/12 in blog, development about , , , , , , , ,

My talk from HandHeld 2012. I’ll be writing a conference review for Ubelly in the next day or so.

Slide
Intro

Slide
Let’s say your boss comes to you one day and wants you to code a new site that will work across all browsers and devices. “No Problem” you say, because you love responsive design.

Slide
BUT the designer has only given mockups for the largest design. There’s been no consideration for responsive design or mobile development at all until now! It’s up to you to make the decisions on how the mobile site looks. What’s a developer to do??

Slide
Just because you’re a developer, doesn’t mean you can avoid dealing with design! Especially as it falls on our shoulders to provide mobile solutions, it’s up to us to start making smart design decisions.

Slide
Today I’m going to talk to you about user interface design and how you can apply it to responsive design. There’s going to be no code in my talk, but instead we’ll look at best practices, examples and tips on how to make the best experience as possible for visitors to your site – no matter what device, browser or screen size they’re using.

Slide
So what is user interface design? Think of it as in between the actual visual design and the code. It focuses on the user’s experience and interaction of the product – and it aims to allow the user to complete their task as easily as possible.

Slide
What does it have to do with responsive design? Working in mobile and responsive design is more about moving a two column site to a one column, squishing things or making them resizable – there are lots of things we need to be considerate about, and this is where UI design comes in. Let’s take a look at 16 tips to help you deal with mobile UI.

Slide
tip #1: forget mockups!
Developers are designers alike are obsessed with mockups. There’s no set limit on how many mockups you should create for the transitions between the smallest and largest layout – in fact, I prefer none at all. This reduces the expectations of the client and the chance that something you showed them wasn’t doable using CSS and media queries after all. It’s also a lot quicker to code if you don’t have to worry about matching up with mockups.

Slide
However, if it helps, you could make a mockup for the smallest version to show the client, as most will understand that devices between those two will be a blend of both.

Slide
Tip #2: Mockups vs Breakpoints
Breakpoints are different from mockups and are very important. Breakpoints can be at any point between your smallest and largest sizes and refer to when something in your site breaks design or usability-wise. Regardless if these land on a size that an actual device uses, you should aim to fix them all so the site is usable and designed well no matter what size it lands on. It’s impossible to know what device is coming out tomorrow, and since new devices launch almost every week, it’s important the sites looks great at all possible widths.

Slide
Tip #3 Don’t fake native or an OS
It’s important to make sure you don’t fall into the trap of trying to make the website or app look like it’s a native app. Users expect certain functionality and design from native apps, so they’re easily disappointed if your site tries to look the part but doesn’t act like it. Also, think about what would happen if an Android user visited a site that looked like an app made for the iPhone – or vice versa. It would be a foreign and confusing experience for them, as they expect their own native apps to behave a certain way. Your mobile site is on the web – it’s important that it takes the web as a platform into consideration. Make it look and act what it is.

Slide
Tip #4 Content Placement!
Put the most used, or most important information at the top and make the most used actions easily accessible without causing the user to move their fingers a lot. According to Apple’s guidelines, people tend to hold their phone by:

Their non dominant hand and controlling with a finger on their dominant hand.
Their dominant hand and controlling with their thumb
Between both hands, controlling with their thumbs

Slide
Consider what’s important – can you move or even remove information that’s going to get in the way of what the user wants? Take a look at the Boston Globe’s website. They made sure the important stuff was shown as soon as possible – the top mini navigations were removed, the logo was shrunk, the navigation and the search bar combined and the images removed or shrunk. The result is that you’re able to easily and quickly see the headlines, which is what people want to do when coming to a news site. While ads remind on the site, they were beneath the most important headlines, and out of the way.

Slide
Tip #5 Use Columns
Sometimes you can get away with a site that simply collapses on itself as the screen size decreases, going from a 3 to a 1 column – but that’s not always the case. There have been websites where I’ve gone from a 4 to a 2 to a 1 column – think about spacing on your site, which is more important than on a desktop. Sometimes you can even keep your items on 2 or 3 columns in the portrait view of a phone. Keeping more columns has the advantage of making the website shorter and less to scroll through – but a disadvantage as it could end up crowded and busy.

Dealing with multiple layouts takes a lot more time to develop though, but will ultimately end up giving the user the best experience possible.

Slide
Tip #6 Use Extra Spacing
When dealing with responsive design, once the design starts collapsing, the text and content often touches the screen, especially if the designer lined them up via the edge of the grid. This can annoy users as the letters on the edge of the site bump up against the edge of their screen. Plan to give some spacing around the edges. This can sometimes be a pain to do, as you may have to fix a couple of calculations in the CSS, but I promise it’s well worth the work.

Slide
Tip #7 Menus are crucial!
Probably the trickiest and most time intensive part of working responsively is the main navigation – usually because it requires the biggest change. Obviously a long horizontal list of links aren’t going to scale down to fit on our phones easily.

I’ve seen several different ways to deal with menus, but my favourite is the drop down menu. All you do is use the unordered list hierarchy and some CSS to create a lovely dropdown list of links in devices that aren’t large enough for the full horizontal menu. Let’s look at some examples

Slide
Here we have a menu that shares a space with a search bar. I felt the menu was simply too small to make it 100% of the width on the smallest devices, so I kept it floating with the search bar.

Slide
Again, this menu shares space with other items in the smallest device. However, instead of showing the social media icons, I decided to remove those to make room at the top of the site, since those links can also be found elsewhere.

Slide
Care Networks was a bit more difficult to deal with, because the full size site is massive. I actually had to create several different menu states – and take into account that the “start a project” button was just as important as the navigation, if not more since it’s actually the endpoint of the site. You can see that the menu goes from being all in one line, to have the nav items clear underneath the logo – to then moving it to be hidden under it’s own button.

Slide
You could also decide to just have a “menu” link at the top of the website and have it jump to the full list of links at the bottom. I don’t do this method often – but sometimes it’s better than a dropdown menu, especially if there are a lot of items.

We decided with Audible that the slider and lists of featured books where much more important, so in this case we added the navigation to the very bottom. On sub pages, we pared it down even more by removing the search bar from the top and adding a jump link instead, which takes you down to the search at the bottom.

Slide
Tip #8: Choose Words OR Icons
Another important thing about menus (and even regular buttons in general) – you don’t need both an icon AND text. Choose one or the other. Having both is redundant and takes up valuable real estate on smaller devices.

Slide
Tip #9 Reduce Images
I’ve found this to be more of a problem for designers than developers, but it’s still worth mentioning. Images for mobile design can be 50/50 – meaning they’re either the biggest pain of all or not at all. A pain because even if you use CSS to resize the image to 20% of its natural width, the browser still downloads the full size – which means it can take forever to download on a mobile device, which is obviously not as fast as our desktop internet.

There are several ways of dealing with responsive images, but nothing is perfect as of yet. Personally, images tend to not bother me too much because I try to use the least amount of images on the site’s layout as possible – and use CSS3 instead. This way, the only images are actual photos, and most of the time download speed doesn’t become an issue, even if it has to download a 1000px wide photo, if it’s only 1 of 2 photos on the entire page. But of course, this can’t always be the case.

Think about the quality of the photo as you save it in Photoshop. Does it have to be 100%? I never use anything more than 85% quality when saving JPGs – and I try to never save text or layout as an image unless absolutely necessary.

Slide
Tip #10 Retina-smetina
We also can’t forget retina images and the fact we need to save two of everything and serve them up properly. This is a double edged sword – not only is it more work to save two qualities of everything, but downloading the double sized retina version means it takes up even more bandwidth.

There currently isn’t really anything we can do about this – except for ignoring retina, which is what I personally do when developing. Saving images at 85% quality in Photoshop normally renders quite well in retina – and even in the larger retina devices the quality isn’t too bad. This is where we need to make a decision between download speed, or ease of use for the user, and pretty websites. Are the images a lifeline for the site? If not, a slight compromise on quality might be worth it.

Slide
Tip #11 I like Big Buttons and I can not lie
We have to be a lot more considerate of button and link size in mobile than we do for regular sites, because our pointer (aka finger) is not as precise as a mouse is. We also don’t know what a user is doing when they’re using our site. Are they sitting down? If so, they can be a lot more accurate with hitting buttons. But what if they’re walking around a crowded street? Or dealing with a child? These things will make them a lot less able to hit your buttons.

http://bit.ly/SaqMV0

Apple has a fantastic User Interface Guidelines library that has loads of best practices and guidelines for creating mobile apps and sites. It’s free to use and their information is backed up by tons of user testing and research. You can find it at the address on the slide, and is something I highly recommend having a read through.

slide
The Apple guidelines for buttons suggests giving buttons and clickable areas a target of at least 44×44 pixels, to ensure it’s large enough for your fingers to hit.

slide
You should also make sure you give enough space between buttons, especially if it’s a destructive button, such as cancel or delete. You don’t want your users to accidentally hit that instead of the save button. A good practice is to also include a confirmation popup or message before the destructive action actually happens.

Slide
I like to try to make important buttons 100% width of the screen on mobile phone devices, to ensure it’s easy to click.

Slide
Here’s a button I did for Audible, which I made sure stretched even in landscape mode.

Slide
And one I did for an eCommerce shop selling yarn. Big buttons are not only easier to push, they’re also catchier and easier to spot.

Slide
Tip #12 Hover effects
Hover effects are obviously non-existent on touch devices, but most things will still work when tapped on. Dropdown menus for example, will still work when the user taps the top menu item, while a link colour will work when you tap on the link. Hidden content that shows on hover will still show when tapped on – the problem is getting the user to realise these items need to be tapped on in the first place. Make sure you place something visual or make the link obvious for the user, so they know what’s a popup or link – because unlike desktop browsers, they can’t see a visual cue on hover to know it’s a button. While hover does work most of the time, it’s smart to provide a fallback, especially for iOS, because sometimes it takes a couple of taps before the hover event fires.

Slide
Tip #13 Don’t assume the user is sitting around.
Most users are busy when using mobile devices, make what they want to find easy to find

Slide
Tip #14 Change font sizes
Increase line height and font size so readers don’t have to zoom in or squint – make sure your fonts are readable – alternatively, if you’re using super large fonts on the full-size site, make sure you reduce them to fit comfortably on smaller screens. No one wants to read one word per line.

Slide
Tip #15 Zoom Zoom
NEVER disable zooming when writing your meta viewports – you want your readers to be able to read comfortably. You can always set a min zoom for the page to first load, and allow the readers to zoom in or out as they require.

Slide
Tip #16 Enable swipe gestures.
Enable swipe gestures on scrolling items like animations. This makes it easier for users to quickly go through the content without having to try and hit the little navigation circles so common with sliders.

Slide
Flexslider is a fantastic resource for anyone dealing with responsive design. It’s an easy to use slider that’s responsive AND comes with touch/swipe controls for mobile. It also has a ton of customization features and also supports multi images per slide.

Slide
Tip #17 Forms
Forms are probably the MOST boring of all HTML to work on. Let’s face it, they’re ugly and monotonous. But let’s not let that get in the way of good usability. In mobile, forms should span 100% of the width, at least for sizes similar to the iPhone in both vertical and horizontal. And they should be plenty tall for fingers to reach.

Slide
Tip #18 Put search at the very top
Putting the search (or a jump link to the search) towards the very top of the app allows users to skip to exactly what they want. Especially if your site is a large one, users may want to only know your location – or your opening times – or what’s on the menu at the cafe inside the museum. While it’s important to also make these easily accessible via the nav, some users just want to do a quick and simply search.

Slide
Tip #19 KISS
The most obvious, yet the most often overlooked piece of UI advice: Keep it simple. Make it as easy as possible for users to do what they come to the site to do. Don’t bombard them with ads, popups, social media links or any other ‘junk’ that websites are normally burdened with these days. Keep the content front and center, the navigation easy to use, forms quick to fill out and a search bar handy.

Slide
Tip #20 Finishing touches
Something that’s often overlooked, but important for a professional site – make sure you create app shortcut graphics, in case the user decides to save the site to their home screen.

Slide
UI design isn’t too hard when you’re already working off a full website design – instead, there’s just some pertinent differences when working in mobile that we have to pay attention to. These can make a difference between a fantastic user experience and one where people leave the site immediately.

Slide
Outro

You can find a review of the entire conference at Ubelly and a video of my talk on Besquare

Amber Weinberg specializes in clean and semantic HTML5, CSS3, responsive and WordPress development. She has over 15 years of coding experience and is super cool to work with. Amber is available for freelance work, so why not hire her for your next project?

Chat with me about this on Twitter