Introducing Supersteil Mobile

Insight: Introducing Supersteil Mobile

“If we are going to do it, we are going to do it well”

Posted on December 3rd, 2012 by Edwin de Jongh

Don’t follow the hype

People often ask us: "Why don't you have a mobile website? You're a cool interactive company, all the other companies have one, you should have had it running a long time ago." I must admit that I kind of agree, with the emphasis on kind of... 

At Supersteil we tend to focus on details; the little, unexpected forms of interaction and visual aspects of your everyday interface. In the case of mobile websites things tend to get too simple; which we don't like. Most companies simply use a scaled and slimmed down version of their original website. Or, as the current hype suggests, they create a new website that is responsive and, bluntly put, pretty boring on all devices.
It might sound a bit narrow minded, but I prefer to focus on each type of device separately.

We knew we wanted a mobile website. Even though our current site works great on desktops and tablets we realized that it was not ideal on a smart phone. But like I said before, we like things to be a little special. We decided we wanted to make a mobile website that doesn't feel like it's scaled down. It should look and feel like it’s been designed for a specific device. It has to contain cool interactions, it has to be new and unique, but still have predictable interactions to comfort the user. These requirements cost time. A lot of time. Time that we don’t always have...

But with the arrival of a new intern, Edwin, a third year Communication and Multimedia Design (CMD) student from the Rotterdam University of Applied Sciences, new opportunities arose. 

A plunge into the deep end

When I started my internship at Supersteil, I had no idea what to expect. That notion quickly passed though, as Mark (my Jedi master)  presented me with the challenge of designing the mobile version of the Supersteil website. There were no rules, guidelines or creative restrictions whatsoever. The sole requirement was: “Make it awesome!”.

Being entrusted with the entire aesthetic and interactive feel of the mobile website, I didn’t know where to begin. So instead of spending time pondering on how to tackle this project, I just started sketching. I thought of what would be cool to see in a mobile website, what hadn’t been done before and what would definitely feel like a mobile experience.

Research and concepting

After sketching a couple of cool concepts and thinking of fun interaction designs, I started researching some other mobile websites. During my research, which spanned across different internet agencies, online shops, blogs and services, I barely came across mobile variants that were truly, so to speak, ‘mobile’. Yes, they had been designed to fit on your mobile screen and yes, some of them did differ a bit from their desktop variants, but almost none of them did anything special or cool with it.

Some felt like the result of an afterthought, with boring and unattractive design. Some didn’t offer the same content they offered on their desktop counterparts, while others scaled their content either way too big or too small. There were only a handful of mobile websites that I felt were truly doing justice to their platform; combining compact design with interactive touch elements.

After doing my research on mobile websites, I started looking into mobile application patterns. What were the standard uses, what kind of interactions did they offer the user? If they had desktop counterparts, what differences were there in navigation, design and interaction? What could I learn from these applications and how could I apply them for web?

Grasping the essence

While conducting this phase of my research, I came across some great articles on designing the user experience for mobile websites, explaining what to consider when designing for mobile and why it is important to truly grasp the idea of the mobile user. I converged these articles into three guidelines that I wanted to adhere to:

  • Prioritize content
  • Minimize user input 
  • Simplify navigation

Keeping these three guidelines in mind, I began designing the landing page. I wanted it to feel truly “mobile” and make it as easy as possible for the user to navigate. It had to be designed and developed in a way that would immediately make sense to users and would also grasp their attention right away.

Defining the look

Then came the phase of defining the look and feel of the main website. Taking a critical look at elements of the desktop website gave me an indication of what could be re-used and what wouldn’t work well on mobile. I looked into displaying fonts on mobile phones and ways to combine typography with minimal design to create a calm look and feel. I felt the design had to be present, but shouldn’t overrule the content. It would breathe Supersteil while still keeping in mind the user’s needs and time.

After prototyping the initial concept design and talking to Mark and the rest of the Supersteil team, I was glad to see that they were enthusiastic about this approach as well. With the concept approved, I could begin wireframing for both portrait and landscape variants, keeping in mind that the content had to be the focus, and the interface minimal. While doing so I thought of implementing fun interactive elements here and there that couldn’t be found on the desktop version.

For the final design, I created a template with a grid and guides. Keeping retina displays in mind I created a list with margins, distances and font sizes that would look awesome on all pages. Thanks to the strong guidance by Mark and the rest of the Supersteil team, this resulted in a collection of neat, pixel perfect psd’s, complete with interactions and states. After a busy and very productive month, the first stage was complete. Next up was development!

A whole new level

When I started with the development I soon came to the conclusion that there where a lot of things that were new for me. Sure I've worked with AJAX and I have experience in developing for mobile. But to develop a complete web-app for mobile devices is taking it to a whole new level.

To prevent unnecessary bandwidth usage, which is a precious thing especially for users on a 3G network, it was critical that only user requested content was loaded. And since we're pretty fanatic bloggers here at Supersteil, it would be quite cumbersome to load and show all our blog entries at once when navigating to the blog section. The solution? Only show the latest posts and load more posts if the user scrolls to the bottom of the page.

Draggin’ and droppin’

With the accessibility and bandwidth usage covered it was time to pick a job. Don't worry it's not what you think, in fact I'm have a great time here at Supersteil. But for the ‘Jobs’ page I had to build application strips that look and feel like physical strips of paper on a message board. The strips had to be able to drag and drop before redirecting the user to the ‘Jobs’ information. 

The next thing on the list was to handle the different orientations that come with viewing the page on a mobile device. First up was the perseverance of screen real-estate when in landscape view. The page navigation in portrait always stays on top of other content to allow quick navigation, however in landscape this meant that about half of the screen would be filled with the navigation. That’s why we decided that the navigation should move with the rest of the content to preserve pixels.

Technology is always moving on

It was at this point in time that the new iPhone was released, in itself this wasn't a problem because the app was build to be fluid and adapt to a new resolution. One thing that came as a surprise was how the app responded when the browser was put in the new fullscreen mode. While in this mode, the code responsible for hiding the navigation bar increased the overall height of the app to the point that the user had to scroll to get to the content. To fix this I had to combine several CSS3 and jQuery tricks while testing in several iOS devices at the same time, to make sure the app was displayed equally on all screens and orientations.

After several iterations of testing and tweaking the app entered the final phase. Usually I build prototypes and experimental concepts in a test environment. That's why I wasn't used to tackling the smalls things that come with the release of an app. Building this app was a fun challenge because the end result is a real product. One that is in use now. The new Supersteil mobile website!

Check it out for yourself on your mobile device!
ps. Currently only available for iPhone and iPod Touch devices .

Comments on Introducing Supersteil Mobile

Go to the blog overview
Go to the blog overview