'Net Features : mobile design

How Touchscreens Changed the Way Designers Design

Michael Garrity — Thu, 23 May 2013 19:10:00 GMT

Ever since it was reported in April that Microsoft is planning on launching a smaller 7-inch version of its Surface tablet to compete with the iPad Mini, Web designers have had to refocus their efforts to accommodate the user experience on a variety of touchscreen devices.

Needless to say, this gradual change from desktop/laptops to touchscreens will have numerous ramifications for designers.

“Top navigation elements common to most websites is tricky to duplicate on a touchscreen device,” explains Jeremy Durant, the business principal at the San Diego Web design agency Bop Design, before adding, “Particularly hybrid touchscreen/keyboard combinations like those found on the Surface tablet.”

The gradually increasing use of touchscreen devices has led to a number of common new design techniques meant to appease all visitors, regardless of the tool they’re using to access a site. For instance, many mobile-conscious site designs now put navigation tabs at the right- or left-hand side of a screen, or even at the bottom in some cases, to make them easier to view and use. Another common trope is the inclusion of a button that lets users jump right to the bottom of a page, to allow more space for important content up top.

More sites are also starting to have “triple-tap” features in the upper corners of their homepages that display menu bars or sitemaps, as well as “pinch gesture” functionality that reloads a page, rotating gestures that (obviously) rotate pages and now include instructions like “Drag this icon to continue” or “Tap here for more info” instead of buttons that say things like “Click here to continue.”

Another important consideration that designers have to take, however, is the size of the various elements on their Web pages. According to MIT Touch Lab, the average thumb size is around 72 pixels in width, and the average finger is anywhere between 42 and 57 pixels.

This is something that designers should be weary of, says Durant, to make sure that the key elements of a Web page accommodate these dimensions. Otherwise, users may inadvertently click on too many links or the wrong buttons, which will end up causing them to become frustrated and disengaged. So, for instance, links should be easy to identify and distinct from other graphic elements on touchscreen.

“Touch-navigation and other impending design changes suggest that, in the future, simple wins out over complex or flashy,” said Durant. “The designer’s first priority must be: On a tablet, mobile device and/or desktop, how easy is it for the users to access important links?”

He then added, “Color schemes, typeface and background imagery should take a back-seat to this essential element.” Of course, the main consideration should still be readability, especially since users hold these devices at different distances while they’re browsing, and forcing them to zoom in or out to better read content makes the process even more laborious.

But the fact of the matter is, the best way to truly discover the effectiveness of your design is just to try it out. As Durant said, “The only way to know for sure that your touchscreen designs work is through rigorous user testing.”

The Web's Most Gorgeously Designed Websites

Administrator — Thu, 09 May 2013 17:00:00 GMT

:: By DJ Miller ::

Stagnant websites simply can't keep up in the continually evolving online world. Those that update often and experiment bravely with an eye to gorgeous, yet functional design are sure to grab visitors' attention. These top sites feature striking design elements that help them stand out at the head of the pack.

BBC – Design Across Platforms

Image via BBC.com

BBC's most recent page design features a look that's strikingly similar to what you expect in a mobile app. Don't be surprised if you're tempted to swipe your finger across your computer screen, even though you don't have a touch-screen monitor. The Web page features eye-catching images that quickly grab your attention and pull you into the stories. The site uses this same design across all platforms including tablets and smart phones.

Elysium Burns – Bold Typography

Image via elysiumburns.com

A diverse choice of eye-catching sans serif fonts gives Elysium Burns a memorable look. Article titles and site headings sit against subtle CSS image backgrounds. The simple white on charcoal color scheme really allows the shape and flow of the typography to take center stage on this page.

Disney – Highly Responsive Video Design

Image via disney.com

Responsive design is essential for any site, but creating a page that's user-friendly on any platform is more difficult for some features than others. Disney's site prominently features high-quality videos, so the challenge of their redesign was maintaining video size and quality across platforms. The result is a simple streamlined design that showcases video beautifully on any device.

Web Design Ledger – Where Serif and Sans Serif Meet

Image via webdesignledger.com

The intriguing look of Web Design Ledger combines both serif and sans serif fonts. The striking difference in font styles throughout the site effectively draws your eye to certain features, such as reader comments. Though this is an unconventional choice of typography styles, it works well in this simple text-heavy layout.

Combadi – High-Impact Images

Image via combadi.com

A growing number of sites now use large, high-impact images on their home pages to draw customers in. Though typography has its place, designs like these allow the eyes to rest a bit and take in something refreshingly different. Combadi features both a large image at the top of the page and a series of smaller images for added eye candy further down.

The Verge – Story Collage Layout

Image via theverge.com

The Verge features a story collage that highlights top features in a clean and visually pleasing way. Each headline is given ample space in its own candy colored box so the titles don't crowd each other out. Though the site has lots of content, visitors don't feel overwhelmed thanks to this simple design choice.

USA Today – Customizable Experiences for Every User

Image via usatoday.com

USA Today's design is simple and clean, making it easy to browse massive amounts of information in a short amount of time. This rigid layout is perfect for a site where readers want to navigate to items of interest as quickly as possible. One of the highlights of USA Today's site design is the viewing option, which allows readers to choose from a list or grid format. This allows for fast and easy customization to suit the tastes of each visitor.

A List Apart – Extreme Readability

Image via alistapart.com

With so many flashy and colorful design options available, it's easy to get swept away in the visual aspects of site design and forget about the finer points of readability. This is where A List Apart truly excels. The headlines, subheadings, quotes, and article body all feature clean fonts chosen with reader comfort in mind. The content itself is well-organized and flawlessly edited as well so your eye travels easily from one short digestible paragraph to the next.

Mea Cuppa Sweets & Coffee – Striking yet Simple Color Choice

Image via meacuppa.be

The stunning color choice of Mea Cuppa immediately grabs the visitor's attention. With a clean palette of black, white, and yellow, the imagery doesn't take away from the content, but rather makes the viewer want to hang around and feast on the delicious visuals for a while longer. This design proves that less is more and simplicity isn't inherently boring.

Postable – Fast Functionality

Image via Postable.com

Postable's purpose is simple. Users sign up for the free service which sends links out to their friends and family asking for updated contact information. Fittingly, the site design for this service is simple and easy to use as well. Three points clearly lay out everything the service does and a short sign up form lets you start in seconds. There's no clutter, no confusion, and no excess in this functional design.

Oliver Russell – Sleek Graphics and Simple Color Choice

Image via OliverRussell.com

Oliver Russell's page highlights his marketing services in a sleek design that speaks to his professionalism and Web expertise. The palette features bold warm oranges and yellows with a bright touch of cyan. Finding what you want is easy so visitors never get lost on this well-designed page.

University of Notre Dame – Strong Graphics and Cutting-Edge Design

Image via nd.edu

The University of Notre Dame handily broke out of the college website mold with their new design. Bold images highlight the campus in a visually enticing way that can't help but draw visitors in. A simple static toolbar at the top makes navigation easy from anywhere on the page. The responsive design looks just as striking on mobile phones as it does on a standard desktop.

Starbucks – Meeting Mobile Needs

Image via Starbucks.com

Not surprisingly, Starbucks found that a growing number of visitors were accessing the site on mobile devices. In answer to the clear need for a better mobile site, they moved to a responsive design that's equally functional across platforms. The images are simple and deliciously enticing while the functionality is everything users need, allowing visitors to find a store or check gift card balances right on their phones.

Web design is a continuously evolving field and innovation is essential for any business to stay at the top. Browsing these beautiful sites will give you plenty of inspiration for enhancing your own page design.

Author Bio:

DJ Miller is a graduate student at the University of Tampa. He is an avid gadget geek who spends most his time writing on anything tech related. His specialty is Web design and optimizing sites for mobile devices and ultrabooks. You can follow him on twitter @MillerHeWrote.

Hooked! Mobile Design Interaction on the Web

Pete Prestipino — Thu, 14 Mar 2013 19:09:00 GMT

You have to admit that the modern “mobile” world is changing all sorts of things about the traditional Web – and not just that we’re now all designing with a “responsive” mindset. It’s bringing some rather creative UI/UX features into the mix too.

A good example of this comes in Hook.js, a rather lightweight javascript file, which provides “pull-to-refresh” capabilities for Web pages. While it has its roots in mobile, I at least expect that it will soon make its way onto websites that need to encourage their users to refresh a page – such as real-time news and information sites, or perhaps even for a few online publishers looking to tack on a couple more additional ad impressions – wink, wink.

There are actually a few other instances when developers were able to take features once thought of as exclusively for the mobile experience and port them over for use in traditional desktop Web experiences. Website Magazine will be profiling some in an upcoming issue but one things remains certain - it’s certainly a rather exciting time to be a designer.

Responsive Design: Not So Simple

Administrator — Thu, 31 Jan 2013 20:30:00 GMT

By Mike DiMarco, Director of Media for FiddleFly, Inc.

Sometimes, a good idea on paper can blossom into a great idea in practice. Other times however, a seemingly great idea on paper can quickly turn into a wastebasket full of unexpected and unnecessary frustration. Such can be the case for those who decide to build a responsive website for their business.

If you’re not familiar with responsive Web design, it is at its most basic a website that is coded to reformat to fit whatever device screen it is being viewed on. While this may seem like a no-brainer solution, responsive design poses quite a few more hassles than it may at first seem.

Before we dig into the little (and a few rather large) things that have people pulling their hair out over their responsive sites, let’s take a second to acknowledge some real benefits. Of course the most obvious upside would be the necessity to build only one site versus building a site for desktop and a site for mobile. On top of this, responsive design only calls for one set of code, so redirects and links are much easier to organize and sync. With many users accessing a site from different devices, having a single site that is consistent can help streamline branding as well.

While all of this may seem like Web design Nirvana, it’s time for the bad news. Simply put, different features are more appropriate for different devices.

Responsive sites can be formatted to include or exclude certain content based on what device they are being viewed on, however the actual content itself remains the same. This means to build an ideal responsive site, designers need to build with mobile in mind first and then work around it. This mindset makes for great mobile versions of responsive sites, but can restrict the creative license designers allow themselves for desktop versions.

Another major issue with responsive design is that mobile users and desktop users have very different needs to consider. While desktop users may be researching your business and comparing prices or features, mobile users are more likely to be looking for things like directions or quick product information. As we mentioned, sites can be designed to show certain features depending on device. Designing specific sites for each platform however, allows for much more efficient and user-friendly versions of each versus a responsive site where small sacrifices must be made in both directions.

This is all by the way assuming that the responsive coding is done properly. Sure we could make this argument for any element that is not executed well, but responsive coding is simply much more difficult than most endeavors and often ends up not fully developed. There are plenty of developers out there doing responsive design, but unfortunately not a whole lot doing it well which is why we see far too often sites with images and text rendering on top of one another, or loading improperly due to a few misplaced lines of code.

If you are just starting a new business and intend to build a very simple site with little content, responsive may be the way to go. However for those businesses that already have a desktop site, redesigning it to be responsive can be very expensive and difficult. Beyond the restructuring that must be done to build a new site with mobile in mind, re-coding the entire thing brings a whole new set of complications.

Responsive sites not only suffer from stunted design creativity, they can also negatively impact your site’s SEO status. Building a separate site for mobile allows you to incorporate a whole new set of information, which in turn gives search engines more material to work with. When building responsive sites, the more content you include the more you risk slowing down or cluttering the mobile version of your site, whereas building two separate sites gives you the ability to incorporate more diverse material without losing any features on either version.

Now, I know some of you may be thinking we’re a bit biased on this whole responsive vs. mobile debate, and the truth is we are, but for a good reason. While we love the idea of responsive design, we see that there are far too many holes in it to be considered the be-all-end-all solution many people think it is. The much more practical implementation of responsive design is to use it in concert with mobile design. Build things like splash pages or individual campaigns to be responsive while your permanent endeavors all have fully specified versions built.

Businesses that are not looking to include dynamic media content, or simply need an informational site for reference purposes, can see great benefits in responsive design, while businesses that rely on more intricate or interactive web designs will see far better results by developing for individual platforms (e.g., desktop, mobile, tablet).

So, if you are among the many few who have the resources and the talent on hand to create responsive, intelligent sites then I say congrats. To the far more of you that aren’t looking to take the huge gamble that your responsive efforts don’t turn into a lingering frustration that will have you starting over again and again, it may be time to look into building for mobile.

About the Author

Mike DiMarco is the Director of Media for FiddleFly, Inc. He has been writing for publications around the Web, as well as film, television and print since 2006. Since 2011, his work has focused on researching and writing about the mobile Web.