Meta Q Goes Mobile

The Meta Q team is very excited to announce the release of our mobile site.

As one of the main developers on the project, I wanted to share a little bit about the process and some of the key elements we put in place along the way. Hopefully some of these tools and tips will come in handy when working on your own mobile sites.

User interface

For our first release, we decided to make Meta Q’s main content mobile friendly first, and then tackle some of the site’s “bonus features” at a later date. Key content included the home page, main category list pages, the individual article page, search results page and any basic information pages like contact, about, etc.  

The next step was working on the information architecture. Keeping in mind the size limitations of mobile screens, I was faced with the challenge of figuring out the content hierarchy for each page.

Take for example, the home page. Without scrolling, ideally a viewer should be able to see the Meta Q logo, the featured article image and introduction, as well as the main category navigation. However, I knew this wouldn’t all fit within the initial screen space. 

So I started researching. Thankfully, there are a lot of online magazines that have gone mobile. In particular, OK! Magazine’s layout was a great resource. Its content layout actually is very similar to Meta Q’s. On the home page, OK! Magazine has a logo, featured article, some additional highlights boxes, search bar and navigation list.  

While some mobile sites I referenced put the main navigation items at the top of the page, I knew that Meta Q had too many categories to squish into such a small space. Not to mention the fact that the article is really the main focus of any of the home, category article list or individual article pages.

Hence, the final hierarchy I settled on was the Meta Q logo > page content > search bar > category navigation and finally footer navigation.

Once I felt confident with the results of my research and had reviewed it with the rest of the Q team, I laid out the wireframes. They were nothing splashy, and just what I needed to make sure all content was present and accounted for. 

Next, I developed the prototypes.

One column layout

One of the biggest differences between the desktop and mobile site is the layout.

While the desktop site sports a multi-columned layout, the mobile is streamlined into one column. In smaller spaces, single-column layouts are much easier for users to read and process. Another great argument for a single-column layout, according to the Smashing eBook #4: Mobile Design for iPhone and iPad, is that not all devices support floats.

Increased link space

There are few things in modern life more frustrating than clicking on a link and accidently selecting its neighbor because the space between the two is too small for you fingertip.  This is why in the footer navigation, I went with an increased line height between each row, even though visually it may seem a bit too spacious. Your fingers will thank me.

I also made sure that each main category navigation button was approximately the same size as the tip of my pointer finger.

Font size adjustments

Thankfully font sizes translated well from the desktop version to the mobile site. Though, I still needed to make some adjustments in order to ensure that all of the content on our mobile site was easy for users to read without having to zoom in. In the name of readability, I increased the font size of the body copy and other small text by 2 pixels.  So for example on the desktop site, the body copy size is 16 pixels. On the mobile, it is 18 pixels.

:active styles

Smart phones don’t support the :hover state.

That’s why :hover should never be relied upon on mobile sites to perform any important functions or reveal any content. However, you can apply the :hover styles to the :active state to add a few flairs to the mobile site.

On the desktop version of Meta Q, when links are hovered over, they either become underlined or change color. While these are just small enhancements, I still wanted to find a way to use them on the mobile site. So I made sure to apply all :hover styles to the :active state. This way when a user clicks on a link on the mobile site, it will be underlined or change color.

Customized form inputs

One of the cool features of HTML5 is tailored input types. 

For the email field on the Contact page, instead of using input type = ”text,” I used input type=”email.” When users click on the email field, a customized keypad will pop up that includes a period and the at sign (@), both of which are key ingredients in any email address.

And while not all browsers support HTML5 attributes, according to Smashing eBook #4: Mobile Design for iPhone and iPad, having the HTML5 inputs won’t hurt anything. The mobile browser will simply degrade these customized inputs to input type =”text.”

For a list of additional HTML5 input types check out the article HTML5 Input Types.

iPhone bookmark

One of the great features of the iPhone is that it allows users to add shortcuts on their home screen to any website. The shortcut looks just like an app icon.

For the Meta Q mobile site, I made a png of the logo that is 57 pixels by 57 pixels. Then within the head tags, I linked to the image using the following code:

<link rel="apple-touch-icon" href="/meta-q-bookmark.png">

Font resizing and viewport

According to the article, Controlling Text Size in Safari for iOS Without Disabling User Zoom, “Mobile Safari/Safari for iOS are optimized for websites with a width of 980 pixels.”

This means that even if your site is set up specifically to handle a mobile phone’s narrow width, your layout will be morphed into a 980 pixel wide site. To override this, author Roger Johansson suggests putting in between the site’s head tags:

 <meta name="viewport" content="width=device-width”>

However, this isn’t the only way Safari likes to be “helpful.”  If a user switches from portrait to landscape mode, once zoomed to 100%, instead of showing more content, the font size just increases.

To override this feature, Johansson recommends first adding an initial scale of 1 to the viewport line of code and then adding a special style to the HTML tag that addresses font size scaling.

For Meta Q’s mobile site, I added within the head tags:

<meta name="viewport" content="width=device-width,
 initial-scale=1.0">

Then in my CSS, I added the following:

html {
-webkit-text-size-adjust: 100%;
}

However, the makers of HTML5 Boilerplate, take the HTML style one step further. The extra styles help ensure IE6/7 play nicely with font sizes that are set with em units.

My final HTML style looked like this:

html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

If you search around different mobile design forums, you will see a lot of people proposing different solutions for the viewport and font size issue. There is, for example, a lot of talk about utilizing:

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

The biggest downside to this proposed “solution” is it takes away the user’s ability to scale. I’m opposed to stripping away user control – and I know I’m not alone in feeling this way.

To read more on this issue, check out the article, Controlling Text Size in Safari for iOS without Disabling User Zoom.

Link to full site

Last but not least, keeping with my mantra of not limiting a user, I added a link to the full site in the footer. This way if users prefer the desktop version, they can easily switch over.

Like the Meta Q mobile site? See something you think we can improve? Let us know!