Mobile First Redesign (Part II)

A couple weeks back, I wrote about my decision to consider mobile first for my upcoming site redesign. And as promised, today I’ll outline how mobile first influenced decisions made throughout the design process.

Treading Lightly

We use mobile to fill in the gaps of our lives. If we have to wait while we are waiting, we’ll likely move on. Similarly to building a bike, it is important for the build to be lightweight without sacrificing performance or aesthetics. Utilizing CSS wherever possible, keeping JavaScript calls to a minimum, and not serving up unnecessary images were all decisions I made in an attempt at keeping the site light and nimble.

Organization

Our behavior on a mobile device is different from that of a notebook or tablet. Perhaps it can be attributed to our limited attention spans, or the fact that we’re mostly on the go when using mobile. As such, it’s safe to assume that we are looking to complete 1 of 2 potential tasks: 1) Avoid boredom 2) Access location or contact info.

Since my site is primarily a personal blog/portfolio, I’m going to assume that most user’s are looking to fill in that gap while they’re waiting in line at the grocery store, or god forbid, while they’re driving. So I’ve decided to give my latest posts the most emphasis in terms of site hierarchy. After that, I’ve included a short blurb about myself, as well as a couple links to other relevant content, such as my portfolio page and contact information.

Navigation

Time is precious. And because this rings (ahem) especially true in the mobile world, I need to get right to the heart of the content as soon as possible. In his book Mobile First, Luke Wroblewski stresses that content should take precedence over navigation. While it would be easy to spec the page out with menu options that run the length of the device, that seems like a waste of both bandwidth and attention span. The goal here is to transport users to rich, meaningful content in as few clicks, or in this case touches, as possible.

After landing on the home page, readers are given a headline and excerpt from my latest post, as well as the headlines of a few of my other recent posts. In addition, I’ve included a short blurb about myself and relevant links to both my work and contact information. Having these content elements on the page accomplishes a number of goals: 1) User’s coming to my site looking for a quick fix are thrown right into my recent posts. 2) I’ve created relevant pivot points for users coming to the site looking to view my work or get in touch with me. 3) I’ve kept the majority of the content on the page, for lack of a better term, “above the fold” without wasting time or real estate with irrelevant menu items.

Actions

Small devices require large buttons. With mobile, we don’t have the pixel-perfect precision that a mouse affords, and therefore must build in a margin for error with our buttons and links. There are standards regarding appropriate button size, however only by building and testing will you be able to accurately measure ease of use. Placing buttons with different functions in close proximity is another mobile faux-pas, as we need to build in a sufficient margin for error in our layout.

Additionally, the way we physically use a mobile device is different than that of a notebook or desktop. Generally speaking, we hold the device in our palm and utilize our thumb as a big erroneous mouse. As such, unless you are blessed with incredible long and nimble thumbs, it is easier for us to reach the bottom half of the screen than it is the top. For this reason, I’ve designed the site so that the menu is located near the bottom of the device, and have utilized basic anchor links to jump from the top to bottom and back. My thinking being: 1) It keeps the header area clean and stays inline with our “Content over navigation” approach. 2) Allows the user to more easily navigate with their thumbs by keeping the menu in the device “sweet spot”. 3) Using anchor links in place of more intensive JavaScript actions keeps the navigation lightweight.

Layout

We’ve already hit on most of what drove the site layout in the previous paragraphs. Keeping the page lightweight, drilling content down to what matters most, giving content precedence over navigation, and examining how users physically use and hold the device are all factors that heavily influenced the layout. As I start marking up the site for larger screen resolutions, I’ll be using media queries to serve additional styles and images, or progressively enhancing the site to deliver an experience that is tailored to larger screen sizes.

Redesigning for Mobile First

Over the past few months I’ve been working towards a site redesign. One of my priorities for the redesign was to create a user-friendly experience across a wide range of devices. While responsive design has been a great innovation, it is often used for pure bling factor, without real consideration for how the content should be adapted or managed on various device sizes. In an effort to overcome such hurdles, I began the redesign with a ‘mobile first’ mentality as pioneered by Luke Wroblewski. For those who are unfamiliar with the term, mobile first is the practice of considering the design first and foremost for mobile or small screen devices, and then building upon that foundation, or progressively enhancing, for desktop and large-screen experiences. To read more on the topic, check out Luke’s book Mobile First available at A Book Apart.

The concept really connected with me on a number of levels. Mainly because mobile is the future of the web. Without getting into hard numbers and statistics, it’s logical to assume that mobile devices will replace traditional computers as the go to device for internet browsing. They are less expensive than a tablet or notebook, more accessible, and for the most part, always with us. The future of the personal computer has arrived, and can most likely be found in your pocket. This is not to evangelize the power of mobile technology, but instead illustrate the fact that mobile is a force to be reckoned with, and if we are not considering the mobile experience, than our designs will soon be obsolete from a UX perspective.

I’ll be detailing my thought-process and workflow for the redesign here in the days to come, but I wanted to release a snippet of the redesign in it’s infancy. It still has a long way to go and should be a viewed as super-beta, but the groundwork is in place and you can get a sense for where things are headed. Additionally, the dev site has been built and styled primarily for iOS and small screen devices, so if possible view it on your iPhone, or scale down your browser window size in Safari or Chrome.

Thanks again to Luke Wroblewski for his insight on the topic and fantastic book, Mobile First.

Ultramontane

I am a big fan of bike and ski movies. Nothing gets you more stoked for the upcoming season than a well done edit. However, my favorite movies are not necessarily the one’s that feature the gnarliest lines or biggest hucks… but instead are the films that encapsulate the soul or essence of the sport. A few years back Sweetgrass Productions accomplished this with Signatures, a powder-ski film shot exclusively during an epic Japan winter.

Now, with bike season just around the corner here in Northern Utah, I’m going deep into bike mode devouring any bike-related content I can get my hands on. Recently I’ve discovered Ultramontane, a collective who’s made it their mission to embrace the offseason. Their videos are extremely soulful, set to great music (Deer Tick in this one), and are a must watch for anyone waiting for the snow to melt off their local trails. Check them out at ultramontane.ca.

Nothing in this world can take the place of persistence. Talent will not; nothing is more common than unsuccessful people with talent. Genius will not; unrewarded genius is almost a proverb. Education will not; the world is full of educated derelicts. Persistence and determination alone are omnipotent.

— Calvin Coolidge

You don’t hear a lot in regards to our 30th President… but I sure like what he has to say about talent vs. persistance. Many regard Coolidge as the country’s first middle-class president. A small-town lawyer from humble begninnings who, through persistance and determination, became President of the United States.

New Work for Mountain Town Music

Recently I’ve been commissioned by Mountain Town Music to create a few posters for their Spring concert series. This one is for the Brothers of the Baladi, an Oregon band that plays Middle Eastern inspired music. I’ve always been an advocate of sketching out your thoughts before touching a keyboard or mouse. While my sketches are by no means complete, having a direction in mind drastically cuts out the number of wrong turns a piece tends to take throughout the process. Above is the sketch that I submitted to the client illustrating the concept next to the final product. They loved it and I was able to move forward with the poster right away.