BlogmyQuery – BMQ

A well-functioning pattern library is a beautiful thing. It is a powerful resource that you and your entire team can use to efficiently create consistent user experiences for your website or service. It cuts out repetitive design work, allowing you to focus your energy on creating new user experiences; and it creates a common UI language for your team, reducing communication issues and keeping everyone on the same page.

But to many designers, creating a pattern library can feel like a daunting academic pursuit, or simply useless overhead documentation. To make matters worse, getting consensus on which technology to use and how to get started is hard.

After experimenting with various options, our team has found that using Evernote to house our pattern library of Adobe Fireworks PNG design files has proven to be a winning combination. We’ll outline how you can use Evernote and Fireworks to easily build your own pattern library and reap the benefits mentioned above.

Patterns With Benefits

To get fueled for the journey ahead, let’s dig a little deeper into what makes pattern libraries so awesome. Here are some of the top reasons why a library is worth the investment:

• Consistency
  A pattern library spreads consistency across your products. As they say, “the interface is the brand,� and creating an interface that is consistently good is critical to creating a great brand. This benefit is not trivial.
• Efficiency
  A pattern library frees designers from the heavy lifting of repetitive design work and allows them to focus on building new interactions and improving existing patterns.
• Speed
  A pattern library gives designers and developers the building blocks to quickly build complex interactions. Which also facilitates rapid prototyping of new ideas.
• Vocabulary
  A pattern library gives team members a shared understanding of the product’s primary building blocks, and it gets new team members ramped up quickly on how the product is built.
• Evolution
  A great pattern or component library helps your website evolve. The nature of components is such that if you make a change to one component, it is updated across all instances in the product. This helps you respond quickly to customer needs and iteratively refine the user experience.

If They’re So Great, Why Don’t You Marry Them?

In light of all the benefits, why doesn’t everyone have a pattern library? From my experience, two of the main factors that hamper the creation of a pattern library are lack of knowledge and lack of tools. Learning about patterns, components and frameworks can feel like a daunting academic pursuit, and there doesn’t seem to be solid consensus on what technology to use.

In addition, if a pattern library is hard to maintain or hard to use, it won’t gain any traction. Updating the library with new patterns and modifying existing patterns have to be easy, because as soon as the library gets out of date or becomes cumbersome to use, it will be useless. We have found that using Evernote and Fireworks together makes for a system that’s easy to manage and easy to use and that overcomes these obstacles very well.

Evernote + Fireworks = Winning Combination

Numerous websites and services have sprung up to help companies build their own pattern libraries, but after experimenting with Quince, Patternry and a few others, our design team landed on using Evernote and Fireworks. Here are the reasons why they are the best fit for us.

(Unique) Fireworks Features

While Evernote will get a lot of attention in this article, the pattern library we have created would not be possible without some of the excellent features in Fireworks:

• Fireworks uses the PNG format as its source file type. This means that Evernote (and any Web browser) is able to display Fireworks PNG files natively, while still retaining all of the data from Fireworks vectors, bitmaps, layers and effects inside the files. This is not possible with PSD, AI, INDD or any other proprietary file type.
• Because the PNG file format is open, Evernote is also able to “read” and index text inside every Fireworks PNG in the library, and this gives you the ability to search for text strings that appear in the individual components. Again, this is something that would not be possible with any other “closed” file type.
• Another awesome feature of Fireworks is that it allows you to drop a PNG file directly into any other PNG file that is open. This allows you to seamlessly drag and drop patterns from Evernote into Fireworks without missing a beat. Combining this with the rich symbols feature in Fireworks makes for a powerful workflow.
• Fireworks’ editable PNG files are typically very small in size, which makes opening and syncing files extremely fast and easy.

Fireworks is the only app that has all of these features, making it a critical component to this workflow.

Organization

In addition to being able to display PNG files natively, Evernote has robust tagging and search capabilities, which have allowed us to relax about organization. Even without tagging, finding the pattern you are looking for is quick and easy. Because Evernote is able to index text inside Fireworks PNG files, you can search for text within the patterns, which makes finding most things lightning quick, with zero organizational overhead.

Syncing and Accessibility

A final distinction between Evernote and most other pattern library services is that Evernote is an app that runs locally, which makes it much quicker and easier to use than any Web-based service. With Evernote, no uploading or downloading of files through a browser is involved — just drag and drop from Evernote to Fireworks. Evernote works across multiple platforms, so no matter where you are, you can access it (and even when offline, you can still access local copies of your assets). Any changes to existing patterns are near-instantly synchronized for everyone else, so it really is the best of both worlds.

Pattern Recognition

Hopefully, you’re sold on the benefits of creating a pattern library, and on why Evernote and Fireworks are great tools for the job. But before jumping into how to implement the pattern library, we should understand what exactly patterns are. A good definition from Erin Malone is:

[A pattern is] an optimal solution to a common problem within a specific context.

Tabs, pagination, table data, breadcrumbs — these are all solutions to common problems in specific contexts (our very definition of patterns!). Patterns are the fundamental interactions that make up a user experience. Combined, they can create rich, complex user experiences. Any given YouTube page shows multiple patterns in use:

Some patterns that YouTube employs to create a rich user experience. (large view)

Patterns vs. Components

A quick note on patterns versus components. In general, patterns describe the overarching concept behind an interaction. They typically don’t call out a particular visual design or code.

A component, on the other hand, is a specific skinned implementation of a pattern. Also known as a widget, chunk or module, it typically consists of a visual design asset and a code snippet that renders the component. In other words, components are how patterns become real. Looking again at YouTube, here is the same page, this time with components highlighted:

Calling out some of the many components that make up a YouTube page. (large view)

The library we’re focusing on in this article is actually a pattern and component hybrid. Here’s how Nathan Curtis describes this type of library in his excellent article “So, You Wanna Build a Library, Eh?�:

Choosing between patterns and components may not be an either/or question… [Teams] have hedged their bets by embedding aspects of one approach into the guidelines and spirit of the other, most commonly via pattern-like guidelines incorporated into the more specific component definitions.

Embedding pattern-like guidelines into a component library is the exact approach we have taken, and it has served us well. If you already have a product and are looking to build a library, this approach is a great way to get started because it yields the immediate benefit of components (reusable visual design assets and code), while enabling you to invest in adding pattern-like guidelines over time.

The Library In Action

Here’s how we have set up our pattern/component library. In Evernote, we have a shared notebook named “Pattern Library.� I own the notebook and share it (read only) with all members of the UX and Web development team. Each pattern/component has these sections defined:

1. What the pattern is;
2. When and why you would use it;
3. A visual example (Fireworks vector PNG);
4. Basic functionality (describing the component’s behaviors);
5. An example in context (to show alignment, etc.);
6. A link to the Web development component (live example and HTML snippet).

Here’s what that looks like in Evernote:

In the shared notebook, each pattern/component contains all of the information needed to understand when, why and how to use it. (large view)

A key to making components work is to have available the corresponding code snippets and CSS needed to bring them to life. Each component in the library has a link to an internal Web development page where we keep live working examples, as well as the code snippets required to generate the component. This way, our developers can easily find the code they need to implement the components that they see in the mockups.

Each component has a corresponding page that our Web Development team uses to implement each component. It documents the behavior of the component and allows developers to copy and paste the code. (large view)

Drag, Drop And Roll

So, what does using this type of a pattern/component library on a daily basis look like? Here’s what our process looks like in practice:

1. When a UX designer needs to use a component in their Fireworks mockup, they find the pattern in Evernote by searching or by visually browsing to the one they want.
2. The designer then drags and drops the Fireworks PNG image from Evernote into their layout in Fireworks, places it where it needs to go, and makes any necessary adjustments.
3. Once the mockup has been finalized, the designer hands it over to the Web developers for implementation.
4. The Web developers implement the mockup by visiting the Web development page for each pattern being used, copying the component’s code to their project and hooking it up to the back end. Done!

The easiest way to describe the design process is to see it in action. Here’s a screencast (should open in a new tab or browser window; .SWF, requires Flash):

One Final Note(book)

Once we started using Evernote for our pattern library, we realized we could apply the concept to other useful areas. We have since created several other shared notebooks, which come in really handy for the design team:

• “Design Resourcesâ€�
  This notebook contains everything that might help designers make mockups quickly: browser chrome, cursors, icons, scroll bars, company logos, templates, etc. Designers just drag and drop them into their mockups.
• “Design Inspirationâ€�
  This notebook (which anyone can add to) is full of screenshots of inspiring designs. Evernote allows you to search text inside images, which works beautifully when you want to research how other websites handle interactions (for example, we can search screenshots for “Sign up� or “Buy now�).

I hope this article has shed a little light on how pattern/component libraries can be useful and on how combining Adobe Fireworks and Evernote makes for a simple, fast and flexible solution. Hopefully, you feel more comfortable now creating your own pattern library and reaping the benefits it offers.

Further Reading

• “So, You Want to Build a Pattern Library, Eh?,â€� Nathan Curtis, Boxes and Arrows
• “20+ Articles on Why and How to Use Design Patterns,â€� Patternry Blog
• “How to Write an Interaction Design Pattern,â€� Erin Malone
• “Enhancing Rich Symbols in Fireworks CS3,â€� Sarthak Singhal, Adobe Developer Connection
• “Using Rich Symbols in Fireworks,â€� Aaron Beall, Adobe Developer Connection

(mb) (al)

---

© Kris Niles for Smashing Magazine, 2012.

We all know that WordPress is awesome — but being awesome isn’t always enough. Does it perform well under pressure? Can it deal with traffic from millions of visitors every month? There’s no question that WordPress can be used for your or my blog, but what about multi-author blogs with thousands of comments? How do developers make it scale and perform?

I spoke with the developers behind some of the biggest WordPress blogs on the planet and asked them to tell me their secrets. Now I get to share them with you.

The Blogs

Website	Monthly uniques	Monthly page views
Digital Trends	10 – 12 million	33 million
iPhoneclub.nl	2.5 million	5.4 million
The Next Web	4 million	8 million
Neatorama	2.5 million	4.5 million
Slashgear	6 million	10 million
Hot Air	2 – 3 million	35 – 45 million
Laughing Squid	Undisclosed	Undisclosed

In The Beginning

The first thing I asked the developers was whether they prepared for the heavy traffic that now flows through their website. In almost all cases, the answer was a resounding no. From The Next Web, CTO Arjen Schat and lead developer Pablo Roman said they had planned for growth but didn’t expect growth to happen on such a large scale. “There were few large WordPress sites at the time, so we learned as we went along.�

Neatorama started out in late 2005 on cheap shared hosting until it got kicked out. It moved to a VPS and got kicked out again. In 2007, it moved to a dedicated server with a CDN, which eventually was insufficient, until finally it moved onto load-balanced servers with a CDN. Similar stories are echoed by iPhoneClub.nl and Laughing Squid.

Hot Air’s developer, Mark Jaquith, also a lead developer at WordPress, had to migrate his website to a new server within 48 hours of launching. Only SlashGear planned for a 30% increase in traffic per year.

Digital Trends started out with around a million uniques a month and has since risen to 10 to 12 million uniques. Tom Willmot, of Human Made, the development shop behind Digital Trends, said this of starting out:

When I started work on the website, there were some pretty big performance sinks in the code base that needed ironing out. A clean code base takes you only so far, however. I don’t think it’s something that should be too heavily focused on at the outset as you don’t know what specific features will need performance considerations. Coding well plus some persistent object caching are enough to begin with.

Server Shred And Burn

High-traffic blogs have to deal with things that regular bloggers only dream of: loads and loads of visitors, eager to read all of the latest news. Neatorama held up when it was featured on the front page of Digg, but was shredded within a few minutes of being featured on Yahoo’s front page — over 2 million visits in the space of a few hours. To deal with that, it had to make a static page on a CDN and redirect traffic there.

Other blogs face challenges related to major events. Visitors flock to their websites to follow what’s happening and hear the news. iPhoneClub.nl and SlashGear are particularly affected during Apple’s live broadcasts. SlashGear experiences traffic of more than 4 million uniques within the two hours of a broadcast’s duration; to deal with this, it adds Amazon EC2 to its normal infrastructure.

Jean-Paul Horn, whose iPhoneclub.nl started out on WordPress 2.0.5, had to learn to deal with these problems on the fly:

We used to run a standard LAMP stack with WP Super-Cache, since the site was already growing rapidly when the iPhone started to get really popular. Our main problem was that the server ran perfectly fine on normal news days, but almost literally burned whenever Apple had a keynote or another big iPhone-related announcement. We tried preparing for these short avalanches by temporarily adding more cores and RAM, but it was never really enough, and I wasn’t really keen on investing in a big-ass server just for two to three days of insane amounts of Web traffic a year.

While moving to a Web server and database server with MySQL stored on a separate server helped in its continuing growth, it was still dealing with the same issues when Apple held a press conference. Enter Frederick Townes of W3 Total Cache and Mashable fame. Jean-Paul met Frederick at WordCamp Netherlands, and Frederick went on to help them set up their current configuration:

• The app server hosts the Varnish front end.
• They use two nginx Web servers: one with PHP-FRM, the other with static content, like a CDN.
• The database server runs a highly tuned MySQL server, in which some of the WordPress tables, such as wp_posts, have been transitioned from MyISAM to InnoDB. Because InnoDEV doesn’t have full text search, Sphinx Search was implemented.

Jean-Paul has been using this configuration since November 2011 and has survived two major Apple events without any of the previous load issues or other performance troubles. They’ve also been able to accommodate more traffic and have beaten all of their previous traffic records.

Dealing With Growth

Hot Air

US political blog Hot Air has gone through some major performance and scaling sprints, particularly in advance of US election years. An election guarantees a larger than average flurry of activity around politics. Given that politics is already one of the most popular topics on the Internet, this means some hardcore scaling. Mark Jaquith explained to me the steps he has taken to cope with scaling:

• Deliver all static assets through a CDN.
• Set up a load balancer, with multiple Web back-ends behind it.
• Cache the front page proactively
• Cache page fragments (such as sidebars) proactively, so that they can be loaded statically.
• Cache recent posts proactively (mostly the ones displayed on the home page). Every time a post is updated or a comment is left, a back-end process generates a new static snapshot of the page and distributes it to the Web machines.
• Eliminate the cache differentiation between logged-in and anonymous viewers. Most caching plugins don’t cache pages for logged-in users, or if they do, they cache a different version for each viewer. Hot Air’s templates are modified so that there is no difference in the HTML generated for logged-in and anonymous users, so there can be one shared cache pool.
• Use Batcache (with a Memcached object cache back end) to cache views of old content.

The Next Web

As with most of these other blogs, scaling was forced upon The Next Web. The founders did plan for growth, but not on the scale they encountered. Arjen and Pablo went into detail on how they dealt with it.

The team’s essential tools are:

• Varnish as a reverse proxy and for ESI (Edge Side Includes);
• Memcached to store the results of heavy queries, such as popular stories;
• Munin for monitoring.

Setting this up wasn’t enough, though. All of this had to be tuned, and poorly performing plugins and code had to be identified. To do this, they did the following:

• Use MySQL slow query log with no-index enabled.
  Keeping your MySQL slow logs empty is essential. Your key cache suddenly might not be sufficient anymore if your data is growing.
• Use XHprof for code path analyses.
• Keep Apache logs clean.
  External referrers will link to pages on your website that don’t exist anymore. If a WordPress 404 page is loaded every time, then you’re doing work that can be avoided. Generating a 404 page can be heavy, so it needs to be cacheable in Varnish as well.

The team at The Next Web also uses additional tools with Varnish to improve cache hit rate. These include:

• varnishtop
  Lets you look into Varnish.
• varnishtop -i txurl
  This shows you all of the requests that make it into Apache that aren’t cached by Varnish. This helps you to identify different cases:
  • Whether the back end sends a header that Varnish can’t cache;
  • Whether the back end starts a session that isn’t needed;
  • Partially malformed links to your website, such as http://thenextweb.com/apple/http://referrer.com/my/cool/article;
  • Small variations of a normal request that you can normalize in Varnish, so that you can serve the standard page, such as http://thenextweb.com/correct/article/link?utm=campaign.
• WP-VCL
  Their basic VCL, which normalizes many different request into the standard versions.

An essential step for The Next Web was developing the ability to serve cached content to logged-in users. To do this, it pulls in all of the user-specific parts of the page and loads these through an AJAX call. This means that content doesn’t need to load all of WordPress. The developers have duplicated all of the code that is needed to handle logging in and basic user-profile stuff in WordPress into its own tiny login class. The class takes 1 millisecond to load, instead of 100 to 200 milliseconds to load through the whole WordPress stack. This prevents WordPress from loading for a trivial request, which can degrade the overall performance of your website by eating CPU cycles that should be used to render pages that are not cached. An added benefit is that WordPress can render all pages in non-logged-in mode.

This is used simultaneously as a feature of Varnish called ESI, which lets the team cache different sections of a page separately with different expiration times. This lets them show fresh content in the sidebar widgets even if the main content has a long expiration time.

Essential Plugins

• W3 Total Cache: iPhoneClub.nl, The Next Web, Digital Trends
• WP Super Cache: Laughing Squid
• WP Widget Cache: iPhoneClub.nl
• Plugin Output Cache in conjunction with Similar Posts, Recent Posts and Recent Comments: iPhoneClub.nl
• Clean Options: iPhoneClub.nl
  To keep WordPress’ easily bloated options table tidy.
• WordPress Sphinx search plugin: iPhoneClub.nl
  To connect WordPress with the open-source Sphinx search project.
• WPVarnish: The Next Web
  or cache busting.
• Term Management Tools by Scribu: Hot Air
  Useful for merging duplicate tags.
• Memcached Object Cache Plugin: Digital Trends
  Lets you run a persistent object cache outside of PHP-APC. This is important if you’re running multiple servers.
• Varnish: Digital Trends

Essential Tools And Services

• VaultPress: Hot Air
  Real-time back-ups.
• WordPress.com stats: Hot Air
• Google Analytics: Hot Air
• Chartbeat and Newsbeat: Hot Air
• A CDN: everyone
• SoftLayer: Slashgear
  A dedicated hosting company that Slashgear has been with for seven years.
• Cloudflare: Laughing Squid
  Provides Web performance and scalability services.
• Disqus: Slashgear
  Helps to socialize engagement and offset comment loads from its servers.
• Solr: The Next Web
  For search.

Challenges

High Levels of Caching

All of the blog owners I spoke with have high levels of caching. Digital Trends deals with this by using Akamai Distributed, Varnish and Memcached. When this is combined with user log-ins and registrations, it can be difficult to make sure that everyone is seeing what they should be seeing while caching as many things as possible.

Mobile

iPhonclub.nl has to deal with a relatively high number of mobile visitors. In the past, it used WPTouch for iPhone visitors (along with its native app). The server team had to do major work with Varnish, nginx, and W3TC to keep the caches for desktop and mobile visitors separate, thus making user configuration more complex. However, later this year iPhoneclub.nl will merge with iPadclub.nl to become iCulture.nl. In addition to the merge, they are moving to a responsive design, which will better suit the new website and solve the issue of dealing with mobile visitors.

Built to Work, Not to Perform

A challenge raised by The Next Web is the actual architecture of WordPress. While using all of the options and all of the plugins is easy, they are built to work, not to perform. With every code change, you have to make sure it doesn’t cripple performance.

Security

Security is a big issue for every WordPress user, particularly for high-visibility websites. As Neatorama points out, keeping WordPress up to date isn’t always enough. You also have to keep your server’s operating system up to date as well.

Some websites need a huge server. (Image: Skimaniac)

Scalability

Slashgear has found it challenging to scale WordPress without chucking more hardware at it. It uses a caching system, but WordPress is built to be dynamic, and caching in a dynamic environment does not always work smoothly. The developers have overcome this by modifying their plugins to use AJAX to pull live data on statically cached generated pages.

Comments

A website like Hot Air can receive hundreds or even thousands of comments for a single post. There are dozens of posts every day, and the website has been live for six years. “With that many comments,� says Mark, “you really have to look at database optimization. We have a few custom plugins that intercept comments queries and rewrite them to be simpler. And you want to limit the number of queries you make against that table. For instance, I killed the ‘Right Now’ and ‘Recent Comments’ sections of the Dashboard.�

Events

As discussed regarding iPhoneclub.nl and SlashGear, Hot Air has to deal with its own major events. When a big political event is happening, just a few minutes of downtime can do damage. Mark has warning systems and automated responses in place. In the event of an problem, he can set up something to automatically fix it if it recurs or to notify him when something indicates that a performance issue is imminent.

Would You Say Goodbye To WordPress?

I asked all of the blogs whether they’ve ever conceived of a situation in which they would have to move beyond WordPress. Here’s what they had to say.

Tom Willmot, Digital Trends

I really don’t like the whole “WordPress is slow� rhetoric. It’s just PHP plus MySQL — so is Facebook. It is possible to move beyond certain things that WordPress does (for example, perhaps you replace the rewrite engine with something more efficient), but to decide fundamentally that WordPress is somehow slow and needs to be gotten rid of is probably avoiding the specific issue that is the problem. Sure, there are aspects of WordPress that can be slow if you don’t do anything about them, but this is far outweighed by everything that you do get.

Writers love the WordPress back end; WordPress.com runs some of the largest websites in the world. Digital Trends servers 33 million pages a month for a website that is hugely more complicated (from a technical point) than a blog.

Jean-Paul Horn, iPhoneclub.nl

I can’t for the life of me think why I would want to do this. I have been using WordPress since early 2.0. My wife started iPhoneclub.nl in December 2006 on WordPress 2.0.5 and we haven’t looked back since. I had some previous experiences with PHP-Nuke and Joomla, but WordPress has really grown on me for its simplicity and huge developer community.

For almost every missing piece of functionality in core, a plugin is available or so easy to patch that you could write your own theme-specific function. I evaluated both Drupal and ExpressionEngine (then called pMachine) when we faced our performance issues, but stuck with WordPress because of its extensibility and there was already a clear vision laid out for WordPress becoming more of a full-featured CMS.

 

The Next Web

I don’t see a situation where you need to move beyond WordPress, as long as you don’t fall into the trap of thinking you can do everything with a plugin.

Laughing Squid

WordPress continues to evolve along with us and is still the best platform out there for blogging. There is every indication that it will continue to be so in the future.

SlashGear

[We would leave] when WordPress becomes too bloated. As you can see, each major WordPress version comes with more hooks (WordPress 3.0 had a little over 750 hooks, and 3.4 has over 1500 hooks). At this point, we prefer scalability and platform robustness over features that are not commonly used.

Mark Jaquith, Hot Air

No way. Comments are the hardest thing to scale, and there are solutions for that, such as using an external service or even sharing comments between multiple tables. I haven’t yet come across a problem that I didn’t think could be solved, and the flexibility and extensibility of WordPress have proved invaluable.

Saying Goodbye

Why would anyone ever want to leave WordPress? One of the blog owners I spoke with was in the process of doing just that. Neatorama’s e-commerce operation, NeatoShop, has grown, and it has decided to integrate the blog and the shop into one platform. This makes it possible for it to tailor its publishing process to fit its particular needs, such as scheduling and queueing multiple posts, maintaining multiple blogs with a single dashboard, cross-posting and having an inline commenting system. For Neatorama, the problem wasn’t WordPress itself, but that they couldn’t implement large-scale e-commerce.

I asked Alex Santoso of Neatorama why he hadn’t considered using a WordPress e-commerce plugin such as WooCommerce or WP E-Commerce. Here’s what he had to say:

Because e-commerce isn’t just a shopping cart — there’s a whole other logistics fulfilment and shipping back end to it. We grew NeatoShop from selling just 12 t-shirts to over 5,000 items today, and we had to write our own software to enable us to process (i.e. ship) orders efficiently.

I’m doubtful that you can do large-scale e-commerce with plugins. Selling a dozen items or so should be no problem, but keeping track of thousands of items in inventory, minimizing fraud, automating, and the logistics would be.

It’s interesting that Neatorama feels that plugins aren’t sufficient to carry out large-scale e-commerce. But how does Alex feel about WordPress as a publishing platform?

We’re not moving away from WordPress because it’s failing us as a blogging platform. Rather, our business evolved from being a pure publisher into a side-by-side e-commerce and blogging operation. WordPress and its vibrant community continue to be a great choice for most publishers big and small.

Learning From The Pros

It’s great to hear about what all of these websites are doing, but what advice can they offer you?

Servers

Learn how to deal with servers, or get someone who does. You should know how to configure nginx and PHP-FPM, MySQL slaved with HyperDB, Varnish VCLs, and NFS. “If you don’t know how to deal with the stuff in between a browser sending the request and your code running,� warns Tom Willmot, “it will seriously limit you in terms of how things can be improved and also debugging issues. Server issues can be extremely frustrating; if you don’t have a handle on it, it will come back to bite you.�

Read and Learn

Jean Paul Horn advises that you should keep up with the latest performance recommendations, and he particularly recommends the following:

• Steve Sounders,
• Web Performance Today,
• Articles about performance right here on Smashing Magazine,
• A saved Twitter search with the #webperf hash tag.

Ask for Help

“Don’t be afraid to ask for help,� says Jean Paul. “The community out there is exceptional and truly supportive.� Spend money hiring WordPress performance experts. This provides an excellent return on investment. If your website goes down or is unreachable, potential readers could end up with the competition. Trying to visit a website that is constantly down is frustrating for the visitor, and they won’t stick around.

Shop Around

Alex Santoso suggests that you “Shop around for hosting costs. Similar hardware configurations can have vastly different pricing from different hosting companies.�

Trail and Error

SlashGear suggests that you use trial and error to get your configuration right. Decide whether a plugin is really necessary. Many plugins use many resources for a simple function that could be hard-coded into the theme. “Adding new hardware and server resources isn’t always the solution,� said Ewdison Then, “but sometimes it’s the only solution.�

Optimize What Matters

Mark Jaquith recommends that you don’t optimize blindly. “Find out what the biggest bottlenecks are and eliminate them. Rinse and repeat.�

WordPress Performance Resources

If you feel inspired to start scaling, here are some resources to check out:

• “Scaling, Servers and Deploys, Oh My!â€� (video), Mark Jaquith
• “High Performance WordPressâ€� Themes Forge
  A three-part series.
• “WordPress Performance Server: Debian ‘squeeze’ with Nginx, APC and PHP from the Dotdeb repos,â€� Chris Olbekson, C3M Digital
• “Do-It-Yourself Caching Methods With WordPress,â€� Milan Petrović, Smashing Magazine
• “Performance Optimization for Websites,â€� Rene Schmidt, The Smashing Book
• “Scaling WordPress”
  WordPress experts share advice on scaling

Many thanks to all of the people who contributed their knowledge to this post:

• Tom Willmot (Human Made) for Digital Trends;
• Jean-Paul Horn for iPhoneclub.nl;
• Zee M Kane, Pablo Román and Arjen Schat for The Next Web;
• Alex Santoso for Neatorama;
• Ewdison Then for Slashgear;
• Mark Jaquith (Covered Web Services) for Hot Air;
• Scott Beale for Laughing Squid;
• And thanks to Simon Wheatley (Code for the People) for a final sanity check.

(al)

---

© Siobhan McKeown for Smashing Magazine, 2012.

Most designers would agree that navigation is one of the most critical components of a website. Despite this, it is not always easy to use or access. Traditionally, users must scroll back to the top of the website to access the navigation menu. I recently wondered whether sticky menus makes websites quicker to navigate, and I conducted a usability study to find the answer. Let’s look at the results of the study, a few implementation techniques and some related challenges.

Sticky Navigation Defined

Sticky, or fixed, navigation is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without having to scroll. Although sticky navigation can be applied to any menu, such as the footer or social media buttons, we’ll focus on the main (or primary) navigation of a website. The image below shows the difference between standard and sticky navigation on a mobile device.

 

Usability Study

Research Conditions

For the study, I created two test websites that were nearly identical. The only difference was that one of them had standard navigation and the other had sticky navigation. Forty participants were timed in completing five tasks on the first website. Then they were asked to complete five different taks on the second website. The order of the tasks was alternated between users to balance out the familiarity factor. The websites were tested on desktop machines, and participants were not told the differences between the websites until the end of their session. Data was not analyzed until the testing was completed. The results of the study yielded two interesting conclusions.

1. Sticky Menus Are 22% Quicker to Navigate

The data from the study indicated that participants were able to find what they were looking for quicker when they didn’t have to scroll back to the top of the page. 22% might not seem like a big number, but it can have a big impact on visitors. According to this data, sticky navigation could cut 36 seconds off of a five-minute visit to a website. Of course, keeping visitors on the page longer is only a benefit if you are enhancing the user experience along with it. Forcing people to dig through a website to find something does not qualify as such.

2. 100% Preferred Sticky Menus Without Knowing Why

At the end of each session, users were asked whether they noticed the difference between the two user interfaces. No one was able to identify it. The changes were subtle, and none of the users caught on because they were focused on completing their tasks. Participants were then asked whether one of the websites felt easier to use. Six of the 40 participants had no preference, but of the 34 that did have a preference, 100% of them indicated that the website with the sticky navigation was easier or faster to use. Many comments along this line were made, such as “I don’t know how the websites were different, but I felt like I was spending a lot less time clicking with the first one.� Such comments indicated overwhelming favor for the sticky navigation.

Desktop Software Navigation Menus

Imagine typing a document in Microsoft Word and having to scroll up to the top of the first page every time you wanted to bold a word or widen the margins. Just the thought of that sounds frustrating. Most desktop software provides access to the entire navigation menu no matter what you are doing in the application. The Web browser is no different; we would find it ridiculous to have to scroll to the top of a website to access the address bar of a browser.

Some Good Examples

Facebook and Google+ recently adopted sticky navigation, but they are among the minority. Of the 25 most visited websites in the US, only 16% currently have sticky navigation. Below are some examples of other websites that do an excellent job of pulling this off.

Fizzy Software
This is a perfect example of horizontal sticky navigation at the very top. Everything feels comfortable while you’re using the website.

Web Appers
The navigation here is vertical and on the left, somewhat resembling Google+’s navigation. The only downside here is that if the screen’s height is shorter than 560 pixels, then the bottom portion of the menu could become inaccessible, which was the case when I tested the website on a netbook.

MakeBetterApps
Here is another great example. Making the navigation slightly transparent, giving a hint of the content beneath it, is a nice touch.

Rodolphe Celestin
This sticky navigation spreads all the way across the top, but when you scroll down the page, the design of the menu changes slightly. Simplifying the design like this can be a good technique, as long as it doesn’t feel inconsistent. Also, the designer has taken an increasingly popular approach by making the entire website just one page; the menu links are anchors that bump you down the page. Some nice transitions and hover effects make this website enjoyable to use.

Ryan Scherf
The navigation on this website is vertical and only icons. The creativity here is impressive.

Web Designer Wall
The sticky vertical navigation works well on this website because the menu has only four items. This works well enough for blogs that I wonder why others don’t adopt this approach.

While sticky menus aren’t the most popular form of navigation, more and more examples are popping up all the time.

Getting Started

Avoid iFrames

Avoid iframes when implementing sticky navigation.

This might seem like a straightforward way to implement sticky navigation, but avoid this method. iFrames cause more problems than they solve, particularly with cross-browser compatibility, security and search engine optimization. iFrames have their place, but they shouldn’t be a major part of your HTML layout.

CSS

CSS is a great way to implement sticky navigation. It also seems to be the most straightforward, most lightweight and quickest to code. The three things to pay attention to are position, margin-top and z-index. Setting the menu’s position to fixed disables the element from scrolling with the rest of the page. This will likely throw off your margins if your navigation is horizontal, so you’ll want to adjust for that. Finally, use z-index with a horizontal menu to make sure the navigation sits on top of everything; this will make the other content slide underneath the navigation as you scroll. Here is the general idea:

#navigation {
   position: fixed;
   z-index: 10;
}

#header {
   margin-top: 50px;
}

You will have to play around with the CSS to make this technique work right for your website. Additional information can be found on the W3C’s website.

jQuery and JavaScript

The Simple Smart Sticky Navigation Bar is one of many good JavaScript implementations.

If you would prefer a jQuery or JavaScript solution to a CSS one, then you could try out one of the following options:

• jScroll
• Simple Smart Sticky Navigation Bar
• jQuery Waypoints
• Sticky MenuBar

Many other solutions and scripts are out there. Please include your favorites in the comments below.

What’s The Bad News?

There are many opinions on this topic, and some would argue that sticky navigation isn’t worth it. Here are some things to be aware of.

Design Limitations

Going with sticky navigation could rule out some design choices that your team might not be willing to give up. For example, the most logical place for horizontal sticky navigation would be at the very top of the page, above everything else. While easy to implement, it might not be what your users need.

Distracting and Intrusive

If not done carefully, sticky navigation can be distracting. Some sticky elements get delayed when bouncing back into position as the user scrolls down the page. Others are so tall or wide that they dominate the layout and impede access to the content. Navigation should be easily accessible but should not compete with the content for attention.

Mobile Compatibility

Fixed-position CSS and certain JavaScript implementations lack support in some mobile browsers, which is a cause for concern among some developers. The article “Organizing Mobile� by Luke Wroblewski has some great principles to keep in mind when creating navigation for mobile devices. Responsive design techniques also offer some solutions for adjusting the navigation based on the size of the screen.

Be aware of the level of support offered by each device. Knowing compatibility issues beforehand will save you time in the end. When Can I Use? has some interesting information on support for position: fixed. Brad Frost has also done some of his own testing and analysis, providing some interesting insight in his accompanying video.

Conclusion

Why do we Web designers and developers continually force our users to scroll up and down the page in search of the navigation? This is not a problem in desktop software, and we now have the statistics to show the benefits of sticky menus. Navigation on 84% of the top 25 most visited US websites could be made quicker by implementing sticky navigation.

Of course, it’s not appropriate in every situation, especially when real estate is tight. But do seriously consider sticky navigation, while always accounting for usability and the overall user experience.

(al)

---

© Hyrum Denney for Smashing Magazine, 2012.

We’ve all heard an awful lot about the painful transition newspapers and magazines are going through. Two decades after the arrival of the web, the search for durable, profitable business models that make sense in the digital age goes on.

And in case you hadn’t noticed, it hasn’t been going particularly well. Most of these organizations still haven’t figured out how to fend off the gremlins gnawing away at their balance sheets—to say nothing of how to reverse the trend.

The internet changed the business of publishing in ways that are excellent for readers, authors, designers, and publishers, but it’s kicked the proverbial chair out from under lots of business models that were established prior to its arrival. Everyone can feel the effects of the publishing industry’s struggle to figure out exactly what value it offers, how to deliver it, and where to go from here.

There is a real need for the services these organizations provide, and a real opportunity for those of us who make our living working on the web to help guide the way. But before we can help solve the problem, we need to understand its history.

“Newspaper” and “magazine” are labels that speak to format and topicality, and plenty has been written about both. But they also speak to how those entities are structured as businesses. What, if anything, did the internet change about those things? And what qualities endure despite the shifting tides? Let’s take a look.

Advertising

Ads have long been central to how mass-market periodicals make money. But late in the last century, advertising’s share of revenue began accelerating. Today it’s not uncommon to crack open the ledgers of a mainstream periodical and find ad revenue making up 80 percent of its total income.

Under this kind of influence, publications—the best of which always excelled at targeting audiences—evolved into exceptional ad delivery vehicles for their tidy bundles of demographic joy. While the ad market was flush, there were few attempts to check this trend and diversify revenue sources. The industry cast its lot with advertising.

Then the internet ate advertising.

The last decade has seen a total cratering of the advertising market for newspapers and magazines. What happened?

On the one hand, precision metrics arrived with the internet. Clickthrough rates, time spent on site, and a host of other statistics became directly measurable and easily comparable, letting us evaluate the effectiveness (and arguably the real value) of ads. This information could only be guessed at a few decades ago, when ad pricing leaned on hefty doses of speculation and artful salesmanship. The web’s data-friendly nature forced ad sales departments to quantify and show their work.

On the other hand, the highly tuned, ultra-targeted advertising practiced by the likes of Google and Facebook brought new competitive pressures. The previous generation of advertising targeted fairly broad demographic tranches: “eighteen- to thirty-five-year-olds,” “Esquire readers,” or “jogging enthusiasts.” To a potential ad buyer, those targets can seem hopelessly crude compared to putting a barbecue ad in front of someone who just searched for backyard grills (the Google play), or feeding the right concert ad to someone whose musical preferences and social calendar you’re keeping tabs on (the Facebook approach).

There’s plenty of debate over whether these approaches really work, or possibly even constitute a paradox, but the economic effect is the same: They drive the price of old-fashioned, mass-market ads—and the per-capita profits thereof—down. (Oh, and it just so happens that Google and Facebook also have unprecedented audiences, so they can compete head-to-head with those good old-fashioned mass-market ads on reach, too.)

Subscriptions

Many of us have been trained to think the internet set the expectation that newspapers and magazines should be free online. That’s partly true, but the fact is that subscriptions were already highly undervalued at most organizations by the time the internet arrived. And it’s largely because of advertising that this happened.

You see, while the ad dollars were piling in, many media companies doubled down, deliberately lowering their newsstand and subscription prices below the break-even point in a gambit to increase circulation. The bigger your circulation, the more you can charge for all those ads you’re packing in—the prevailing wisdom being that the more people saw an ad, the more it was worth. (That circulation number was so important to the bottom line that an industry scorekeeper was set up just to keep tabs on it.)

And the loss they were taking on those dirt-cheap subscriptions? You guessed it—covered by the resulting gain in advertising sales. Publishers were incentivized to gut the price of their own consumer products. Drop the price, sell more issues, get more money back in the form of higher ad rates. To the point where some periodicals were (and still are) handed out for free, just to be carriers for ads.

Insert incredibly vicious cycle here.

The deeply subsidized status of subscriptions meant their perceived value was quite low in the eyes of many publishers. When it came time to decide whether or not to offer subscriptions online, plenty of advocates saw it as a no-brainer. Their play was already about volume, and the internet looked like the biggest volume play in history. Subscriptions online? No thanks, we’ll go free and make up the difference with ads that will reach an even larger audience. You don’t miss what you never really thought you had, right?

And it worked, for a time. But now that the bottom has fallen out from under ads, companies are looking for ways to claw their way back to healthy subscription businesses. A select few are just starting to show signs of progress, often by offering services in addition to subscriptions.

Data transformed into services

Subscriptions and ads weren’t the only legs of the stool that got broken. The other one was data. What exactly does “data” mean in the context of a periodical?

For a newspaper or magazine, data is valuable information collected and presented to the reader that falls outside the purview of core news and editorial content. Think classifieds, want ads, job listings, apartment rentals—even the weather report.

In the past, it was enough for a publication to spend a little time and money gathering this data up and printing it. It was a front-loaded activity, resulting in a largely passive (but useful) product. Readers did most of the footwork, leafing through pages and following up whenever they spotted something useful. And it was damn lucrative.

But this enterprise was quickly outdone by savvier players on the web. Startups that understood passive information has far greater value when it’s transformed into something you can act upon immediately, and in context. Get rid of that highlighter, pal. See that job listing? Just click on it. Boom, you’re done.

Data that’s turned into something actionable via included tools becomes a service. And that service has greater value, both to the end user and to the bottom line of the company presenting it, than passive data alone. The likes of Monster.com, Craigslist, and eBay took data to its next logical step online.

There’s nothing about this that newspapers or magazines couldn’t have done; they just didn’t realize the potential fast enough. The possibilities weren’t self-evident to the leadership at many of these companies, and others surmised audiences would keep coming to them just like they always had. That didn’t turn out to be the case, and static data no longer pulls its own weight at most operations.

A way forward: separating business from presentation

The most obvious thing the internet changed for newspapers and magazines is the physical manifestation of the medium itself. But while the internet introduced new material forms—webpages, device apps, APIs, and the like—they actually speak very little to the damage we’ve just surveyed.

Instead, when it comes to the business side of things, creating new paths for periodicals means recognizing which parts of the equation no longer exist, which new pieces replace them, and which components aren’t coming back at all. As web and app design capabilities evolve to include those of previous media, it’s important to recognize that those things do not constitute business solutions in and of themselves. Conflating presentation-layer technology with business models can be a costly distraction.

Now is the time for web developers, designers, and digital strategists of all stripes to lead experiments with making (and saving) money from the things technology and the web are good at: reach, scale, disintermediation, and a multiplicity of sources, both institutional and civilian. Smartly used, these attributes can help construct the next generation of newspaper and magazine businesses—ones that focus more on opportunity than on loss.

While the game may have changed for publishing’s old economic mainstays, the potential of its digital future remains largely unrealized.

It’s up to folks like us to help write it.

Translations:
Italian

---

RSS readers: Don't forget to join the discussion!

More than one in eight internet users in the UK, US, and France—and nearly one in four American teens—uses a game console to get online, according to studies from 2010 and 2011.¹

This isn’t new. Internet capabilities were introduced in consoles back in 1997 with the Game.com, which allowed users to upload scores by plugging in a dial-up modem and even to check email and browse websites if they had an internet cartridge.

Today’s three main consoles (Microsoft’s Xbox 360, Sony’s PlayStation 3, and Nintendo’s Wii) all have internet capabilities. The Xbox 360 is the only one of these without an official browser, but Microsoft has announced it will release IE9 for the console shortly. Some companies have gone so far as to design experiences specifically for consoles, such as Google’s 2007 version of Reader for the Wii, which is now intended for any TV console.

Add in a vast array of handheld consoles with browsers—like Sony’s PSPs and Nintendo’s DS line—and we have 15 years of internet-enabled gaming devices of all sizes and shapes. Yet to date, we’ve talked about game console browsers very little.

It’s time we change this.

Today’s consoles may offer subpar experiences with little browser choice, but that doesn’t mean we can ignore them. After all, “We can’t predict future behavior from a current experience that sucks,” as Jason Grigsby says.

As more console makers offer internet-capable devices—and as smart TVs continue to enter the market—now is the time to plan how our sites will adapt to these new contexts. And that means getting comfortable with today’s game console landscape.

Who uses a game console’s browser?

TV game consoles aren’t just for gamers. Now they’re marketed and sold for their content-delivery features, such as Blu-ray and access to Netflix. Some consoles also have apps for Twitter, Facebook, Skype, and Foursquare, so there’s every chance a user may be visiting your site through one of these.

According to Pew Internet, 80 percent of American teens age twelve to seventeen own a game console and half own a portable gaming device. Handheld consoles are most popular amongst young teens, with two-thirds of twelve- and thirteen-year-olds owning one.

Among adults, Pew found that overall, men are slightly more likely to own a game console, but women are slightly more likely to own a portable console.

In the UK, young adults ages sixteen to twenty-four are most likely to own a game console, and 20 percent of them visit websites using theirs. Amongst children ages five to fifteen, 5 percent access the internet with a game console more often than with any other device. In fact, this age group is more likely to access the internet with a console than with a mobile phone or tablet.²

Amongst all age groups, game consoles are more popular than tablets as internet-browsing devices, possibly because people are more likely to own a console.

In short, all kinds of people are using game console browsers, for all kinds of reasons. In households that own a PC, a console may be a convenient extra way to browse the internet if there’s competition for the more conventional device. Handheld consoles are also popular with parents who don’t want to give their child an expensive smartphone. Amongst primary-school children, the Nintendo DS is particularly popular; in some schools, it’s even used in lessons.

We’ve made mistakes in the past by assuming which tasks mobile users would want to complete. But just like the thousands of eBay customers buying cars using mobile phones each week, some console browser users are already doing things we may consider “advanced”—like signing up for a bank on the PS3, as twenty people tried to with Kiwibank last year.

Console browser testing

While you may not be able to test your sites on every console out there, it’s helpful to acknowledge their existence and understand their quirks so you can build a good experience for as many people as possible. To do that, consider all three of the major console types:

1. Consoles that plug into a TV screen, such as the Nintendo Wii, Sony PS3, and Microsoft Xbox 360.
2. Handheld consoles such as Sony’s PSP and Nintendo’s DS.
3. Phone consoles, designed primarily as phones but with console buttons (as opposed to consoles with phone capabilities).

As community testing sites pop up around the world, it makes sense to get some of each of these types of consoles into them—particularly those with the most diverse features.

For a TV console testing device, Nintendo’s Wii has a motion controller that’s useful to test navigating a site with. There’s also the new Wii U coming out, which will have a touchscreen on the controller that links to the TV. Sony’s PS3 is useful for testing ease of navigation with a conventional game controller, while the Xbox 360 will be an important device to try when IE9 is released for it.

The two most popular series of handheld consoles are the Nintendo DS and the Sony PSP. The most recent handheld console from Sony is the PS Vita, which has an optional 3G model and can also be used as a controller for the PS3. The older internet-enabled handheld Sony models are the PSP-1000, PSP-2000, PSP-3000, and PSP Go (the PSP-E1000 leaves off internet capabilities).

For the DS line, the DSi and 3DS are useful because they have different browsers. The older DS and DS Lite require a physical browser cartridge rather than having a browser preinstalled or available via download, so it’s likely that fewer people browse the internet on these.

Testing on TV consoles

A large TV screen doesn’t mean better definition. Text can be pixelated and difficult to read, especially when a browser scales content up. Even though TV screens are generally bigger than desktop computer screens, viewers sit further away from them, so they may actually seem smaller.

Sony’s PlayStation 3

The PS3 has a WebKit-based NetFront browser. The browser width is restricted, so it’s a lot narrower than the width of the TV.

The thumbsticks move the cursor and scroll the page. L1 (on the upper left) is a back button; R1 (on the upper right) is forward. Pressing the triangle brings up a menu for actions like search and bookmark, and the D-pad moves the cursor to focus between links on the page.

Multiple windows can be opened and accessed using L3 (pushing in the left thumbstick) and cycled through using L2 and R2 (the lower left and right buttons).

Browser support

• HTML5 support: 68/500 (from html5test.com)
• CSS3 support: 38% (from css3test.com)

Nintendo Wii

The Wii has an 800px-wide Opera 9 browser (the height varies depending on the screen). The remote, used like a laser pointer, vibrates on hovering over a link. Moving the cursor to the edge of the screen and pressing the trigger scrolls the page. The + and - buttons zoom in and out. Pressing 1 on the remote goes to favorites; 2 shows a version of the page without layout styles.

The remote feels heavy after typing for a while or trying to pick through links on a page, so navigating can be fiddly unless links are big. This becomes problematic on sites with clickable areas that are small and close together.

Often, a site would start loading, crash, and immediately go back to the console’s home screen without any warning or error.

• HTML5 support: Failed to run
• CSS3 test: Failed to run

Testing on handheld consoles

Like modern TVs, handheld consoles have wide screens, rather than tall ones like a mobile phone in portrait mode. This means many responsive websites show a big-screen version of a site, even though a small-screen design might be more appropriate.

Sony PS Vita

The newest of the PS line, the Vita is the first to include a 3G option. It has a touchpad on the back used in some games to keep thumbs out of the way during play, but the browser doesn’t take advantage of it.

The Vita’s browser is a WebKit-based version of NetFront. Strangely, it identifies itself as Silk in its user agent string, which is the browser for Amazon’s Kindle Fire.

Sites can only be viewed in landscape at 960x544 at 220ppi, so most show a display optimized for wide screen, rather than a small-screen view. Up to eight windows can be open at once.

While the Vita is a Sony product, its experience is nothing like the PS3—the browser relies heavily on the touchscreen and doesn’t seem to take advantage of the game controls on the device.

Browser support

• HTML5 test: 58/500
• CSS3 test: 32%

Nintendo DSi

The DS line is distinctive for its two screens and stylus. The bottom screen is a resistive touchscreen, like the screen on the back of an airplane seat, rather than capacitative, like a smartphone. The DSi screens have relatively small dimensions (256x192) and low ppi.

The DS will take advantage of both screens to display a site optimized for small screens, treating them as a single tall column. On non-optimized sites, the site is mirrored on the two screens: one zoomed in, one zoomed out. There is no multi-touch, so no pinch-to-zoom, making long lines of text difficult to read. There are no font styles like bold or italic either, and text size is limited to a range.³

Browser support

• HTML5 test: 89/500
• CSS3 test: Failed to run

Nintendo 3DSXL

This device has a stylus and three cameras: two on the back for 3D pictures and video and one on the front. Special glasses aren’t needed to view things in 3D, but the device does have to be held at just the right angle and distance. The depth of the effect can be adjusted using a physical slider.

Only the top screen is 3D, and it’s wider than the bottom one, which is a 2D resistive touchscreen. The screens are physically bigger than the smaller 3DS model, but the pixel dimensions are the same (800x240 on the top; 320x240 on the bottom), so text is blocky. When a page scrolls into the top screen, gaps appear on either side because of the difference in the two screen sizes.

The older DS models offer an Opera browser, but newer ones have a NetFront browser installed by default, accessible from the home screen.

Sites are shown in 2D, but images using the MPO format can be viewed in 3D in the top screen. MPO images are a combination of two JPEG files, so the fallback is a single JPEG. The catch is, embedded MPO images can’t currently be viewed in 3D inline using the browser installed on the device; they have to be downloaded and opened as a file.

The D-pad is used to cycle through links; a line is drawn around elements that are selected. The thumbstick is used to scroll.

There are zoom icons on the touchscreen, and the X and Y buttons also zoom in and out. The shoulder buttons go forward and back through the browser history.

On zooming in, automatic text-wrap forces line lengths to adapt to the width of the viewport. The browser can be used while a game is suspended in the background, which allows gamers to look up tutorials or walkthroughs while playing. I’ve noticed this feature appearing on other consoles as well.

In tests, some sites stopped loading because they were too big and the system ran out of memory, which was also a common problem on the DSi.

Browser support

• HTML5 test: 98/500
• CSS3 test: 42%

Testing on console phones

Manufacturers have been attempting to combine handheld consoles with phones since 2003’s Nokia N-Gage. Today, the most interesting of these is the Sony Ericsson Xperia Play, which looks like a phone, but has slide-out PlayStation-style controls.

The screen is much higher quality than the PS Vita. It runs Android 2.3 (Gingerbread). Anytime the game controller drawer is open, screen orientation is set to landscape. Overall, sites look good and the browser is just as capable as that of any other modern smartphone.

Even though it’s closer to a phone than a game console, it’s important to consider this hybrid device. As smartphones compete with handheld consoles, we may well see more like it.

Browser support

• HTML5 test: 212/500
• CSS3 test: 42%

On the horizon

A whole host of devices are on their way that will present new challenges for designers and developers. Internet browsing on consoles is set to increase as console makers release devices with better browsers and more capabilities—features such as NFC for micropayments in the upcoming Wii U, and voice control and Kinect gesture support in the Xbox 360’s coming IE9 browser. There have already been some interesting experiments with gestural interfaces in browsers using a Kinect and DepthJS.

Second screen

All three major TV consoles have or are moving toward a second screen. The PlayStation 3 can already connect with a handheld PS Vita and allow the user to play games on the device directly from the PS3 console (Vita Remote Play). It can also be used as a second controller.

Nintendo is coming out with a similar offering, the Wii U: an updated console and handheld gamepad with a touchscreen that can be used as a keyboard. Users can share with the TV what they’re browsing on the gamepad by swiping the content toward the TV.

Meanwhile, Microsoft has announced SmartGlass, which will enable users to connect a smartphone with their Xbox and use it as a second screen. Rather than connecting with a bespoke device, the console interacts with any phone or tablet.

With SmartGlass and a Kinect, it may even be possible to “pull” content from one screen to another, as demonstrated in Aral Balkan’s hack.

New devices

New players are also bringing interesting devices to the market. One of these is the Razer Switchblade. It’s part Windows computer, part handheld console. The images on the keyboard’s keys change depending on what content is being viewed. With a form factor similar to a netbook, it has a four-inch trackpad within the keyboard area that can also be turned into a miniature second screen. It’s rumored to be using a version of IE7 with a low score of 40 in the HTML5 test.

The Ouya, a TV game console announced and funded on Kickstarter, is due to be released in March 2013. It will feature a conventional controller, and the console will run on Android. It’s not yet known which browser it will have, but it will have web capabilities.

Designing with consoles in mind

Console browsers live in an uncomfortable area between mobile and tablet, desktop and TV. They often act like mobile and desktop browsers, but the way we interact with them is so different.

Jason Grigsby talks about this challenge in his presentation on The Immobile Web: HDTVs and iMacs have the same pixel dimensions, but a desktop is viewed from a few inches away; a TV, from a few feet. On a TV, a linearized design that’s common for small screens may actually be more appropriate than a design for a wide screen. The difference isn’t screen width, but viewing distance. In fact, Google’s TV design patterns even suggest you simulate this experience by using a mobile phone as your “model” when designing.

It’s also very difficult to detect whether a site is being viewed on a TV. User agent strings aren’t a reliable or future-friendly detection method, since many imitate other browsers’ strings. Media types are also often ignored, as Patrick Lauke has noted.

Throw into this mix the possibility of a user viewing a site on TV while interacting with it on a second-screen device, and things get a whole lot more complicated.

What we can do now

We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.

Ethan Marcotte, Responsive Web Design

We can’t tailor experiences for every possible use case on every device, but we can use what we know about console web browsing to build a better overall experience. Like we’ve done by designing with mobile in mind, considering how a site could be used on a console can have a knock-on effect of making it easier to use overall.

Use progressive enhancement so people can access your site’s content even on a device that doesn’t support certain features. Optimize so it downloads fast. Insert media query breakpoints where it’s appropriate for the content, rather than based on widths of common devices. Consider how someone will fill out a form on a console, and look into adding speech recognition to fields.

It’s tempting to focus on retina screen experiences, but we also need to consider how a site will look at the other end of the scale. People don’t replace their TVs as often as other devices, so make sure a design still works well on poorly configured, pixelated, low-contrast screens. Plus, as Cennydd Bowles has noted, while pixel densities increase in some places, they’ll decrease in others as cheap screens appear on more and more devices.

We’ve been here before. As Future Friendly taught us, the challenge of designing for yet more contexts may be daunting, but it’s inevitable. If we care about making our sites accessible to everyone, then we have to start looking beyond desktop and mobile. It’s time we take game console browsers seriously.

Footnotes

[1] According to a 2011 Ofcom report (PDF) and a 2010 Pew Internet study. Ofcom is the UK’s independent regulator for the communications industry and runs both international and UK-specific surveys on the communications market. The Pew Research Center is a nonprofit “fact tank” that provides information on American issues, attitudes, and trends.

[2] UK stats are again from 2011 Ofcom reports: one on devices used to visit internet websites by age, and another on UK children’s media literacy (PDF).

[3] You can read an in-depth writeup of the DSi’s browser on my personal blog.

Translations:
Italian
Portuguese

---

RSS readers: Don't forget to join the discussion!