Skip to Content
Home » Blog

Blog

Syndicate content
Flexible Grids – the Swiss Army Knife of Modern Web Sites

The web is changing. With some of the new HTML5 and CSS3 standards now being supported by IE 8 and above, more options are available now than ever before — especially for forward-thinking UI Developers.

It’s hard sometimes to keep these new techniques at bay when they are able to do such amazing things for your clients, like restructuring a web site layout on the fly with a flexible, responsive grid system — one of my favorite being designer Andy Taylor’s (@andytlr) 1140 CSS Grid System

In the spirit of collaborative development, let’s take a look at how the historic Boston Globe redesigned the new BostonGlobe.com using a flexible grid to create an all-in-one web application that scales for tablets, desktop browsers, and mobile devices. Jeff Soderman (@jeffsonderman) of The Poynter Institute has a nice, concise write-up on the Poynter blog.

Catering to the plethora of mobile devices on the market today is a new and evolving challenge, according to Chris Coyier of CSS-Tricks.
“Browser support for media queries is surprisingly decent. Internet Explorer 9 will be supporting it, but IE8 and below do not. If I wanted to deliver the best possible experience in IE 8 and below, I'd either fake it with JavaScript or use anIE specific style sheet and style it in the same style as the most common browser width (sic).”

Implementing Flexible Grids

To really embrace these new standards one must dig in and apply these technologies to their designs. Earlier this summer, I had an opportunity to embrace these new standards when I worked on several iPad applications. As you may know, Safari browsers use WebKit as their rendering engine, making Safari one of the most progressive layout engines in use today.

The joy of working with a WebKit browser (like Chrome or Safari) is that that it supports most of the latest standards and you rarely have to employ fixes or hacks. In addition, the iPad has a fixed height and width for both horizontal and landscape display, so we had a progressive, stable development environment that really allowed us to push the UI envelope.

Immediately after wrapping up these projects I wondered how these technologies could be applied to standard web sites. You know, the ones that have to respect antiquated browsers like IE7.

In A List Apart article in May of 2010, Ethan Marcotte, a fellow Boston designer, coined the term Responsive Web Design. Since then, he’s published a book on the subject and has prompted some very interesting challenges and questions for modern development. 

In the book, Marcotte compares web architecture to traditional architecture, and the new trend of having spaces, like walls, mirrors, and other dynamic construction materials, adjust to building occupants. Have a dinner party with a crowded room of people on a summer night, and then maybe your LCD-enabled wall changes from a warm red color to a cool blue. Some walls are actually able to sense when a room is filling to capacity and adjust to expand the space of a room. As web architects, we can take several cues from the architectural community.

At the end of the day, the web is a very dynamic environment and many budgets have gone overboard trying to accommodate the various entry points to a “web business” or application. From URL redirects, to micro sites for mobile, why choose?

I suggest that a standards-compliant site can be built using today’s technology that not only adjusts its display based on whichever medium the client is using, but also responds to client feedback and allows users to customize their experience with simple browser cookies.

I always found it disconcerting to open a site on my iPhone only to get prompted to visit the mobile site. What’s wrong with the site I’m currently on, and what am I going to miss if I visit the mobile version?

A smart UI Developer should avoid tasking the user with making that decision. It is our job to stay 2-3 steps ahead of the consumer, making their web experience simple and fluid. Today, due in part to Ethan Marcotte’s trend-setting article, we shouldn’t have to ask users to choose between different versions of content when today’s web sites can be scalable, not only in design, but in structure.

Doug Shults
Sep 30, 2011
Mobile, Mobile UX, Responsive Design
Google: Mobile User Experience Now Impacts AdWords Scores

The rising prominence of mobile—and the growing awareness of the importance of good user experience—came to the fore yesterday when Google announced that AdWords ads will be dinged with lowered quality scores if they lead visitors to poor mobile experiences. That’s right—a Google ad that points to a website that doesn’t render well on mobile devices will cost more, rank lower, and possibly not show at all.

Quality Score (QS) is the score Google gives to ads in its popular AdWords program. It’s based on a variety of factors, and impacts how much an advertiser has to bid for an ad to appear, show up in a prominent placement, and be served on relevant searches. Now, one of those factors will be the mobile user experience. In a blog post announcing the change, Google

 explained the impact of pointing visitors to a site that doesn’t work on mobile devices. “A poor mobile web experience can negatively shape a consumer’s opinion of a brand or company and make it hard for them to engage or make a purchase,” noted Google’s David Nachum, the Product Manager for Mobile Ads. He added that “61% of users are unlikely to return to a website that they had trouble accessing from their phone.” This change in Google’s method for calculating QS signals a new maturity for mobile. It also further marks the mainstreaming of user experience from a specialized technical concern to one that is broadly relevant to all marketers. As Google has now signaled again, great user experience is rapidly becoming essential to an effective marketing campaign, across all platforms.

 

Christina Inge
Sep 22, 2011
Google, Mobile, Mobile UX
Do You Need A Mobile Site-Or Just a Mobile-Friendly Site?

Time and again, when the time comes to build a new website, the question increasingly arises: what about a mobile site? Although an increasing amount of web traffic is mobile, the costs and additional development time associated with building a mobile site make this a very real question for many organizations.
Luckily, the choice is not simply between building a separate mobile site and leaving your mobile visitors frustrated.

There is a middle way—several, in fact. The least costly and fastest one is to build a site with a simple layout, minimizing columns, hover behaviors, and other factors that make a site non-mobile-friendly. This can make your design work reasonably well on most recent devices, and can dramatically cut down on development costs, as well as timelines.

Another alternative, one that is gaining ground, is responsive design. Put simply, responsive design is the use of multiple style sheets, or sets of instructions to browsers, that reassemble the layout of a site based on the device being used to view it. One recent much-touted example is the Boston Globe’s new paid content service, BostonGlobe.com. At this week’s Mobile Monday here in Boston, the Globe’s VP of Digital Products, Jeff Moriarty, demoed the beautiful responsive design of the new service, showing how it plays out on different devices, from smartphones to iPads. Responsive design is not a less-expensive alternative to having a mobile site, but it is the wave of the future, as devices proliferate and developers need an elegant way to have sites work across them all.

For the time being, if your budget doesn’t allow for responsive, creating a site that simply looks good, no matter what device someone is using to access it, remains an effective option. Think of these options when designing, and you’ll find that your site may not be mobile, but it is mobile-friendly:

 

  • Look in your Google Analytics or other analytics tool, and determine what percentage of your visitors are mobile. If it’s less than 10%, designing for mobile may not be a high priority, if it means sacrificing other functionalities. Use what you know of your target customers, too: if you’re in retail, you may have a lot of mobile visitors, but if you’re a B2B service provider, you may not.
  • Still in Google Analytics? Good! Now look at the devices people are using to access your site. Remember to test your site on those devices before your launch.
  • Don’t use Flash. It’s not mobile-friendly. If you must use Flash, don’t put any key functionalities, such as email signups, into a Flash page. (This tip is from Senior Information Architect Jim Dalglish).
  • One-column layouts render more elegantly on a mobile phone than three-column ones, so if you get a lot of mobile traffic, you may want to consider a single column layout.
  • What about hover behaviors? These are actions that happen when someone hovers their mouse over something. Try to keep them decorative rather than essential for people so people on mobile devices don’t miss functionalities.
  • Keep navigation fonts large, and choose ones that look clear on the tiny screens of smartphones.

Designing for mobile is challenging to add on to an existing web design project. Creating a mobile-friendly site, on the other hand, is a matter of some tradeoffs, testing, and thought about how people access your site today. Although it does add a layer of complexity to a new site project, it can be an alternative to a full mobile site with high usability with a lower cost.
 

Christina Inge
Sep 14, 2011
Mobile, Mobile UX
Creating Highly Usable Mobile Experiences: Lessons from Real Life Use

Last evening, I had the pleasure of organizing the first mobile and location-based marketing event for an organization of which I am on the board, the AMA Boston. I designed an immersive learning experience for participants, trying out location-based services in a marketing tour of Harvard Square, but I feel that at the end of the evening, I was the learner. We had an enlightening talk by authors Aaron Strout and Mike Schneider on best practices for mobile marketing, enlightening for marketers, even in the B2B space, where technologies such as the popular check-in service Foursquare are seriously underutilized. (Watch this space for a Foursquare promotion next time you see the OHO team out and about). 

The immersive experience before the talk, though, brought up some vital points about mobile user experience. Mobile is still in its infancy, although the much-touted “year of mobile” is apparently finally upon us. But the user experience of customers using mobile applications varies widely, a sign of a medium that is still just finding its legs. Dealing with this varied experience requires some serious thought from UX designers:

  • Actions need to be super-quick and simple for users on the go. People using mobile devices are standing on a sidewalk, looking something up while in a meeting, or waiting for their lunch. Easy to use interfaces, simplified actions (without stripped-down functionality), and speedy app performance are essential to help users accomplish tasks.
  • The learning curve for B2C mobile apps is essentially zero. If users cannot learn how to use an app within the first minutes of accessing it, they will uninstall it. B2B apps seem to have a little more leeway, but the necessity of extremely intuitive use is high for all types of apps.
  • People with different smartphones are still having very different experiences not only with native apps, but also with HTML5-based mobile web applications. Companies can boost the likelihood of word-of-mouth buzz by showing, on their web site and in app store descriptions, that they have thought through and tested performance across all platforms and devices. This gives consumers the confidence to recommend apps to colleagues using different devices.
  • Peer-to-peer support is more important than ever with mobile. People are unlikely to have access to, let alone consult, documentation for a mobile experience. Word of a poor user interface will spread quickly among users, since people are more likely to ask a friend for help than to call company support. All the more reason to give the mobile experience the attention it deserves.
Christina Inge
Jul 08, 2011
Mobile UX
Syndicate content