Tag Archives: mobile

Next-Gen Headers for Responsive Design

November 18, 2013 Robin Leave a comment

As users get more and more used to mobile browsing, we webdesigners are keeping up with that trend, making our sites ever more mobile-friendly. And nothing has shown that mobile sensitivity more than the responsive header, which not only resizes, but shifts its design slightly with the screen size.

Before we dig into how to make this happen, let’s look at a couple of examples from around the Web:

Visual Example #1: FunnyOrDie

(Desktop view)

(Mobile view)

See this responsive header in action: FunnyOrDie.com

Visual Example #2: SmashingMagazine

(Desktop view)

(Mobile view)

See this responsive header in action: SmashingMagazine.com

How Do We Make This Happen?

Combine Site Branding and Navigation in One Bar

An iconic site logo/site name and some simple navigation is the most mobile-friendly design choice. But that does not mean that your desktop users have to look at a boring header design! Both FunnyOrDie and SmashingMagazine’s navbars are both more complicated and elaborate on desktop view, with descriptive text added to icons, greater space between navigation links, and more subtle plays of color.

Make Your Header 100% as Wide as the Page, and Pretty Skinny

Make sure your header bar is always 100% of page width, so that it resizes with the screen size. Also, a navbar that is 100-150px tall translates well between screen sizes–it gives the mobile user enough screen space to tap on, while still being unobtrusive to the desktop user’s experience.

Fix Your Header Bar in Place

As described in my fixed navbar tutorial article, a combination header/navbar that scrolls with the user is infinitely more friendly, especially on mobile. It gives the appearance of an app without having to actually make an app for your site, and it makes quick browsing much easier.

Use Icon-Only Navigation on Mobile

Using tappable icons rather than text on mobile screens is much easier and quicker to view, and it keeps the navigation as small as possible (depending on how many links you have). (Notice that both FunnyOrDie and SmashingMagazine use a three-horizontal-line icon to give you access to full navigation.) This can be done using a CSS @media query to switch between displaying text and displaying icons.

Summary

Making a sleek, responsive header is key to making your site mobile-friendly, and it can be done with just a few code tricks! Try these suggestions and see what kind of mobile magic you can work!

Monday in the HTMLab

Making a Sidebar Mobile-Friendly: 3 Solutions

November 11, 2013 Robin Leave a comment

I used to think the sidebar on a website was absolutely necessary–it was a place to hold navigation links, affiliates, site introduction, and all sorts of cool tidbits that I wanted to display on each page.

This was all well and good when we all browsed the Internet using large desktop and laptop screens. But now that many of our visitors could be using tablets and smartphones to view our pages, we need another strategy…because a sidebar on a smartphone screen means lots of zooming in, and the sidebar content just gets ignored anyway.

One reason I haven’t yet posted my blog’s new design is because I’ve been struggling with this issue: how do I make my page look interesting enough on a large screen, without making it almost impossible to view normally on a small screen? Thus, I set out to answer this question for the ages–and I discovered that some fairly simple solutions existed!

Solution #1: Cut Out an Unnecessary Sidebar

If your sidebar only includes a couple of introductory blurbs about your site and yourself, you could potentially get rid of the sidebar entirely on both desktop and mobile views.

These days, many designs feature a single-column layout with navigation across the top of the page in a horizontal bar, which scales down nicely to mobile screens. (Don’t despair, though–you can condense your introductory blurb down into a neat little slogan and still use that above your navigation!)

Solution #2: Move Sidebar Content Around for Mobile

If you’re like me and include blogrolls, affiliates, ads, and other such sitely things in your sidebar, you definitely want to make sure those stay on every page in desktop view. But for mobile, remember that most mobile users are mainly coming to view your content, so you want to make sure nothing else steals the content’s thunder.

Thus, you could dispense with the sidebar and move its content to somewhere else on the page, or on a separate page entirely for mobile users. A fixed bar across the bottom of the page could work for site ads, while a mobile-only page could work for blogrolls and affiliates, and so on.

Solution #3: Make the Sidebar Disappear on Mobile Browsers

Now we come to the solution which involves the most code–but it’s actually really simple once you think about it. If the sidebar is an issue for mobile browsers, why bother having the mobile browser load a sidebar at all?

This is achieved through the wonder of @media queries, which help you target CSS styles and rules for specific media types (like printing versus viewing on a screen) and specific screen sizes (like handheld devices). Here’s how it would work for hiding a sidebar from mobile viewers:

#sidebar {
width: 200px;
float: right;
padding: 5px;
background-color: #222222;
color: #FFFFFF;
}

@media handheld {
#sidebar {display: none;}
}

Here, the @media query encapsulates another #sidebar rule. Make sure you have your outside curly braces in place around the #sidebar display: none rule, otherwise this code will go completely bonkers! (Learn from my fail!)

IMPORTANT!

There’s a slight catch to this method, however–iPhones and iPads don’t recognize “@media handheld” in CSS. So, here’s the workaround:

@media screen and (max-width: 480px) {
#sidebar {display: none;}
}
(This particular @media query can also be structured as “@media(max-width: 480px)”, according to some sources)

Placing This in Your CSS

Make sure to put these mobile-only styles at the bottom of your stylesheet, so that they are the last things to load and won’t confuse the desktop browsers.

Summary

Sidebars need not be a responsive layout deal-breaker! You can make them behave or change them around as you need to–their content and placement are not set in stone. These 3 tips should help you (and me) get our websites mobile-ready with as little hassle as possible.

Robin Makes a Mobile Blog Layout, part 3: Testing Your Layout

September 16, 2013 Robin Leave a comment

Designing a mobile layout and knowing how to code it properly is great, but how does a webdesigner/developer test how a layout will perform on a mobile browser? After all, it’s not quite as easy as testing desktop layouts through your browser before uploading it.

I worried over this as I compiled this series, but thankfully, there are folks out there who have solved part of this problem, developing wonderful online tools that can test your site’s layout and help you identify problems in mobile browsing. The following sites are the best of the best, in my opinion, offering simple and sleek functionality as well as a wealth of information. Simply visit these sites and type your URL in to test how your current layout performs in mobile settings!

W3C MobileOK

This tool is a MUST for mobile web developers–it helps you validate, improve, and ultimately optimize your code for mobile usage. As you can see from the above pictures, Crooked Glasses currently fails miserably at being a mobile-friendly site…I got a lot of work to do. *sigh*

Responsive Design Tool

This simple online tool loads quickly and shows a range of different page widths at a glance, so that you can easily compare and contrast. (Caveat: you can’t click through pages unless you download the free tool from Github, but the download link is provided.)

Screenfly

Screenfly displays your website on many different platforms, mimicking everything from tablets to televisions. Click the various icons to see even more specific screen sizes (like Kindle vs. iPad, or iPhone vs. Android phones); you can even click through your miniaturized site to view different pages!

The Responsinator

The Responsinator gives you a scrollable list of all sorts of mobile devices, even comparing portrait vs. landscape orientation on the same device to show you how your site changes when the device is held a different way. The scrollbars on each individual display allow you to scroll around on your site to see what parts of your site may be obscured to the mobile user.

Closing and Managing Phone Apps: A Cautionary Tale

September 10, 2013 Robin Leave a comment

The following tale is absolutely true, and serves as a warning for anyone who owns a smartphone. Don’t let this happen to you!

Symptoms: An Overheated, Data-Munching, Battery-Gobbling Phone

For months after I got my iPhone in November of last year, I thought that the phone battery life was just terrible and there was nothing I could do about it. It seemed that if I used the phone for an hour straight, I’d lose almost 50% of the battery and have to charge it again. But since most people I talked to had similar results out of their phones, I thought it was just something I’d have to live with.

After a few months, I began noticing that my phone’s Otterbox case had begun to warp, without ever being exposed to high heat (or at least that’s what I thought). The “Home” button became harder to push–I had to align the soft silicone part of the case just right to get the Home button to press down, and in other areas of the case, the silicone no longer made a tight seal with the plastic part of the case. I had been really careful with my phone not to let it spend time in the sun or in a hot car, so I had no idea what was going on.

At the same time, I also noticed that my data usage was going up, and that the phone’s back was often very warm to the touch, even when I wasn’t actively using it and it was set aside on a cool surface. What in the world?

A Simple Little Fix…

About a month ago, I was talking with one of my friends who also owns an iPhone, and he mentioned something about “closing” apps to prolong battery life. “Do you ever close your apps?” he asked. “That might be what’s heating up your phone.”

“Well, yeah,” I replied. “I hit the Home button when I’m done with an app and it disappears, so it’s closed, right?”

“Nope,” he said, shaking his head. “You actually have to CLOSE the app. Lemme show you.” And he double-tapped the Home button on his phone, so that his recently used apps appeared…then he held his finger on one of the icons. It began to jiggle around, with a red minus-symbol circle in its top left corner. He tapped that little symbol–and the icon vanished!

“What’d you do?” I asked.

“I closed the app,” he replied. “That’s what you have to do to really close ’em–otherwise they just keep running in the background. And too many apps running in the background can heat up your phone.”

This was an epiphany to me, as I double-tapped my own Home button and realized just exactly how many apps I had running (almost 30!). I closed each one of them, then checked the phone about an hour later–it was much cooler to the touch, and it had not lost nearly as much battery as I had been used to it losing.

The Story’s Not Quite Over

Unfortunately, though I had seemingly solved the battery life loss problem, I still had an issue with the phone getting very hot very quickly when I used it, and my data usage was still strangely high. This problem took a bit of Googling to fix, and finally I ran across this little file path to view my Usage Data:

Settings > General > About > Diagnostics and Usage > Diagnostics and Usage Data

Once I checked this data file, I discovered that an app I wasn’t even using all that much (RedLaser) was constantly trying to connect to some server and always failing. And by “constantly,” I mean that the file was literally FULL of failed requests–screenful after screenful of them. I was flabbergasted. And it was doing this even when I thought I had closed the app!

Since I wasn’t using the app anyway, I went ahead and deleted it…and for the last month, I have enjoyed regular data usage and regular temperatures while my phone is in use!

Moral of the Story: Close and Manage Your Apps!

If you’re having any of the problems I was having with my phone, try the following solutions:

Completely close all apps when you’re finished with them
Disable or delete any apps that keep using data even when you’ve tried to close them
Keep an eye on your data usage and your phone’s temperature

For more information about keeping up with your data usage, Lifehacker’s smartphone data article gives a range of solutions for any smartphone.

“Closing Apps” Guides for Various Smartphones

How to Close iPhone Apps
How to Close Android Apps
How to Close BlackBerry Apps

Monday in the HTMLab

Robin Makes a Mobile Blog Layout, part 2: Mobile-Friendly Code

September 9, 2013 Robin 1 Comment

Making a responsive layout for mobile users is not just about the design of the site–the code also has to be constructed well. We webdesigners simply can’t afford to be lax about our code, because mobile browsers are less forgiving than desktop browsers. What looks great on your laptop may look terrible on a tablet or smartphone screen!

Here are some important things to remember about coding a responsive mobile layout:

Design and Code for the Smallest Device First

This seems kind of backwards, but don’t design and code your site’s desktop look first. Instead, make sure that the layout you’re making loads and operates well on a very small screen, like a smartphone. If it looks great and performs well on a mobile browser, it will function excellently as a desktop layout, too.

Include the Meta Viewport Tag

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/>

This little tag, included in the head of your page, keeps mobile browsers from super-shrinking your site to unreadable dimensions and making your users have to zoom in to read your text. (Note: this tag should only be used on responsive layouts or dedicated mobile sites, as HTMLBOY points out.) For more information on how to format this tag, check out the Webdesign Tutsplus page.

Keep the Code Simple, Sweetheart

When you’re designing a mobile layout, as I discussed last week, you want to make sure you’re not crowding your design with lots of images, which require a lot of data transfer over small devices’ connections. But you also don’t want to crowd it with clunky desktop-only formatting, or anything else that will slow the page load time down, especially on a mobile device. Keep the code as simple as possible–even if it looks TOO simple to your eye. A simple but effective site will perform much better than a complicated site that’s trying to do too much.

Also, don’t rely on a:hover at all in a responsive layout. Remember, the user’s “cursor” on a mobile browser is their finger, which doesn’t hover without clicking (unless some folks have magical fingertips quite unlike mine, LOL). Thus, drop-down menus and image changes that happen when the user’s cursor hovers over something is not a good mobile design choice.

Set a Maximum Width for Your Responsive Layout

“Now wait a minute,” you might ask. “Why are you worried about a MAXIMUM width when we’re talking about making a layout small and graceful?” Well, if you’re making a responsive layout, that means that the same layout will be served to all browsers, and will expand and contract with the browser’s window size. The layout that looks great at a width of 400 pixels will probably look REALLY odd at 1300 pixels wide–everything will be stretched out and hard to read.

#maindiv {max-width: 900px;}

The above tag, put into the CSS for your containing DIV, will keep your layout from stretching far into the distance on a widescreen desktop. Your users will cheer!

Don’t Hide Content from Mobile Users

Lastly, don’t assume that mobile users only want to see a few articles on your site. If I visit a site while on mobile, I expect to see ALL the content I would normally see while using my laptop. (This is a big pet peeve of mine to see mobile sites with maybe 20% of the desktop layout’s content.)

So, make sure all your content is accessible via mobile, either with a carefully-designed top-level navigation, or by grouping content into navigational pages so that users can scroll through links for just the content section they want to see. It may sound clunky, but it will work much better than simply hiding content!

Robin Makes a Mobile Blog Layout, part 1: Designing the Look

September 2, 2013 Robin 1 Comment

I’ve been getting my proverbial hands dirty behind the scenes this week, grappling with code in order to put together a probable, working mobile layout for this blog. (The main thing I’ve realized so far? It’s a LOT of WORK. LOL)

This is the mobile design I finally came up with, working with the basic color scheme from the new desktop layout I’ve been designing. Its main features:

Site content shrinks and expands as necessary (this screenshot shows how a mobile phone would display it)
Same logo as my desktop design
Bigger font and widely spaced text lines
Simplified navigation
Larger-sized links

But it took quite a while to get this design “right”–and it wasn’t easy to figure out how to manage it. Indeed, I’ve struggled most of this last week to come up with a design that actually looked like a mobile site layout, instead of a hopelessly squeezed version of my desktop design!

The Key: Focus on Readability and Content

I found out while designing this mobile layout that trying to fit all my navigation, my sidebar information, AND my content would just not work. Instead, I needed to make my mobile layout rather sparse-looking by desktop standards:

Keep the color scheme basically the same as your desktop layout, but make sure that there is a lot of contrast between the text color and the background color. High contrast is especially important for readability on small screens!
Only include the navigation that matters to your mobile users; if it doesn’t have to do with your content, it doesn’t need to be on your mobile site’s navigation. (For my blog, that meant that I had to exclude my “Links”, basically.)
Same goes for content. If it’s not one of your articles, don’t include it on your mobile layout. (No sidebar info here!)
Bigger font is actually better on a mobile device–you don’t want to make your users have to zoom in to read your text! That’s why you make a mobile layout in the first place. (For instance, I ended up with Garamond 16px for the body font in my mobile design, and I might even make it bigger than that in the final draft.)
Make headings, links, and navigation very, very clear and very easy to tap on with big fingers. Take it from someone with large fingertips–a link in big font is much easier to tap on than a link in itty-bitty font.
Include clear branding for your site (i.e., your logo/icon); if you can use the exact same logo/icon for your mobile site that you use for your desktop, all the better!

Summary

Mobile layouts have to be simplified, but that doesn’t mean that they are simple to design. (Indeed, you have to be deliberate and careful in your design choices, otherwise your mobile layout will be unusable!) But with a few considerations, you too can make yourself a layout that will transition well to all mobile devices, big screen or small.

(Tune in next week for part 2, in which I will attempt to make this mobile layout a coded reality!)

Monday in the HTMLab

WordPress “Easy Mobile Layout” Plugins: YIKES

August 19, 2013 Robin 1 Comment

These days, more and more people are viewing blog content through mobile means–our phones and tablets have largely replaced our laptops when it comes to simply taking in content. We bloggers must keep pace with these demands when possible; after all, visiting a site and having to re-zoom in to see the text every time you open a new page can be an off-putting hassle. (Take it from me, I’ve run into this annoyance factor even on my own blog!)

But what if you don’t have the time to develop either an app or a mobile-friendly version of your site? The solution seems to be simple: use a mobile layout plugin! It’ll build your mobile design automatically!

Since I am running a self-hosted WordPress installation on my blog, I looked up WordPress plugins which create mobile-friendly layouts. The following is what I discovered while investigating 3 of the most Internet-viewed “popular” plugins…and it’s shocking, to say the least.

WPTouch

Free or Paid: Both options available, but the paid “Pro” option appears to have better tech support overall.

Brief Reviews: Most people get what they’re looking for–a quick, usable mobile layout with a little customization. However, the free version seems to have some issues, especially with themes giving a “too many redirects” error or not serving menus properly to mobile devices. Upgrading to the Pro version apparently fixes this for some users. Check out more reviews on the WPTouch reviews page.

More Information: WPTouch by BraveNewCode

WordPress Mobile Pack

Free or Paid: Free

Brief Reviews: Lots of bad reviews about this plugin not working properly, messing up blog databases, and and being almost impossible to install. Looks like you’d better steer clear of this one…check out more reviews here.

More Information: WordPress Mobile Pack

Mobile Website Builder for WordPress

Free or Paid: Paid

Brief Reviews: This one looked very, very promising–the best of the three I reviewed, in fact!–until I read about all the ads that the plugin puts all over your site, which are very difficult (if not impossible) to remove. Couple that with the fact that this plugin apparently hosts the mobile version of your site on a DudaMobile web address, and this doesn’t seem as strong a contender as I first thought. Check out more reviews here.

More Information: Mobile Website Builder for WordPress by Dudamobile

Conclusion: You’re Really Better Off Doing It Yourself

If you can believe it, this post started out as a way to let people know about great plugins to simplify the process of making our blogs mobile-friendly. Sadly, after considering all the reviews, I can’t in good faith suggest any of these–it’s not worth risking all your hard work just to save time on developing your own mobile-friendly layout. (Of course, this is just my opinion, but after reading about the database problems some of these plugins created, it’s kind of given me the willies about it all!)

I’ve written a few articles here before about developing mobile-friendly designs–these will be helpful no matter whether you want to develop a mobile app, make a separate mobile site, or build a responsive layout that adjusts to all sorts of browsers.

Monday in the HTMLab

Mobile-Friendly Designs, part 2: Separate Mobile Site or Responsive Design?

March 4, 2013 Robin 1 Comment

Last week, we discussed the pros and cons of building a mobile app for your site. But what if you’re not interested in building an app? Are there still viable options for making your regular site mobile-friendly?

In fact, there are two options we webdesigners have for this issue. We can make a whole separate site for mobile devices only, or make our desktop site “responsive” to the types of devices that are accessing it. As we’ll soon see, there are pros and cons to both approaches.

Mobile-Friendly Design #1: A Separate Mobile Site

Pros:

Is designed specifically for mobile browsers, so no extra layout junk is needed
Usually pares down content to just what mobile users will want and need
Keeps you from having to make a layout that is everything to every browser–often cheaper

Cons:

Have to make sure pertinent content is cross-posted between your regular site and your mobile site
No reliable way to know what content mobile users will want to access and what they won’t
It’s one more site to maintain

Making a separate mobile site can be a less time- and money-intensive way, at least at the outset, to build mobile functionality into your site. You build one separate layout that looks good for any mobile user, then put it onto a separate site that only has the content your mobile users want to see. If people end up wanting to see something that only appears on the full site, they can then click a handy “Go to full site” link, as Jakob Nielsen suggests on nngroup.com. All of that, and no more zooming in to read text or zooming out to find navigation! Sounds great, right?

However, building a separate site brings with it its own set of issues. As handy as it is in the beginning to cross-link and cross-post between two sites, it can easily become an updating/maintenance nightmare, since you have to remember to keep updating two sites instead of one. Plus, you won’t really know until after the fact whether you’re providing all the content to mobile users that they want–you’ll probably get a few emails saying “Wait a minute, where can I find this page on the mobile site?” Nielsen suggests making a lot of inter-linkage between the two sites, but some mobile users (i.e., me) can be very turned off by having to click more times to get to content than is really necessary.

Mobile-Friendly Design #2: Responsive Design

Pros:

Layout design looks consistent and functions similarly on all devices, so there’s no “re-learning” that users have to do to use your site
All content is readily accessible through any device
Your web address stays consistent across all devices (no “m.yourdomain.com” or anything)

Cons:

Often difficult to automatically detect what type of device a user is accessing your site through, so some mobile users might get shown your desktop layout, or vice-versa
Some responsive code may not be handled well by certain mobile devices–could render an awful product on some devices and not on others
Navigation may get misplaced way off-screen and render the site unusable on mobile or on desktop

Making a site that responds to whatever device is accessing it is what “responsive design” is all about, as Bruce Lawson at SmashingMagazine notes. Whether somebody’s looking at your site using a laptop, a smartphone, a tablet, or a giant TV screen functioning as a monitor (hey, it happens), a responsive design will ideally look great to everyone and be equally usable. Plus, no worries about interlinking content–it’s all contained on the same site, so when you update your content once, it’s done for all browsers and all devices. Lastly, you don’t have to worry about your web address looking different and possibly confusing users about what site they are visiting.

However, responsive design does require a little bit more work on the backend–it requires that you make a layout that can shrink and grow with the screen size, and a navigation design that functions well whether the screen is itty-bitty or huge. This is a design challenge and a half, let me tell you. It’s like us ladies asking for a man that is tough AND sensitive AND burly AND refined…it’s a tall order to fill. (LOL!) Plus, responsive code may not respond correctly to every browser or device which accesses it, which could lead to a lot of zooming in and out again to read text (something you definitely want to avoid).

My Verdict? It Depends

Unlike either of these referenced articles’ authors, I do not believe that either approach is the definitive answer to designing for the mobile user. I think that your choice really depends on what kind of site you have.

Responsive Design: For Content-Driven Sites

If you have a site with a ton of content, like a high-volume blog or a fansite, I think a responsive design is best. Like I said earlier, you never really know what kind of content your mobile user will want to access, and if you’ve got a lot of content to choose from and it’s your primary site focus, you really need to make sure your user can quickly get to their desired page.

Thus, a site design with as few link hoops to jump through as possible works better–a responsive design that simply serves up the content, no cross-links or cross-posts necessary. Plus, it’s less to update and maintain later, even if there’s more work up-front.

The one concern I have with this is that the responsive design may not “respond” accurately for all devices right at first. But as long as you stay updated on what kinds of browsers and devices need to be catered to, it seems to me that the responsive design still works better for big content-driven sites. (A few of the resources I’ve linked to below will help you toward making a responsive design function better.)

Separate Mobile Site: For Service-Driven Sites

If you have a site that exists mainly to provide a service, like e-commerce or social networking, I believe a separate mobile site is best. When you have a service-driven site, it’s probably already pretty stripped down in terms of content, so there won’t be a lot of excess updating/maintenance issues between your full site and your mobile site.

Thus, a separate mobile site would make it simpler for mobile users to use your service without having to worry about loading the full site’s layout or any extraneous content. (It would almost be like an app in that regard.)

A Final Word

The bottom line? Identify what kind of site you have (content-driven or service-driven), and then design accordingly. I’ve tried to give a good guideline of which to choose in this post, but it’s really up to your discretion as a designer/developer which type of mobile design you use.

But, whichever type you choose, make it the best you can. Don’t rush a half-hearted, ill-thought-out mobile design just to have one–remember that mobile browsing is fast becoming the only way some of us access the Web at all. You want your site to have the best mobile first impression it can!

Resources for Further Reading and Development

Responsive Design

Make Your Site Mobile-Ready Without Creating a Mobile Site
Why We Shouldn’t Make Separate Mobile Websites

Separate Mobile Site

How to Make a Mobile Website: 6 Easy Tips
Mobile Site vs. Full Site

Comparing the Two

32 Examples of Usable Mobile Website Layouts
Separate Mobile Site vs. Responsive Website: Presidential Smackdown

General Mobile Design Advice and Help

How to Create a Mobile Version of Your Website
Mobile Guidelines
Onbile.com (make mobile version of your site easily)

Monday in the HTMLab

Mobile-Friendly Designs, part 1: Do You Need an App?

February 25, 2013 Robin 2 Comments

With much of our personal websurfing now being done through mobile devices (hey, it’s something to do while waiting in line!), many websites have created apps to make navigating to their sites that much easier. In a way, apps have become like bookmarks or favorites for our mobile devices.

But, as webdesigners ourselves, do we need to take the time and trouble to make an app for our own sites just yet? Well, as I discovered while thinking and researching for this article, it depends.

Biggest Reasons to Build an App for Your Site

Your site has a HUGE readership and lots of web traffic per day
More complete control over how content displays on all mobile devices
Offers a simpler way for users to access your site

If you have a blog that already gets a lot of attention, or a website that many people use, an app may be just the ticket to help boost your popularity and usage to the next level. Also, if you’ve studied your website statistics and have seen that a large percentage of your visitors are using mobile browsers to visit your site, making an app could be a great idea. Lastly, if you don’t want to build a separate mobile version of your site, an app can be a simpler, sleeker “mobile portal” of sorts for your content. (Case in point: I use the Beautylish app from Beautylish.com every day to read their articles without loading all the layout graphics and extraneous stuff from their desktop site.)

As a personal example, I’ve considered building an app for this blog to help with my mobile readership, since I update every day and get a fair following on Twitter–people might appreciate a simpler link to my blog. I’ve also noticed how I have to zoom in when I read my own blog on my iPhone, and have thought how great it would be to have a simpler layout and better social media functionality all wrapped up in an app.

Biggest Reasons NOT to Build an App for Your Site

It’s something else for readers/viewers to download and store on their devices, rather than just visiting a mobile-friendly site
Have to keep updating the app to stay current with mobile platforms
Can bring unforeseen complications, like app crashes, bugs, etc., which interfere with usage

If you’ve just got a small personal site, or a site you mainly build and maintain for hobby purposes, creating an app for your site is likely not going to be very helpful for you. An app is one more thing to keep updating, and could introduce more programming issues than you really want to handle, especially for those of us who don’t get into much web programming beyond HTML and CSS. (Even the apps that are “made for you” can have bugs, and they’ll still need updating, too.) And if your app doesn’t offer much more functionality than just visiting your site through a mobile browser, viewers might not opt for downloading it anyway. (Case in point: I downloaded the Google app, but found it to be so slow that I switched back to using Google in a mobile browser.)

Making an app for my main domain, withinmyworld.org, for instance, would be quite frankly a waste of time and effort at this point, since my domain is mainly a personal site and portal to all my other sites. It would be little more than a gimmick at best, since I know I probably wouldn’t update the app all that much (not much to update!).

Bottom Line: Site Size, Topic, and Popularity Matter, But…

If you want to put the time and effort into building an app yourself, or creating one using an online service, make sure you’ve done your homework beforehand. Having an app can be a great asset, or it can be little more than a superfluous gimmick. To me, frequently-updated blogs or sites with very helpful, often-accessed content would benefit most from having an app, and personal sites or hobby sites are better off not worrying about it.

BUT! If you really want an app and think it could rocket your little site into popularity, that is your choice to make. Who knows–if you’ve got a lot of people visiting your site via mobile devices, the app could just make their visits easier, and word-of-mouth advertising would spread it further!

App Creation Tips and Services

If you’re interested in creating an app but don’t necessarily have all the programming skills to do it yourself, here are some sites to check out:

How to Make a Blog or Site into a Mobile App without Programming Knowledge, @ Lifehacker

App-Making Sites

AppMakr (iPhone; Android beta)
AppsGeyser.com (Android)
Conduit (iPhone, Android, HTML5; Windows Phone coming soon)
Genwi.com (Helps you build one app in the “cloud,” and then they make it workable for iPad, Android, iPhone, etc.)
Phonegap (more hands-on app making with HTML/CSS/Javascript; supports iPhone, Android, Windows Phone, BlackBerry, and some others I don’t even know)

Monday in the HTMLab

Designing for Mobile Devices

May 30, 2011 Robin 4 Comments

Are you stuck on how to create a good-looking and functional mobile device layout for your site? Then you’re not alone–when you’re trying to design for a much smaller screen than you ever thought possible, it can feel as though you’re trying to cram your entire website into 480 pixels of space!

However, we independent designers can take cues from social media sites; Facebook, Twitter, and other sites manage to maintain their site’s “look,” while still making their design appropriate for a mobile device. How do they do that? Read on to find out!

Think small for site logo and content

Instead of doing a huge background image or a great big header image with your site name, a simple icon and text declaring your site name should be enough for a mobile design. Better yet, use CSS to style a text version of your logo so that mobile users don’t have to wait to load a weirdly-sized image.

Also, when designing how your content should display, imagine a space about 300-400 pixels wide, and about the same in height. Your content must fit comfortably within that space, in big enough font that mobile users can read on their small screens.

Choose text and background colors that contrast well

When someone is using a mobile device to view your website, you don’t want them having to squint and turn their phone every which way trying to read your content. Make it easy on your users’ eyes! Using a white background and black text is a classic choice, but feel free to choose any one very light color and one very dark color to use.

Use icons rather than text

Whenever possible, change out text links for icons. Not only is it space-saving on your smaller mobile-friendly designs, but it is also less tiny text to read, which will lower your users’ frustration level drastically. (Also, make the icons big enough to tap!)

Make your page easy to tab through using down arrow key

For those who have touch-screen smartphones, they will be able to scroll down with a swipe of their fingertip down the screen. However, you also want to make sure that your non-touch-screen mobile users can use the down arrow on their phones to “scroll” efficiently. Don’t crowd too many links or pics on one mobile-friendly page–that’s just more for the down arrow key to highlight. (This brought to you by a former non-touch-screen user)

Summary

With these tips, you can make a compact, easy-to-read, functional mobile design for any site. It might look a bit bare-bones on your big screen, but trust me, your small-screen users will thank you!