BlogmyQuery – BMQ

This article is a part of our new eBook Mobile Design For iPhone And iPad (just $9.90). The eBook presents articles on professional design for the iPhone and iPad, including guidelines for the development of mobile web pages. Available in PDF, Mobipocket and ePUB formats.

The industry has evolved in many ways, but one particular area has affected how we build websites to a greater extent than any other. The surge in Web-enabled mobile devices has forged a subculture of visitors who require the adaptation of our websites to meet their needs. While mobile design is still in its infancy (and little primary research on mobile trends exist), we need to observe how this now-critical element of our industry is evolving, and the patterns which exist from current development efforts.

The aim of this article is to showcase the variety of methods in which some of today’s most popular websites provide an interactive and (hopefully) useful mobile experience for their end users. There are plenty of big names which were analyzed, such as Facebook and Amazon, and you’ll see plenty of useful graphs to draw some inspiration from. With statistics and some really interesting revelations on the diversity of modern design, you can be excited about the future of mobile Web design!

You may be interested in the following related studies:

• Typographic Design Patterns and Best Practices
• Portfolio Design Study: Design Patterns and Current Practices
• A Small Study of Big Blogs
• Web Form Design Patterns: Sign-Up Forms

What is This Anyway?

To determine some best practices and common trends within the ever growing field of mobile Web design, a study was conducted to analyze how popular websites deal with important factors relating to the information architecture and design implementations within mobile design. Because this research could have covered any number of variables, it’s important to state that this study isn’t going to answer every one of your questions–but it hopefully may help you to learn a few things!

Figure 1: Mobile design has become an essential component of a successful, compatible website. Smashing Magazine has a mobile version, too.

Of the websites that are measured and accounted for within the study, we not only examined how these websites deal with mobile devices and how visitors are served a mobile experience, but also if they had non-Web features, such as mobile apps, that can play a useful role in the process. In addition, some of the layout conventions, design choices, coding levels, and some useful features specific to mobile websites, have been measured (to their existence, their conformance level, and the method they undertake).

Note: While a great deal of effort has been put into making this study as accurate as possible, the number of variables being considered may result in anomalies. Factors such as websites without mobile experience have been accounted for (as has bias–to the greatest extent possible, during the study).

Examining the Variables

Before presenting the results of this study, it’s important to account for a few of the variables and methodology that came into play to explain how the research and results were formed. Using this information you can hopefully recognize the limitations of this particular study, and if you really feel adventurous, perhaps you could expand on the subject and conduct some research of your own to see how the results apply under different situations. It could make for interesting reading!

Figure 2: The above chart explains the process this study undertook to uncover its results

Regarding the methodology for this study, the protocol begin by selecting an independent group of sites (outsourced) and variables to test against–many of which had never been examined on such a scale (or in such depth) previously. The approval for which variables were included had to meet certain criteria; firstly, the results had to be interesting (and could affect how the mobile design situation is seen), and also had to be statistically significant (we don’t want to state the obvious).

Note: Some variables were dropped from the final analysis due to a lack of conclusive, useful results. An example of this is the support for orientation (portrait and landscape modes); as a result of how browsers deal with the layout, this became a non-issue, seeing 100% native support.

Site Selection Protocol

Picking a group of websites to analyze is, of course, a critical part of the process. To eliminate the potential for bias or for focusing on a niche, it was decided that the top 100 websites depicted through Google’s AdPlanner list would be a suitable candidate. While the list held 1,000 websites and the study could easily be expanded, we used the initial 100 websites to receive a good sample and to provide enough variety for the baseline results. This level is used as the qualifier for statistically significant results.

Figure 3: The Google AdPlanner top 1,000 websites list is the unbiased resource used to study from

Variables (Per Category)

The results of this study wouldn’t be anything without its variables. When deciding what to test against, the focus became twofold: how the mobile experience is activated, and how that experience functions. How visitors are directed to a mobile experience became worthy of attention due to the increasing number of implementations that exist. Secondly, it was vital to test those pages to ensure they accounted for speed, bandwidth, display size, touch screens, and other best practices.

Figure 4: Plenty of variables were considered to give you some informative results to learn from

Margins for Error

As with any study, there is always a potential for error or bias to occur. To avoid as many of these issues as possible not only were the websites independently sourced, but all testing was undertaken on a desktop machine, several handheld devices, and a number of emulators (this occurred on every website). Following this practice reinforced the results (avoiding erroneous numbers), and the testing was verified on two separate dates to ensure that the experience resulted from consistent practices.

Figure 5: Emulators were used to expand the number of physical devices included

And Our Survey Says…the Results

Now that all of the basics (as to how the study was undertaken) have been explained, it’s time we get down to the really interesting stuff–the results! You should be prepared for plenty of charts and graphs, and some of the results may be really surprising. We’ve broken down each type of result into its own subsection and have provided various ways the results can be interpreted, so hopefully the findings of this study will be quite apparent. Without any further delay, let’s get down to business!

Method of Access

Within this test it was important to establish whether a mobile experience was made apparent to a user immediately. When a user proactively visits a website they want to be made aware that their device is either supported, or that the regular website will load. In this test we not only examined whether a redirection or device detection occurred, but also if the mobile experience was provided on the standard website (rather than a subdomain), and if a regular PC could switch to the mobile version too.

Figure 6: The proportion of automatic redirects against desktop websites with optional mobile support

Figure 7: The distribution of websites which implemented a mobile design on the WWW subdomain

Figure 8: How mobile-friendly websites dealt with desktop PC users trying to access the mobile website

Figure 9: While Amazon’s .mobi website stays mobile friendly, the primary m.amazon.com redirects PC users to the original website.

While the number of websites that employed a script to detect and redirect visitors to a mobile experience wasn’t as high as one might have expected (as many believe that the mobile website should come first to boost loading times), an interesting trend occurred where all but one website (answers.com) employing a mobile version of the experience (on the WWW subdomain) forced the redirection of PC users back to the desktop view without allowing entry to access the mobile edition (if they wished to).

Mobile TLD Usage

This second test aimed to determine the use of TLD conventions in mobile design. In order to keep the scope of the results as strict as possible, only subdomains (such as m.) and the .mobi TLD were considered (along with dedicated mobile websites). As such, directory paths on the WWW domain such as “/mobile/” were not considered. The possible implications of this result could showcase the popularity for the .mobi TLD, and trends which may exist in the use of subdomains on mobile websites.

Figure 10: The distribution of mobile TLD subdomains, including the level of extension popularity

Figure 11: The number of websites which offered no mobile-optimized experience in any form

Figure 12: A graph showcasing the number of subdomains supported per website (on average)

Figure 13: The levels of which WAP- or WML-enabled devices are supported or offered access

Figure 14: The percentage of websites which redirect the user to a separate mobile TLD

Figure 15: PayPal makes use of a mobile website that uses the m., mobile and .mobi TLD domains

Interestingly, while many sites offered some form of mobile experience and some redirected the visitor, the use of .mobi extensions was much lower than expected. In addition, an unusual trend made itself apparent. Unlike other nations’ mobile websites, Asian ones trended toward using “3G” in preference to “m” or “mobile” (as used elsewhere). It’s worth mentioning in addition that only Apple devices were lucky enough to receive a dedicated website using the “touch” or “i” subdomain.

Mobile Phone Apps

While this test was not so much about the type of code rendered in browsers, it seemed prudent to determine how many websites in the surveyed list provided a mobile application for devices such as iDevices, Android, or Blackberry. The results of this test simply look for the presence of a mobile app; the platform itself is not taken into account. With so many apps having Web connectivity, the results of this test really push the barriers to access in finding how mobile-friendly a website is.

Figure 16: The number of websites that had mobile phone-specific apps (for any platform)

Figure 17: The percentage of websites with a mobile app, but without a mobile-friendly website

Figure 18: The Internet Movie Database has a mobile website and an iPhone app to further improve the mobile experience

While it’s not surprising that many of the top 100 websites had a mobile app, due to the popularity and the widespread use of their services, what did become apparent and rather interesting is that some of the listed websites which did not have a mobile-friendly website (in any form) still had an app. This particular trend seems to indicate that the transition toward a mobile-friendly set of services, is down to the heightened demand for apps (which unlike mobile websites, have no fallback to function on).

Average Loading Time

In the next test, we felt it was important to measure the loading times of each website to see how mobile experiences account for the bandwidth restraints and temperamental speeds of the average Web user. For the purposes of this study, each of the times were registered over a Wi-Fi connection (not a 3G or Edge stream due to some emulator usage, to ensure balanced results) and were done using an uncached format; therefore, the loading time would be accurate to include any external resources.

Figure 19: The highest, mean, and lowest loading times as calculated from an uncached “cold boot.”

Figure 20: The percentage of websites requiring more than 10 seconds loading time on a Wi-Fi connection

Figure 21: The percentage of websites requiring less than 3 seconds loading time on a Wi-Fi connection

Figure 22: YouTube had one of the fastest loading times for any mobile-oriented website

While caching will produce substantially quicker loading times, the results were fairly conclusive that the loading time of each website was pretty evenly spread, with only a small number of websites having load times of over 5 seconds (often in such cases it was a result of slow server response, rather than of the physical content being transferred). As visitors obviously don’t want to wait for long periods of time to get their data, a speedy and effective loading time has become critical to the design process.

Home Page Asset Size

Along with the time it took to load a page, in equal measure it immediately became obvious that the size of the files and any loaded external resources should be measured. With many mobile Internet plans having capped services and international browsing potentially becoming prohibitively expensive (by the megabyte), it seemed only fair to determine how each website was optimized and whether the amount of uncached data loaded was as small, or big, as a regular desktop-oriented website.

Figure 23: The highest, mean, and lowest file (and asset) size as calculated with caching turned off

Figure 24: The percentage of websites with a total uncached asset size of more than 100KB

Figure 25: The percentage of websites with a total uncached asset size of less than 25KB

Figure 26: Softonic had the largest file size of any mobile site — quite a surprising result!

The results of this test are rather interesting. While many websites (especially WAP-oriented ones for less capable devices) required less than 25KB to function, which seems like an acceptable level–a large number of websites supposedly providing a mobile experience required over 100KB, some even as high as 0.5MB! More interesting is the coincidence that the percentage of websites that have asset sizes of fewer than 25KB, matched (exactly) the percentage requiring over 100KB.

Doctype Declarations

When producing a website, one of the initial questions we ask ourselves is, what language or version of that language will best meet our contents needs. The debates about HTML vs. XHTML have been endless, and as many mobile variants exist (the mobile profiles for XHTML and WML), it became apparent that statistics related to the types of DTD most often used could be of benefit to readers. This test therefore examined the Doctype of the front page to see if any patterns of usage exist.

Figure 27: The distribution of mobile website Doctypes, based on language versions and profiles

Figure 28: The percentage of websites using a mobile-specific profile in preference to desktop profiles

Figure 29: The percentage of websites that support both a WML and full XHTML experience

Figure 30: Dailymotion’s iPhone friendly website was one of the few leveraging HTML5

The results show conclusively that XHTML is currently more popular than HTML (or HTML5). This could be down to HTML’s lack of a mobile profile (used in most cases), though it can be noted that many smartphones supported HTML and XHTML. In addition, the spread of mobile vs. desktop profile usage was fairly similar. This questions the need for mobile profiles, if the full specs are supported. In addition, Facebook’s iPhone-friendly website was the only one which failed to provide any Doctype at all!

Code Validation

With the semantic Web and the need for our industry to maintain standards, this test followed an earlier study by Jeffrey Zeldman in which a large number of websites were put through a simple “pass or fail” test against validation. While Zeldman’s research focused on the Alexa top 100, this piece of course used a different set of data. While standards aren’t the be-all and end-all of design, this test was included to provide additional comparisons as to the stage conformity to semantics were at.

Figure 31: Distribution of website validation (in the case of CSS, proprietary properties were ignored)

Figure 32: The percentage of top 100 websites with a front page that validates against the DTD chosen

Figure 33: The MySpace website wasn’t unusual, in that its source code didn’t validate.

Because this checkpoint focused only on the front page of mobile-friendly websites, the results are not as complete as they could be. They do instead provide a good indication as to the care being given to mobile experiences. Unfortunately, the results seem to correlate with Zeldman’s research in that the overwhelming majority failed to meet the standards for the DTD they chose to conform too. This seems to reinforce the fact that design is more important to those designers, than optimizations or quality.

Code Separation

The next test that was carried out links quite heavily into a few of those that were previously carried out. The separation of structure, style, and behavior has been shown to have benefits in reducing file sizes (due to avoiding repeat coding, and to cache advantages). It therefore seemed right to see not only if websites did separate their style or behavior, but also if they took advantage of CSS3 or jQuery in the mobile design to provide a more dynamic behavior within the website layout.

Figure 34: The percentage of websites using embedded inline style rather than external files

Figure 35: The percentage of websites using external CSS2.1 or CSS3 within their designs

Figure 36: The percentage of websites using external JavaScript or jQuery within their designs

Figure 37: Wikipedia makes use of the jQuery library within its mobile-orientated website.

While you would have thought that most websites would immediately break the style and behavior from their mobile pages in order to improve performance, a moderate number of the websites did have all of their code directly tied into the page. In addition, only a rare number of those mobile websites took advantage of the jQuery framework, and an equally small number made use of CSS3 media queries to dynamically scale the layout. The numbers for CSS3 usage were, predictably, similar to HTML5 usage.

Font Family Types

Typography is an essential element of the Web, and of how information is visualized. This particular test was created to not only see which Websafe typefaces are being implemented on the Web, but to see what font families are being used. In addition, any websites which rely on the default typefaces by not providing a font stack (or which have a stack with multiple typefaces), would be noted. The elements for which this test was created were not only based on headings, but on all manner of content in the page.

Figure 38: A distribution showcasing the typefaces used within the primary font stack

Figure 39: The percentage of mobile designs with no font stack declared (using defaults)

Figure 40: A graph showcasing the number of fonts declared within a family, per website

Figure 41: m.naver.com was slightly more adventurous with non-Websafe typeface usage

The results are quite surprising. In every case where a font family was declared, the category of typefaces used was always sans serif (for both headings and body text). In no instances did serif or another classification get used, and in some cases no font family was declared at all (which could be due to inconsistencies in available fonts for such devices). In addition, the number of occasions where no font stacks were built–resulting in the use of system defaults alone–was fairly significant.

Heading Contrasts

Since the evolution of the cellphone, the ability to have color screens with as much depth and clarity as a desktop PC (using high definition graphics) has increased the ability for us to give our headings and content the colors of the rainbow, both in the foreground and in the background. This test was added to the study in order to see if any trends existed, the range to which color is used within headings, and to determine whether mobile websites made use of background effects such as gradient colors.

Figure 42: Showcasing the number of colors used within the foreground or background of headings

Figure 43: A distribution of websites using a black foreground or white background in headings

Figure 44: The percentage of mobile websites using a gradient background within a header

Figure 45: 56.com made use of a wide range of colors and contrasts within it’s headings

As you may have expected, the majority of websites showcased in the list made use of either black or white as the primary colors (in certain cases, shades of grey were used). This stands to reason as a method to keep the contrast ratio high on small screen devices, in order to boost the readability of the content. Another trend uncovered was the preferred use of gradients within the background of headings to give them an added layer of texture, instead of using solid colors or an increased text size.

Body Content Contrasts

The ability to showcase color in our designs is central to how we subtly influence our visitors. Carrying on from the previous test targeted at headings, this one involved examining the colors used within non-heading level elements and determining which colors they used. As this has a big impact within accessibility and the general scope of design, a mixture of visible foreground and background variants were recorded (though as with the previous test, the results were limited to the front page).

Figure 46: Showcasing the number of colors used within the foreground or background of body content

Figure 47: The percentage of websites using a black foreground on a white background in body content

Figure 48: eBay uses a one-paneled black and white contrast ratio for the body text, like most websites

Within the previous set of results for headings, black and white were shown to be dominant within the text in order to maintain a visible level of contrast. This set of results, as you might expect, follows the same trend and uses less additional colors in the palette. While the color contrasts were only built up from a sample of each website’s front page (and then contrasted against each other for the comparison), the results clearly show that a sensible approach to text visibility has been maintained.

Authentication Required

Many places require visitors to login before full access to a service is granted. On most desktop websites, a bunch of information is provided without a user needing to be registered (explaining features or contact details). However, an interesting trend seemed to exist in which mobile users were expected to have an account and know what the service did, as if the mobile website were simply a bonus feature of the service (thereby only offering a login form). The aim of this test was to see if this was the case.

Figure 49: The number of websites requiring the visitor to login before accessing pages

Figure 50: Facebook requires you to authenticate before accessing the website

While it’s understandable that some websites do not require users to authenticate themselves–and this means that the number of recorded “forced logins” will be drastically reduced–the results of this test are quite shocking. While it should be considered bad practice to require logins on a website without any description of the service being present (for mobile-only traffic), a number of popular websites which were contained within the top 100 list proved positive for doing this, as they had no useful site information!

Returning to a Full Website

The next test depended entirely on the mobile website’s ability to follow common requirements and return the visitor back to a non-optimized website upon request. While a website’s mobile experience will be enough for some, it’s important to realize that some people may not adjust well to new a UI or may request functionality that only exists on the main website, and offering a fallback mechanism is worthwhile. The test also aimed to uncover any naming conventions used to represent this link (if one exists).

Figure 51: A graph of the various naming conventions used in links toward a full website link

Figure 52: The percentage of websites which do not have a link returning you to the full website

Figure 53: Daum.net allows gaining access to the full website by clicking the “PC Version” link

In the results, some websites offering mobile versions of their services used common words in their links to indicate returning to the main website, such as “full site” or even “desktop version.” In these cases, no common preference could be found even though usage was spread fairly evenly. What is quite surprising however is that many who force-redirected visitors to the mobile website, refused to link or to allow access the full website. This in turn limited the ability of mobile visitors to access some services.

Navigation Conventions

This test was focused upon what could be considered one of the most important elements of a website. A successful navigation scheme can be the difference between an easy-to-use interface, and a complex and potentially unusable website. When carrying out this test, four types of navigation conventions were checked as to whether they were being used on the home page (most sites used more than one): text links, icon-based navigation, image links, and special menus (such as dropdowns or panels).

Figure 54: A distribution of websites making use of text, icon, or image-based navigation styles

Figure 55: The percentage of icon- and image-based navigation against conventional text

Figure 56: The percentage of websites which employ the use of menus (or content on demand)

Figure 57: HP’s mobile website enlists a menu to determine your country of origin

The results of this test were fairly conclusive in that every single website (as you might imagine) had standard text anchor links, though some menus were formed of plain text. In addition, image-based menu options were quite popular and were actually used more often than icon-based navigation–which, for devices that depend on icons representing apps or services, was quite a surprise. Special menus also saw some popularity, especially when used with content-on-demand scrolling mechanisms.

Home Page Link Ratio

Having a relatively small amount of space can be a real problem in mobile devices, and therefore the potential for confusion as to navigation options, and how many links are provided, can potentially increase the difficulty for users to know the extent of where their choices will lead. If a website has too many links (or too few), the choice can quickly overwhelm a user’s sense of perspective. As such it seemed worthwhile to see how many options were provided in the form of links on a single page.

Figure 58: The number of websites using a small, medium, or large number of links on the front page

Figure 59: The percentage of websites using a large number of links as a result of a menu convention

Figure 60: 2345.com has loads of links within its home page, but is that really a good thing?

When testing the websites, the results were categorized based on the number of links that existed in the front page of a website (these were labeled as small, medium, or large as per the link ratio). For the websites being measured, the results indicated that fewer links were visible on a mobile website than on the desktop variant (even when complex layouts were used). This seems to follow conventions, in that a reduced viewing space should hold less information to avoid unnecessary scrolling, and to reduce complexity.

Golden Image Ratio

Images on a mobile website can be a tricky affair, as these devices often require more bandwidth than anything else and therefore can reduce the loading times. Within this test, the trend of using small, medium, and large as a representation of the number of images on the page were used, similar to the link testing. Primarily focused upon the home page, the amount required to fall into each category was reduced as most websites will naturally hold more text links than images (per page, on average).

Figure 61: The number of websites using a small, medium, or large number of images on the front page

Figure 62: The percentage of websites using a large number of images resulting from icon navigation

Figure 63: The percentage of websites using a large number of images resulting from image navigation

Figure 64: Russian Mail.ru uses icons and images to highlight specific link usage within the page

As you might imagine, on mobile websites the results backed up many assumptions that mobile websites will have not only fewer images on the page, but will have smaller images presented on the screen (to match the kind of experience available on small screens). This in turn helped reduce the file sizes in earlier tests (and the speed benchmark). What makes this result particularly interesting is that websites (such as Flickr) which oriented around images, also followed this reductionist trend.

Link Click Region

The purpose of this test was to go beyond the mere presence of links (and images with links) and to examine how large the click region actually was on the page. With mobile devices and small screens supporting touch sensitivity, there is a need to keep link click regions as large as possible to ensure the usability and accessibility of such devices (to help with big, imprecise fingers). The scale used followed small, medium, or large, and focused upon the link click’s size compared to other elements on the page.

Figure 65: A graph with the average size of a website’s link click region (small, medium, or large)

Figure 66: The percentage of websites with a large number of links, images, and large click regions

Figure 67: Flickr uses image links to provide a more visible click ratio, for easier usability

The results of this particular test were evenly spread, showcasing a good number of websites using large- to medium-sized links that ensured navigating could be accomplished without an accident occurring. While this trend was especially present in more image-oriented websites (as linking often occurred in image thumbnails), there was also an interesting trend in which Asian or Russian websites were more likely to have smaller click regions (fewer characters in words also reduced the click region further).

Block Placement Ratios

The next test looked at the visual layout of the page and examined how the design was broken down into either physical or visual blocks of information. It’s worth stating that all of the websites measured used a single column layout, but that the way in which links and segments of content are split may give the visual indication of separation, which was worth examining further. As mobile websites require a lot more scrolling than desktop websites, the separation of blocks becomes more critical to visual identity.

Figure 68: Distribution of horizontal elements (columns or table cells) within the viewport

Figure 69: Distribution of vertical panel segments (headings or separated rules) per page

Figure 70: The highest, mean, and lowest range of blocks, both in column and panel distribution

Figure 71: The Zol website makes use of visible blocks, which separate content by heading

Interestingly, while the majority of websites held no horizontal panes (including table cells, navigation links, and other side-by-side elements), a number of websites defied convention and had anywhere between two and eight points of reference within a single line on the viewport. This visual separation was also backed up by how a number of websites had vertical breaks, which split the content into separate sections. Most mobile websites’ readability was increased due to such content organization.

Scrolling Experience

The final test was included as a representation of how scrolling is experienced within the mobile website. The variables analyzed included the number of fingers required to initiate a scroll (as when content scrolls using an overflow, two fingers rather than one are required), and whether the window supported the fancy flourishes of jQuery, JavaScript, or CSS3 in providing paneled scrolling–where panes of content would rotate at specific intervals, or sections could be scrolled by request.

Figure 72: The percentage of mobile websites using paneled navigation over conventional scrolling

Figure 73: The percentage of overflow-based scrolling in preference to a full page scrolling effect

Figure 74: Yahoo splits it’s content into several panels which can be activated on-demand

The results of this test show a general lack of paneling in general (which is representative of the lack of “flourish” scripting in most mobile websites). This may have been partly due to the nature of the websites being studied (portfolio or showcase websites are more likely to have paneled mechanisms). What is interesting however is that to increase the simplicity of the designs (as none of the sites used overflow text), they also maintained a liquid layout to reduce the complexity of required scrolling.

Going Beyond the Basics

While the sample used did constitute a wide array of Web presences, it’s worth noting that different niches may produce varying levels of results. For example, a study of the same variables upon websites which primarily act as a designer’s portfolio (as denoted in the results) will obviously account for different usage needs, and the experience may therefore vary. That said, the trends which the websites employ do bear a resemblance to many others (and therefore can be deemed as reliable).

Figure 75: Different websites will follow different trends, but they still have comparative similarities

To ensure that the results were not simply a result of the top 100 websites’ own popularity bias, an extra 10 websites were browsed too (their results weren’t logged as it was an exercise of conformance) in order to see the accuracy of the top 100 findings. Within these were a mixture of varying website types, but the overwhelming majority of websites followed similar practices, or made changes which would logically make sense under the usage scenario. Therefore, the trends do seem to apply consistently.

Note: In addition to the above, it’s worth stating that a couple of the websites within the top 100 listings were either subdomains, or international versions of a website which has already been mentioned. While this could prove an issue for repeat conventions, the results varied enough to qualify their inclusion.

Common Factors at Play

The common factors which were widely implemented included the trend of using scripts to redirect mobile-friendly users, in preference to giving visitors a choice (which is interesting, as it constitutes a double-edged sword in terms of usability). In addition, the trend of subdomains also followed a well-trodden pattern in order to be recognised easily by end users. A final example, which showcases the common factors, is the unfortunate issue that few of the websites’ code validated!

Figure 76: Some websites actually generate their mobile layouts using automated tools like Mobify

Models for Other Genres

Expanding this study across a different cohort of website types may have varying differences as to how trends are implemented. Examples include the increased use of CSS3 and “flourishes” in portfolio websites, a reduced number of mobile apps on small business websites, and increases in the amount of required authentication if the study were applied primarily to social networks. In addition, if a website is more content-focused (like Smashing Magazine), an increase in file sizes will be an obvious side effect.

Figure 77: Professional designers such as Simon Collison may use CSS3 media queries to account for display sizes

Potential Improvements

Taking this study forward, improvements could be made. While the websites were tested using a range of real mobile devices including an Apple iPhone4, a Blackberry device, a Nokia device, a phone using WinMo, and a couple of phones using Android, a greater level of compatibility could be established if an increased number of devices were used (excluding emulators). In addition, a larger range of websites may boost the general accuracy of the results (such as if all 1,000 websites were tested).

Figure 78: Additional studies could be undertaken on particular niches, like newspaper websites. Example: The Guardian.

The Future of Mobile Design

As interesting as these results are, hopefully they will inspire you not just to follow design trends, but to seek them out. While the Web may still be in its infancy, mobile design is literally only a few years old. This means that trends will likely evolve ever more rapidly, as more usability studies and additional research are carried out to determine how user needs are being catered for. The future of mobile Web design is an up and coming industry, and we need to pay it plenty of attention.

As an increasing number of handheld devices appear (with different renderers and viewport sizes), the way we design is being affected by frameworks like jQuery, the advancement of standards such as HTML5 and CSS3, and the way applications are gradually being pulled toward the cloud. While this study showcases that rudimentary trends exist for mobile designs (such as single column layouts), it will be an interesting next few years as more designers account for the booming mobile audience.

Buy our eBook “Mobile Design For iPhone And iPad”!

This article is a free sample of our new eBook Mobile Design For iPhone And iPad (just $9.90). This eBook presents articles on professional mobile design for the iPhone as well as the iPad, including studies of trends in mobile design and guidelines for the development of mobile web pages.

These articles are a selection of the best from Smashing Magazine in 2009 and 2010, dealing with mobile design for the iPhone and iPad

The authors are: Alexander Dawson, Alexander Komarov, Cameron Chapman, Jen Gordon, Jon Raasch, Kim Pimmel, Luke Wroblewski, Marc Edwards, Michael Flarupp, Nick Francis, Rachel Andrew and Steven Snell.

The eBook is available in PDF, ePub and Mobipocket formats.

(rs)

© Alexander Dawson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: mobile, study

We invest time, money and effort into understanding our audience, and the movement toward a more socially networked Web has made us realize the power that visitors have over how our designs are engineered; and we try to meet their ever-growing needs. Community is integral to the evolution and functioning of a website, and visitors and website owners have become dependent on each other. This reflects a change in the industry: the user has turned into an anonymous designer.

This article will explore the influential figure ‘user’ and uncover the power of your community. Whether you boast social applications, interactivity or a stream of regular visitors, your audience might be a powerful untapped resource at your fingertips. You, the website owner, have the power to make decisions and override them (for better or worse), but the user deserves to be recognized as more than a statistic.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Traditional Roles

Back in the Web’s infancy, the roles of the Web professional and visitor were clearly laid out. Technologies such as email, bulletin boards and Internet Relay Chat (IRC) rooms existed, but most Web users were technologically inclined — cost and complexity of computers and Internet access were the biggest obstacles for many in the early days. Additionally, website were simple and the power of users was restricted; users had little sway with designers and developers.

The Professionals

The role of the Web professional used to be — famously, in the ’90s — to build websites that delivered certain information. Asking the user for feedback was an afterthought; this was evidence of the commonly held belief that we, the experts, knew what was best for users. Usability and accessibility were a luxury, and many website providers ignored them in an attempt to control the way the medium was used.

Historically, the Web professional’s role was to maintain websites.

The following were considered the primary tasks of the Web professional:

• Providing content and services to the client;
• Creating a website to hold the information;
• Dealing with technical requests about the information.

The Audience

Traditionally, the role of the audience was to give feedback, but it had — and still sometimes has — no influence on the website. The romanticized notion that a website owner should do whatever they want is to blame. In the past, a website’s popularity was determined mostly by content; marketing was restricted to directories and search engines; empowering the user and improving the feedback process was far from the designer’s mind.

The following were considered the primary tasks of the user:

• Give the owner financial incentive to continue offering the service.
• Popularize or endorse the website;
• Put the professional’s creation, free or not, to good use.

Those times have (mostly) come and gone. Without visitors, our websites would hardly exist, and when we realize that, we will abandon our old-fashioned ways and quit imposing our assumptions on users. Visitor interaction has become vital to the experience of a website, and the need for positive feedback — now visible everywhere and uncontrollable — has reversed the roles: our audience now has the voice and tools it needs to be satisfied.

Playing The Part

It has become important for us to define what roles the Web professional and user play in the dynamic process of building and improving websites, especially given the new-found focus on user experience and the development of tools that allow visitors to engage with and become attached to our services. Furthermore, ensuring that these roles are, in fact, played is essential to the process.

The Professionals

Professionals hold the keys to the castle. While many designers focus on the result, understanding what audiences need, what problems need swift solutions, which visitors require these solutions and how best to implement them is paramount. You might have some control over your users, but they can still dampen your popularity.

The user experience should actually serve the needs of users.

Here are some skills that professionals bring to the table:

• Knowledge of how to build a website and how it works;
• Experience with anticipating user needs;
• Delivering services and content that users need.

The Audience

Audience members play a different role. Most websites don’t offer a broad spectrum of customizable features (for good reason) or feedback options that give insight into how visitors use the website or what they’d like to see improved — specifically, what they’d like to see improved that would make them return on a regular basis. Word of mouth has become a serious force on the Web with Twitter, Facebook and their kin; and while you control the code, they control users’ wallets, attention and referrals.

Visitors know what they like, and negative feedback can spread quickly.

Here is what visitors contribute:

• Essential feedback on core service failings;
• Word-of-mouth promotion;
• Knowledge of what works, not just what’s pretty.

The roles of professional and user can be reversed on occasions when one expert helps another improve their website, resulting in a mixture of a professional perspective and visitor-oriented goals. Being both visitor and expert gives you empathy for the user and a valuable perspective, especially if you’re lucky enough to be in a position of power.

Nature Versus Nurture

Both sides bring goods to the table. Professionals bring the service and content into existence, thereby providing the “location for the party.� New visitors share vital details about how you can encourage them to be more involved, and they spread your website to the masses. Maintaining equilibrium between the professional and user is required if your Web presence is going to survive.

The Professionals

As it stands, the professional designer still plays the traditional role, but it should be expanded to encompass the evolving needs of our audience. The ability to nurture and cultivate is a skill ignored by many in our industry. In the past, “If you build it, they will come� described the Web fairly accurately, especially given the limited competition, but easy enterprise and designing for yourself have failed by their own merit.

Here are some problems that face a Web professional:

• Subjective opinion;
• Too many tasks to be able to master one;
• Fixated on success and reward (depending on the service being offered).

The Audience

Even if your visitor has no understanding of Web design, they will know what works for them, so you should encourage them to share their ideas. You can do this through code, design, experience and interactivity (or functionality). Playing to your audience’s strengths makes sense (if only to avoid the MySpace effect: going stale).

Some of the problems facing users are:

• Lacking knowledge of the Web’s limitations;
• Their diverse backgrounds and characters lead to quirks;
• Subjective opinions.

Survival of the fittest is the name of the game, and with the increasing pressure to focus on the needs of users and encourage them to connect to your services, it’s important that your designs are user-centric: contextual and interactive. The anonymous designer who knows what they want is well equipped for the Internet’s future. We can’t overlook users as we did in the past.

Elements Of Success

At this point, you’re probably wondering why we should place so much trust in users. That’s a fair question. Distinguishing between constructive advice and useless drivel can be difficult when many users don’t even know what a Web browser is, and determining the relevance of reviews is a challenge when manipulation is commonplace. All interaction with users should be done with respect (and perhaps a grain of salt), but it’s still worth encouraging the crowd to take action.

The trick is to use your knowledge (from statistics to semantics), experience, research and trust (of information sources) to your advantage.

By using a mixture of both quantitative data (numbers, statistics, etc.) and qualitative data (opinions, ideas, etc.), you can make informed decisions about what will work best for your clients. Putting the onus entirely on visitors is unfair, but giving them a channel for input will make a difference. If you don’t please them, they’ll surely take their business elsewhere.

The ABCs of experience: appreciation, balance and communication.

A few of the ideas you get from users are bound to be cringe-worthy, but it’s surprising how many good ones you’ll get if you implement feedback functionality properly. The stereotypical designer who leads with his gut is a testament to the lack of awareness of user expectations and needs. We must acknowledge this co-dependency, this need for an exchange of perspectives, and the value of the anonymous designer.

Appreciation

Your visitors are so much more than statistics. They deserve to be appreciated. You, the professional, can re-engineer a website until the cows come home, but it’s ultimately up to users to decide whether to make use of your services. Acknowledging and understanding their needs, and encouraging diversity, is critical to breaking down barriers.

Appreciate your users and the issues they might encounter, and be patient. That also means having a clean, attractive design that communicates. Example: EightHourDay

Ask your visitors the following questions:

• What, if anything, could my website offer to better meet your needs?
• Do you have any technical difficulties with the way the website functions?
• What more could we offer to deliver additional value?

Balance

Balance is integral to life, and it’s probably more critical to design than other Internet-related fields. Designers forge open bonds with visitors that often lead to social relationships that enrich not only our websites but our lives. Visitors hold greater value for our communities than many of us care to admit — think of Wikipedia or Facebook. Maintaining good relationships with them is paramount.

Stay level-headed by maintaining the balance between contribution and ownership.

Ask your visitors the following questions:

• How can we encourage you to participate more often?
• What content or services would you like to see in future?
• How much time do you spend on our website?

Communication

Communication is fundamental to our social and interactive experiences on the Web, and the staggering amount of rich content (not even counting spam!) that visitors contribute could exceed our wildest dreams. The user’s job is to come forth and help us help them, but our job is to act as intermediaries between them and the website so that they achieve the ideal experience. We are the Web’s “interpreters.�

Communication is paramount. Make sure you can be contacted easily.

Ask your visitors the following questions:

• Are we missing an essential feature that would help us help you?
• Do you have any concerns or complaints that we need to address?
• Is there anything you want to ask about our website or services?

The Sociological Switch

Of all that has been addressed in this article, the most important is the process of planning and implementing mechanisms for visitors to interact with your services. So, put time and effort into studying how to make your website better. There are many methods of doing this (audits, surveys, statistics). What’s important is that lines of communication with your users stay open, so that you can go about your business successfully.

Planning and research make up a huge portion of the creation of the user experience.

The future of the Web will be about being socially connected, and a role reversal that I call the “sociological switch� seems to be taking place. Simply put, we Web professionals are becoming the audience of our users’ demands, and users are becoming anonymous designers, deciding where they visit, how the Web should evolve and how media are constructed and consumed.

As you leave comments below, just think that by contributing here, you’re making a difference in Smashing Magazine’s relationship with its audience and the world. By leaving space for your comments and your participation, Smashing Magazine is trying to meet your needs. Think about how you can use your audience to your advantage and improve design beyond even your own expectations.

(al)

© Alexander Dawson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Design, user

The business of building websites is one of constant change, adaptation and strategy. The way designers and developers build websites is often informed by the methods of others and their own trial and error. In light of this, we can draw a number of parallels — some philosophical, to a certain extent — between Web professionals and one of the oldest and most popular board games of all time (counting traditional and digital games). This game is chess.

Image credit

In this article, we’ll explore the relationship between the game of chess and the Web industry. We’ll learn fundamental lessons from the pawn, rook, knight, bishop, queen and king, and we’ll highlight the factors — both offline and online — that determine best practices. The game is beloved by many professionals, so it seems fitting to apply its great strategy and elegance to the digital age; certain practices might help you lead a more successful working life.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Pawns

Of all the pieces on a chessboard, the most abundant and least strategically useful are the pawns. Acting as soldiers on the front line, these men of honor advance across the board in an attempt to reach the end of the opponent’s side and transform into a more useful piece (i.e. another queen). While this doesn’t happen often, pawns nevertheless play a fundamental role in shielding higher-ranking pieces from attack, and these simple pieces are also used at the outset to gain positions of advantage.

Always Move Forward

Pawns can only move forward. They can get a quick start; players have the option of moving the pawns up to two spaces on their first move and subsequently moving them one space at a time. When you work on projects in a business environment, the principle of moving forward without back-tracking is an inspirational perspective. If you cease to constantly drive your ideas forward, they can become stagnant; progress is critical to a website’s development.

Here are some tips you can use to adopt this mindset:

• Don’t get stuck using deprecated practices when structuring website code.
• Examine your community to determine needed features for future upgrades.
• Change a website’s interface only if it would benefit the user experience.

Be Willing to Sacrifice

The ideal of giving something up in exchange for a greater good is realized by pawns, which, though limited in function, are plentiful and can protect others. In design, shielding the end user from issues that can damage the usability of the website is a worthwhile sacrifice. Having to let go of something that took time and energy is always unfortunate, but knowing when to say goodbye could mean the difference between success and failure.

Here are some tips for internalizing this attitude:

• Ensure that your Web layouts are flexible enough to meet the needs of various devices.
• Weigh the benefits of features against their pitfalls before eliminating them.
• Content is more valuable than design; never dilute its quality for eye candy.

Aim for Change

The pawn’s greatest moment is arriving at the opponent’s side of the board. Striving for betterment and aiming for your goals are behavioral ideals firmly upheld by professionals. This requires dedication and careful planning. When undertaking a creative project, it’s important to think beyond the current ask and consider the long-term project.

Here are some tips to get into this mode:

• The website-building process is never complete; ensure that you maintain a steady flow of updates.
• Think of ways to enhance the website to better cater to your visitors’ changing needs.
• It never hurts to have a business plan when scoping out a Web-based project.

Rooks

Rooks (or castles, as some people call them) are fortresses of strength that move across the board either horizontally or vertically. Their nature is similar to that of bishops in that they move in a straight line (although bishops move diagonally). Progress can be hindered by barriers, and interaction with other pieces is sometimes required, but the rook’s overall benefit is stamina and longevity.

When working on Web projects, we often put a great deal of thought into things like conventions and patterns and their theory and implementation. The nature of semantics and following recognized pathways in order to structure a document properly is reminiscent of the way that chess pieces such as the rook have a particular function and invariably carry out unique tasks. Only with logical thought can we hope to change the ultimate goals of an event and avoid obstruction.

Structure With Purpose

A rook represents strength and structure. The castle of stone might be restricted in its interactions on the chessboard, but its value is in its character. Websites need to be constructed well in order to survive the trials of everyday use. Considering how such needs should be met will ensure a sturdy and durable display of data. Take great care when structuring your work to reduce “illegal moves” and syntax.

Here are some tips for strengthening your outlook and code:

• Always validate your code; it will reduce the number of bugs.
• Use the right element for the job to improve your code’s semantic value.
• Keep code minimal to reduce file size and loading time.

Assist Those in Need

Like the other pieces on a chessboard, the rook is always on hand to help out by attacking or defending. Working with others to accomplish a task is only part of their job. In a Web environment, the same is true: if you take the time to assist those who use your website or service, not only will you increase your value, but you will gain the gratitude of the visitors, whom your website requires in order to keep running.

Here are some tips that might be of assistance:

• Providing ways for people to contact you is important to maintaining trust.
• Negative feedback can still be constructive; don’t dismiss it as “bashing.â€�
• Provide social interaction aids to help visitors feel involved in your community.

Take Precautions

Sometimes things don’t go as planned, in which case you’ll want to hold the strongest position possible. Rooks, like all other critical pieces, are only tools to protect other pieces in play, but caution is fundamental to remaining in a position of power. Thinking of how future scenarios might challenge your strategy can help future-proof your work from obvious flaws. You don’t want visitors to encounter obstacles that make them miss out on the benefits of your website!

Below are some tips for fortifying your website:

• Turn off scripts and styles to test whether your website is still usable.
• Test your websites on mobile devices, a market that is proliferating.

Knights

Knights are unique in their movement, going forward two spaces and then taking a single side-step. This means they can weave past other pieces and take up positions of singular advantage. Strategically, knights are most often used to pin hard-to-reach pieces in place through a clever attack. While this unique movement has its advantages, the knight does not replace the other pieces, which have their own strategic benefits.

Our uniqueness, whether as it is applies to our creative process, our products or our ability to solve common problems, is something we as professionals take for granted. We are able to incorporate creative flourishes when we forge applications, flourishes that can be tracked through the code (such as conditional comments, which give stylistic flavor to Internet Explorer). Like a white knight saving our sanity, our uniqueness helps us side-step issues that could otherwise become complicated.

Be Brave in Adversity

Mythology has taught us the familiar attributes of the knight: bravery, strength and honor. Thoughtful reflection on the Web-building process teaches us to be courteous to others and brave, while sticking to our guns when faced with the prospect of compromising in order to gain market share.

Here are some tips to make yourself more knight-like:

• Never take criticism personally; negative feedback is often the most useful kind.
• Don’t resign in the face of competition; the only failure in life is to quit trying.
• Try to rally support for your project; there’s strength in numbers.

Have a Selling Point

The knight is the only chess piece that move in two directions in one turn; even the queen can’t do this! This attribute teaches us the value of having a selling point. Selling points give visitors a reason to choose one product or service over others that perform the same function.

Here are some tips on finding your selling point:

• Draw from other people’s work, but never steal anything outright.
• Improving on existing services is a kind of innovation in its own right.
• Be focused in what you offer; reinventing too much increases complexity.

Avoid Barriers to Access

The knight is the only piece that can pass over others in its movement. This ability to navigate past barriers is somewhat reminiscent of standard recommendations for accessibility, which ask us to remove barriers to access on our websites. The goal is to allow freedom of movement and access to content.

Below are some tips on removing barriers:

• Consider the types of people who are not as able as you are online.
• Testing your work on an audience is better than going solo.
• Make sure your website works in different browsers to avoid serious breakages.

Bishops

The bishop is a piece that moves diagonally across the chessboard. The bishop scans the board for its next move, minding pieces that block its path, in the same way that a visitor scans content until a barrier prevent their progress. A bishop cannot step off the tile color to which it was initially assigned, ensuring a kind of vendor lock-in.

As Web professionals, we tend to get caught up in arguments about whether frameworks are useful, given their disadvantages (and even with graceful degradation, for example). The benefits of frameworks for certain situations occasionally outweigh their downsides (like trapping users in the environment), so make the most of what you have; dismissing less powerful options is not always the best way to go — in fact it could increase the amount of work required.

Have Faith in Your Work

The bishop, of course, is religious in nature, an agent in the battle between two sides. Faith in a religious sense is not needed to practice Web design, but as a quality of character it does play a part in one’s identity. Faith affects motivation and makes you believe in the project you’re spending so much time and effort on. If you have no faith in your craft, the job is doomed from the outset.

Here are some tips for building faith in your work:

• Create a list of benefits to focus on your website’s potential.
• Set realistic, structured goals to achieve success.
• Encourage visitors to recommend your work to people they know.

Know Your Limits

It may seem frustrating that each bishop is trapped on its own color, limited in impact. But if you make the most of it, bishops can still be useful. Know your own strengths and limitations, so that you don’t attempt the impossible or unachievable — if you do, the result will surely be flawed.

Here are some tips on knowing your limits:

• Get external support or advice when you hit a wall.
• If something can’t be achieved the way you hoped, look for alternatives.
• Reduce your weaknesses by learning new skills regularly.

Stick to Your Guns

While being able only to move diagonally may seem like a disadvantage, this can prove useful on occasion. Having sheer determination to carry out a job in a certain way is admirable. We humans are sometimes stubborn, and we stick to our guns when possible. This can cause us to make mistakes… or motivate us to persevere.

Here are some tips on being determined:

• Reflect on a project’s overall goals whenever possible in order to reassess a plan’s feasibility.
• Mistakes happen, and no one is perfect, but that’s no reason to stop trying.

The Queen

The queen is the second-most important piece on the chessboard. She can move horizontally, vertically and diagonally across any distance, and her power spans the entire board. She is the king’s most agile bodyguard, and losing her can be devastating. You have to use your power responsibly, both on the chessboard and in your profession; misusing your tools could cause you to lose visitors to the competition.

Sometimes we find ourselves swatting a fly off a nuclear warhead. Knowing exactly what to use, when to use it and how to use it appropriately is what ultimately distinguishes professionals from amateurs. In addition, taking advantage of the powerful tools at our disposal can speed up progress and eliminate the complexities that come with attempting the impossible with simple tools.

Realize Your Potential

A potent force, the queen moves freely about the chessboard, with few restrictions. The queen is a powerful piece and reminds us to exert the greatest effort to reach our potential. Rather than staying in our comfort zone, we must always learn new skills and achieve more than what is expected of us.

Here are some tips to stretch your skills:

• Everyone has the capacity to learn; keep your skill set up to date.
• Push yourself to become a better professional and to exceed your own expectations.
• Try not to let any of your skills go to waste when creating something.

Cover All Bases

In our work, we try to minimize error by viewing every situation from multiple angles — this is important. In chess, players use the queen in much the same way, exploiting her power yet shielding her from harm. In the creative process, your only real limitation is being blind to critical elements, which is why getting some perspective from outside testers and users never hurts.

Here are some tips to cover your bases:

• The more time you spend planning a project, the better the results usually will be.
• Information architecture is your friend; make use of wireframes and mock-ups.
• Spend time testing your website intensively for critical flaws.

Strategy and Learning

You have two knights, two rooks, two bishops and many pawns, but only one queen. Her value lies in her singularity; each move of the queen requires strategy and consideration of consequences. We become better players — and professionals — through trial and error, constant learning and foresight. Being cautious in the game teaches us to be wise in business.

Here are some tips to help you strategize:

• Read blogs, books, tutorials, magazines and anything else that can help guide you.
• Analyze your target audience to get ideas on what your website might need in future.
• Researching the competition gives you a sense of what potential visitors need.

The King

No piece is as important as the king; it is the one piece that must evade capture. The king moves only one space at a time, in any direction, and whenever it is in immediate danger, either a piece must be moved to block the attack or the king must be moved to avoid it. The king has no equal and cannot be restored by a pawn — sacrifice, and so prevention is imperative.

Web professionals have to protect what is important, too. We deal with payment details, databases, passwords and other sensitive information. If we lose any of that through carelessness or a lack of preventative measures, we end up losing something greater: the customer. Establishing trust takes time, but it can be lost as quickly as a surprise checkmate!

Avoid Traps

Protecting the king is the primary concern of every chess player. Gaining advantage to prevent loss is important. While Web professionals usually have no reason to evade capture (unless they’re doing something wrong), the benefit of avoiding common traps (the equivalent of “foolsmate” in chess) becomes apparent when testing the cross-browser functionality of a website.

Here are some tips on avoiding traps:

• Try to reduce the intrusiveness and obtrusiveness of your website to enhance the visitor’s experience.
• Actively seek out errors in your work to improve your service.
• Internet Explorer is a pain. Watch out for its rendering faults.

Value and Importance

A common tactic in chess is to weigh the value of the pieces against the benefits they represent. The king is critical because the game is lost without it. Comparing value has an important role in the Web industry, too, especially when losing mission-critical features would undermine the entire process. Comparing value also helps when prioritizing maintenance work or scheduling upgrades.

Here are some ways to tip the scale:

• Accurately pinpoint the value of your service.
• Upgrades are avoidable, but reduce downtime as much as possible.
• Price your service fairly; prices that are either too high or too low create problems.

Know When to Resign

Sometimes we get so excited — or stressed, as the case may be — about complex or next-to-impossible projects that we forget the option of saying “no.� We never like to resign or throw down our sword; we feel as though we have failed because we couldn’t meet the client’s needs. But firing bad clients and knowing when to scrap weak ideas is a part of being a professional. You can’t win every fight.

Here are some tips on recognizing when to throw in the towel:

• Trust your instincts when deciding whether to undertake a project.
• Salvage something from anything you work on.
• Learn how to deal with “clients from hell.â€�

Chessboard

Chess players focus on the pieces in play and on capturing the king, but they must also understand the chessboard as a battleground on which this drama plays out. This relates to the website-creation process (and to a lesser extent, the Web industry): lessons are to be learned from the chessboard itself.

Image credit

Light and Dark

Like a chessboard, the Web industry is full of light and dark, good and bad. We weigh benefits and pitfalls when performing our roles. A chess game tells a story; likewise, the fruits of our labor and our highlights and disappointments all appear online.

Think Ahead

One of chess’ biggest lessons is to think ahead, instead of in the moment. Being able to predict how your opponent will move helps you gain advantage. This is also true of the website-building process. Unjustified decision-making leads to problems, whereas well-planned strategies that entice people to visit and use your service lead to faster results and greater rewards.

Weigh Your Options

In chess, there are literally millions of ways a game can play out, and with every move the number of potential outcomes decreases. Knowing your options and which route affords the best opportunity for success is a critical skill. Website creators have many different methods of production and implementation as well, but missing the mark with scalability or usability can diminish a website’s user-friendliness and jeopardize its success.

Make Your Move

Decision-making can be tricky; in chess, a wrong move can cause you to lose a piece, a good position, an advantage or even the game. The same could be said of building a website. Preparing for different projects, services and eventualities is one thing, but having the courage, skill and understanding to carry them out successfully takes practice. After examining your options, make your move: put all your careful planning into action.

Checkmate!

So many useful lessons can be learned from chess. If you haven’t played it before, visualizing what we’ve gone over might be hard, but the fundamental principles of the game — how the pieces interact and the role of strategy in the big picture — should not be ignored. The game actively promotes logical thinking and strategy — both useful skills.

More lessons could certainly be drawn from the game, but hopefully this article will serve as a source of inspiration, especially if you feel your goals are out of reach. We often learn the most from making mistakes, losing a battle and then returning to win the war. Nowhere is this been truer than in chess, where a mixture of practice, skill and occasional luck is required to become the grandmaster.

So many aspects of the Web industry (such as syntax, design and ideals) change constantly, but the fundamental principles of learning, growing and trying your best often mean the difference between failure and success. Try to incorporate lessons from the chessboard into your own work; while having all the pieces doesn’t guarantee victory, having the basic skills will give you the confidence and awareness that you need to succeed.

(al)

© Alexander Dawson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Web professionals have to be both flexible and creative to meet the needs of each client — and these characteristics often transcend the design and development process. Each of us has a unique approach to our work. The particular mindset and methods by which each of us turns a mental image into a delightful and usable website is worthy of investigation.

In this article, we’ll discuss three approaches taken by many Web designers and developers. While a creative individual usually falls into more than one of the three categories, each of us is still likely more heavily weighted towards one. These approaches might help determine what paths someone is best suited for and might shed light on how they achieve their goals. So, without further ado, we introduce you to the artist, the scientist and the philosopher.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

The Artist

Sitting in a studio apartment, engrossed in Adobe Photoshop, ruminating on the powers of shape and color, is a person like no other. The artist is a creature of great creative power, who sees beauty in their surroundings and attempts to reflect it in their work while meeting the requirements of their clients. The artist might not be inclined to write the next Google killer, but everything they produce is inspired by their care and keen eye.

Definition: Artists are best defined as those who are more interested in the presentation itself than in the mechanics of the mode of presentation. Graphic artists, Web designers, content writers and podcasters often fall into this category.

Passion and the need to create are the hallmarks of the artist. Her wish is to satisfy her love of the visual elements of the Web industry. She relishes showcasing her skills and stays at the forefront of exploration in the field of design. Her imagination is matched only by that of children and children-at-heart.

Living in a fantastical world of beauty — which can actually breed sensible design — is not the only characteristic of the artist. Visitors are drawn to her work and feel an emotional connection to it. The artist also acts as a muse for other designers.

With a range of tools, the artist conveys emotion in a beautiful and professional design. Here are some examples:

Single-page animated websites powered entirely by Flash are common.

Typography that goes beyond Web-safe conventions can enhance artistic value.

Clean, visually appealing designs that attract many eyes.

Minimalism and a focus on content demonstrate a keen use of space.

jQuery animations and colorful focal points increase visual interest.

The Scientist

A cup of something caffeinated and some snacks lie on the desk. It’s the middle of the night, and a man is furiously typing away at his computer, producing line upon line of code to meet an looming deadline for “the next big social network.”

The scientist is a creature of habit, working longer hours than other colleagues. He has the stamina to render thousands of lines of PHP in an engaging, thought-provoking and memorable project filled with complexities and structured progress.

Web developers — their term — are well known for late nights and working at ungodly hours. They can produce code at the drop of a hat. While these habits may seem rather unhealthy, the scientist’s willingness to solve complex problems, his enviable powers of memory and his ability to solve problems logically make him a different but still inspiring creature in the technological world and workplace.

Definition: Scientists are best defined as those with an interest in code. Making things work and creating structure tend to be their top priorities. Think of programmers, developers, database workers and their kin.

Pictures of a coding monkey might come to mind, but remember that writing code is just as involved and requires as much creativity (though perhaps of a different sort) as the work of the artist and philosopher. It’s also just as much of a gift. To give you an idea of the inner beauty of the scientist’s work and of how this driven mindset can be a powerful asset, see the examples below.

Following specifications shows the scientist’s commitment to presenting code properly.

Server-side scripts process forms silently and in the background.

Innovation and careful planning lead to elegant and complex search mechanisms.

Keeping things simple increases speed and minimizes redundant code.

Frameworks and microformats facilitate well-maintained, elegant, optimized code.

The Philosopher

Our friend the philosopher sits on a train. He is on his way to meet a company. His laptop is open, and he is reading the business plan — or so it seems. Underneath, the wheels are turning; he is dreaming up a revolutionary way to help the business evolve. The philosopher, a unique breed, incorporates the skills of the artist and scientist while bringing to the table his keen insight into trends and target audiences. He is engaging and friendly, and he shows empathy, that rare and valuable gift.

Definition: Philosophers are consultants, officially and unofficially. They are masterful advocates and are able to coordinate and empathize with both artists and scientists. Think of accessibility and usability gurus, UX and IA advisors, SEO planners and information architects.

Those who design and build websites tend to receive the most credit in our industry. The philosopher knows that if he does his job well, he is invisible. His work should integrate seamlessly with the work of his colleagues. He is the person who performs UX and usability tests, audits websites and advocates for the end user.

The skills of such a person might seem questionable, but their understanding of the end user’s needs and their ability to help execute the team’s vision for the Web are attributes worthy of distinction. The philosopher is calmly neutral and can sense what is best for everyone involved.

Below are a few examples of contributions made by philosophers to the evolution of the Web.

Techi highlights that a well-structured navigation menu is paramount.

Jakob Nielsen is a famous master of usable Web design.

Philosophers put a great deal of thought into simplifying information requests.

Accessibility gurus consider the potential of mobile and handheld devices.

Looking for errors and potential improvement is all part of the job.

Which Are You?

The world is full of job titles that are meant to define people’s roles and usefulness. While a title can delineate a person’s skill set, it doesn’t come close to explaining how each professional sees themselves or what they mean to a community. A question inevitably left unanswered is: what makes an individual’s style and approach unique?

Bridge the Gap

Under the right circumstances, each of us gets to be all three: artist, scientist and philosopher. Being a Web professional often requires an equal measure of skills related to art and design, development and theory. Still, the way we conduct ourselves and perform our duties hints at our true “inner being.”

You’ve met these three equally gifted professionals (in this article and probably in real life), but keep in mind that distinguishing between these three types is simply an exercise in professional development. None are in any way better than the others; this field has a genuine need for all three. It goes without saying that approaching tasks in different ways helps us to be innovative. If you’re just entering the industry, perhaps a little self-analysis will help you find your niche.

We are all a bit of everything. Most of us can draw; even if we’re limited to stick figures and finger paintings, we all have an artistic outlet when we need it. We can all think logically, even if we don’t always show it; and our ability to work and code within parameters is helped along with HTML and CSS. We are all social beings, able to interact and understand one another, and we all have personal tastes. Everyone also has bad habits and prejudices. Stay open-minded and accept that “it takes all kinds”; a variety of skills and personalities makes the workplace vibrant.

We possess the knowledge and skills required to undertake the work our clients pay for, and acknowledging these three approaches can aid us in our work. In doing so, we might feel driven to learn new skills or find ourselves better able to understand and cooperate with our colleagues, and we might gain enough insight to take a step back from a project to get a fuller view of our goals.

Be proud of your unique approach (if it’s working), whether you’re an artist, a scientist or a philosopher. We are, each of us, unique, and we are more than the sum of our qualifications.

(al)

© Alexander Dawson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: