COM350A – Web Publishing – Fall 2013

The simplicity of a mobile site is often lost these days. I feel as though some web designers don’t even own a smartphone. I try clicking one button to go to the next page and I end up lost in the website because I accidentally clicked something else with my thumb. Having a touch screen is the worst!

It must be hard to design for mobile too, making everything so small, trying to filter through what content is necessary for a mobile device site and what is more suited for a computer based webpage.We live in a world of two-time-screening. Watching TV and surfing the web have become regular activities that go hand-in-hand. The content needs to be grabby and hold attention or the site has lost its viewer. There also has to be more visual and interactive content over text based that is easy to get lost in and uninterested.

Phone software designers also need to think about how they display the content when a smartphone user is on the internet. Cutting the top and bottom of the page off to make room for the phones menu bars is annoying and a waste of space – space that is vital.

Perhaps I was destined to create sites for mobile browsing- one of my biggest weaknesses in web design is maintaining a specific structure and keeping it consistent with the entire page. Most mobile users are not there for the interactive web experience but are there to absorb content, no matter how bland the information may be. Users of mobile data are likely there for one of four specific reasons:

1. To look up and find information: often through a quick scan on a search engine.
2. Explore/play: information absorption at its most basic level, high quality web design is not absolutely necessary, but concise information in an easily navigable medium is key.
3. Checking in or posting a status/tweet/social media update: Mostly conducted through a specific application, where the websites are simplified for the mobile use and to fit on a smaller screen.
4. Edit/Create: This could be the one facet of mobile web use where complex navigation is most needed. If individuals are using their mobile devices to do work, much of it is likely going to be completed on a physical computer, thus web design similar to that of the original web page is necessary to ensure consistency.

Maybe the best and most useful part of mobile web design is the “menu” button which seems to find its way onto most mobile websites and mobile applications. This allows for users to still engage in the content over navigation experience but still access a wider multitude of information at ease from a simple drop down menu.

Designing  a website for a mobile device raises an entirely different set of principles that should be abided by.  When one visits a site on a mobile device they typically are either urgently looking for information, are bored, or feel the need to check in on  something  on the world wide web.

However nearly every cellular screen is significantly smaller than a desktop or laptop screen thereby diminishing the amount of information the cellular user can reasonably comprehend.  “Organizing Mobile,” by Luke Wroblewsi categorized five differences pertaining to mobile web site design.  They are as follows: align with how people use their mobile devices and why. emphasize content over navigation,

provide relevant options for exploration and pivoting, maintain clarity and focus and align with mobile behaviors.

Essentially these differences encapsulate the average cellular users mindset when visiting mobile web sites.  They want their information quickly, and simply without having to sift through lots of navigation.  The ESPN mobile app is a good example of this.  All pertinent information to the viewer is easily accessible on the front page and pulls down menus are available just one click away.

This article was a nice follow up to the previous week’s journal article.  Life I stated before it’s only a matter of time before computers become the dinosaurs !

I was very interested in this article especially the introduction because it opened my mind to the many reasons why we turn to mobile web. The top four reasons listed were for lookup/find purposes, explore/play purposes, check in/play purposes and edit/create purposes. I myself as a mobile user have interacted with my phone because of those four reasons. It is important as a web designer to understand those interaction reasons and design your website based on those four needs.

YouTube and ESPN were both websites that emphasize content over navigation, but handle their ability to pivot and explore the rest of their site through navigation different by providing shortcuts. Properly utilizing navigation systems makes a mobile website much more unique and personalized for users, allowing them to access more information. I never realized how important the “back” button was on a webpage. Something as simple as a back button makes a limited space, for example the screen of your phone, more accessible.

It is also important to make mobile sites simple therefore making the user more relaxed when using them. Overall, understand the purpose of your site and the needs of your users will allow the best and most accessible website to be created.

Since the invention of smartphones (one word or two?), people can browse the web on the go. It’s amazing!!! But, it can make it harder for web designers. I’m learning more and more how if I were a web designer, I would absolutely hate everything besides one browser that remains one size on one computer. It’s so very complicated.

Dividing the uses of mobile websites into separate needs is actually very helpful, and I never would have thought about it. Knowing the purpose of the site can make the design more organized and useful for the user. They also need to be fast and the content is the focus. Visiting a website on a mobile device isn’t for admiring the design of the page, it’s to get whatever they came for. Content takes precedence over navigation, which makes a lot of sense. Navigation can clog up the already small mobile screen, so it’s best to make the site as to the point as possible. Adding extra navigation can get mixed with the browser’s navigation bars, and then getting the actual content can be more difficult.

I like this article because it talks about theory and design, rather than illustrating it. Now that I’ve read this, I can learn how to carry out these tips, since I already have some background knowledge.

“Organizing Mobile” by Luke Wroblewski was similar to last week’s reading in that it provided a synopsis of organization, design and purpose of designing for mobile applications. For some of Wroblewski’s article, I felt like he was stating the obvious. We know that people are using their phones more and more to access the web, there is no need to justify the use of designing websites for mobile applications.

Other than that, this felt like another step forward from last week’s reading. For mobile devices, web designers shouldn’t be focusing on the aesthetics and instead focus on the content. People will already be a fan of a website from browsing it on their laptops or desktops. I know when I’m looking at something on my phone it’s to access the content, not the design.

The mobile site should have a simplistic layout that’s easy to navigate and avoids superfluous text.  As a result, the user will have easy access to the content they want. The BuzzFeed app is a perfect example of this. A simple photo and the headline for the, presumably, list is all that is mentioned on the homepage. This allows for easy scrolling. Additionally, they keep the same color scheme and fonts as their page on a normal computer, which adds familiarity without overdoing it.

I thought that is was great for us to read “Organizing Mobile” by Luke Wroblewski . Since technology is always changing and adapting to many other devices, it’s important to incorporate the web with them so people can access it from any device. And since phone are practically a needed requirement for an adult these days, being able to access the web from your phone is really important. And how little our attention span is these days, we need the quickest and easiest way to get what we want. We don’t want anymore complications then what we are dealing with now.

One part of the article I found interesting was Wroblewski stating infomation from Josh Clark’s book Tapworthy. According to his book, Clark focussed on three critical mobile behaviors:

1) Micro-tasking: something important keeps changing/updating OR There’s something that needs to get done pronto!

2) “I’m local”: an answer needed immediately OR is related to my current location

3) “I’m bored”: Having some free time to kill and need a few distractions the internet can provide me.

Looking at how people today, including myself, are immersed in their phones, I have to say it’s entirely true. Phones have become the quickest way to check up what’s going on in the fabulous world of the WWW. So why not give the internet users what they want all compact and ready in their mobile devices.

Though sizing and adjusting text and such is important to any mobile devise/ small tablet, I didn’t realize how content first and navigation second is a key factor to a great mobile website. If you think about front pages of many sites, navigation is all around and it is left to you to pick where to go for your content. In a mobile site, people immediately want the content there so they can get to it faster. I am a HUGE Youtube fan, so I’m constantly on it on my computer or mobile phone. On the site, navigation is there and clear for me to see, so I know where to go. On my mobile, I’m presented with content immediately; so i can find what I want or stumble upon any other video that may catch my interest. If the YouTube mobile was the same as the site, I’d probably just get frustrated on how I can’t access my content as quickly or even quicker than my computer.

As I’ve stated, technology is changing and adapting to all types of media and devices. So naturally, the web is preferred to be accessed by as many of them as possible. So if there any web designers considering making their website mobile, take a look at “Organizing Mobile” by Luke Wroblewski . You’ll definitely learn a thing or two there.

“Organizing Mobile” by Luke Wroblewski gave a nice overview about the layout, design and purposes of mobile websites and applications. He discussed how mobile design relates back to the user’s mobile experience and why they are turning to their phone to use the Internet. He emphasized how people use their mobile devices and why designers should consider this when going mobile.

One of the biggest takeaways from this article is the need to maintain clarity and focus when organizing mobile websites and applications. It all relates back to the user’s experience. Having a layout with a focus on a certain tasks helps users do what they need to do. Like the Yahoo example, the main focus of the mobile version of email is the area to compose a message. There’s no clutter with navigation items or other content on the page. Having a direct focus for the content of the website simplifies and streamlines the process. Having a focus ultimately helps to cater to mobile users’ behaviors and needs.

So when designing a website to go from a computer to a mobile device, it may be best to simplify the content on the page in mobile format. It’s not only about switching to a more vertical-based layout, but perhaps simplifying navigation or thinking about your content in different ways. For example, my church’s new website (which came out a couple days ago) combines all its navigation items into a top bar that says “menu” at the top for mobile use. Instead of having all the navigation buttons, it simplifies it to have the most important content front in center.

“Organizing Mobile” by Luke Wroblewski is a great article for modern web designers and those who wish to continue down this path in the future. Although it is two years old, I found this article pretty much right on point and not overly outdated. It was refreshing!

The first thing Wroblewski covered was that clear labeling, balanced breadth and depth, and appropriate mental models are very important when designing for mobile devices. However, he also touched on a few other rules that are important to keep in mind but can easily be forgotten. These rules are:

1. Align with how people use their mobile devices and why

2. Emphasize content over navigation

3. Provide relevant options for exploration and pivoting

4. Maintain clarity and focus

5. Align with mobile behaviors

Designing for a mobile device is unique. It can’t be thought of as the same as desktop design. Wroblewski points out that because of this fact, you can’t simply do what worked for you on the desktop and apply that to a mobile device – it oftentimes doesn’t make sense. Instead, Wroblewski emphasizes that you must think about what mobile is uniquely good at and align it with the needs of your customers.

There are three critical mobile behaviors: micro-tasking, “I’m local,” and “I’m bored.”

Micro-tasking: Something important to me keeps changing or updating and I want to stay on top of it. I need to get something done now that can’t wait.

“I’m local”: I need an answer to something now—frequently related to my current location in the world.

“I’m bored”: I have some time to kill and just want a few idle time distractions.

I found that categorizing the reasons why people pull out their mobile devices is very helpful for determining how your own mobile web design should work. You have to connect with your buyer and know when people are doing things, how they’re doing them, and why. Being able to effectively  get inside the heads of your customers naturally aligns your website with real-world needs. It’s also important to remember that time is often precious on mobile devices and downloads can cost money, so get people to what they came for as soon as you can.

I though the “back” button observation made by Wroblewski was really good. I have never even noticed before that some sites or some phones have multiple back buttons. That gets confusing for users and that’s definitely something to keep in mind when designing a website.

The most important subject in Luke Wroblewski’s article “Organizing Mobile”, is his list of five key factors a webpage must have to be an organized web experience for its users. Of those five factors, the most important, to me, is to emphasize content over navigation.

As the author points out, a user is surfing the web on a mobile device in order to check on “frequently updated data” like scores, stocks, or breaking news. In other words, mobile devices are used to get immediate answers when something important is happening or has happened. Once we read about what we heard, we continue doing what we have been doing without navigating that webpage or the internet any further.

To ensure that those viewers are going to their sites, web developers must sacrifice navigation and style in favor of timely, relevant content that will get us their page more views. A mobile site should have a basic layout, devoid of any complicated or unnecessary design concepts that make navigating the page more difficult. If that’s the case, a user will likely search for a more straightforward, simplified page somewhere else, and the original site will have driven away a potentially loyal viewer.