No one wants to think website visitors are spending time on error pages, but it happens. The 404 error page is one place that these interactions happen rather frequently. Design it in a way that speaks to users rather than encouraging them to leave your site.
More memorable and less frustrating 404 error pages are the most successful. They can also be the most fun to design. So what can you do to create the best 404 page for your site? Here are a few tips, tricks and gallery of great examples.
What is a 404 Error Page?
Website visitors land on a 404 error page when they try to visit a page that does not exist. This can be because the page has been removed, the server or internet connection is down, users have clicked a broken link or typed a URL wrong.
Typically 404 error pages result in one of the following messages:
404 Not Found
HTTP 404 Not Found
The page cannot be found
The requested URL was not found on this server
When it comes to the overall design of 404 pages there are two options – a generic 404 page or a custom 404 page. Generic pages just spit out the messages above with no regard to the design. Custom pages are those that you design and create options for. You must have access to the host server to do this. (That is not something we will go into here, but you can learn more about it from A List Apart.)
Good custom 404 error pages tell users what to do if they get misdirected in some way. Pages should include usable information that will help a visitor stay on your site and find the information they are looking for. (Hopefully they will have a nifty design as well.)
Basic Must-Have Information
To be most effective a 404 error page should be somewhat simple in nature. It should tell users that there is an error (obviously) and what options they have to move forward from this page.
What a 404 page should not have is a bunch of technical jargon. (You don’t want to scare users, do you?) In all reality, you probably should not even use the headline “404 Error” because many of your users won’t have any idea what that means. Stick to something with more meaning, such as “The page can’t be found.”
There are some other pieces of information that you must have on the 404 page. Remember, the point is to keep visitors clicking if they found the page in error, not lose them.
A strong headline or text explaining to a user why they are here. It is jarring when you land on a webpage that is not what you intended. Make sure users know they are not on the right page, but they are on the right website.
Search. Make sure the 404 error page has the same search functionality (and in the same location) as the rest of your site. That way users can look for the page they intended to visit.
Links to your homepage and sitemap. Likely this will happen as a design element that includes a header or footer that matches the rest of the site.
Minimal information otherwise. Consider stripping away complicated navigation. If a user gets to a page in error, only give that person a few options that will result in success. Too many options here could further frustrate or confuse the user.
Include a obvious call to action. Tell users what to do next.
Make 404 Pages Usable
Part of the design process when thinking about 404 pages should be usability. Include features that make the page both visually appealing and functional for the lost user.
Google has a list of great suggestions for information to include on a custom 404 page in its webmaster tools. These tips include:
Tell visitors clearly that the page they’re looking for can’t be found. Use language that is friendly and inviting.
Make sure your 404 page uses the same look and feel as the rest of your site.
Consider adding links to your most popular articles or posts.
Think about providing a way for users to report a broken link.
Make sure that your web server returns an actual 404 HTTP status code when a missing page is requested so that it does not show up in search results.
Use the Enhance 404 widget to embed a search box on your custom 404 page.
Use the Change of Address tool to tell Google about your site’s move.
To that list of tips is one more for designers: Be creative. A 404 page does not have to be boring if it is technically sound.
Design 404 Pages With Purpose
When you are thinking about the design of a 404 error page, first consider how it works in relationship to the rest of the site. What is the mood or tone of your overall design? How can this page match that feel?
Great error pages mesh seamlessly with the site they live on. If your site has a light and humorous tone, so should the 404 page. The colors and imagery should also have a consistent design. Be careful though in the design not to blame the user for landing on the wrong page. (This happens more frequently than you might think.)
Think about the design for an error page as you would any other page in the overall design scheme.
Maintain design consistency. Use the same color, typography and image styles that are integrated on other pages of the website.
Maintain branding. Using the same logo, header and footer treatment will help users recognize your site.
Keep it simple visually. Less is more when it comes to error pages.
Don’t make users scroll. This is a one-screen design.
Avoid too many gimmicks. While it is a good idea to maintain the tone and feel of your site and brand, too many “extras” can make users forget what they were looking for in the first place.
Apologize and be empathetic. It’s ok to be sorry that a user landed in the wrong place.
If your site requires a login, add a place for it. (Did the error happen because the user needed to be logged in?)
Be creative. Or funny. But test the page first. Make sure random users “get it.”
If you uses “404 error,” add a second line of text telling users what it means or what they need to do next.
12 Great Examples
There’s nothing like hitting a great 404 error page. It eases the frustration of a bad or broken link. Here are a dozen pages that are sure to make you want to stumble upon an error.
It can be hard to think of designing a page that is the result of an error as fun or a place to showcase some creativity, but it an be. Designing an effective 404 page is a mix of simplicity, usability and design flair.
Pharrell Williams gravou o primeiro teledisco de sempre com 24 horas. O músico dos N.E.R.D escolheu o tema “Happy”, que compôs para a banda-sonora do filme de animação Gru – O Maldisposto 2 , para um vídeo interativo que conta com participações de nomes como Steve Carell, Jimmy Kimmel ou Magic Johnson.
Siga o link 24hoursofhappy.com para ver o teledisco completo, que conta com direção criativa de Woodkid.
Flat Design or Flat UI has been one of the most talked about trends in web and user interface design this year. It has frequently been compared with skeuomorphic design, because of its completely opposite principles and style.
Designers have voiced questions over whether this is a lasting trend or just another passing fad. Regardless of the future and the voices against flat, most designers have been tempted to try implementing this trend in some of their work. Here we’ll delve a little deeper into the style, its historical roots and how to start designing in the flat style right away.
A warning before we begin: flat design can be used to create really beautiful, simple interfaces, but it’s not necessarily appropriate for every project. Be mindful of what you’re trying to achieve visually and what you want to communicate.
So, what is Flat Design?
As the name indicates, flat design is defined by flatness of style: simplifying an interface by removing extra elements such as shadows, bevels, textures and gradients that create a 3D look.
The idea is to create a finished design that lives in only two dimensions, without losing any of the functionality that a “regular” interface provides. This creates a new challenge for the designer, because by stripping an interface of its decorations and effects, it becomes harder to define the main actions and elements in a design.
Flat design comes from the wish to create more digital interfaces, and an open canvas for interface innovation in digital devices. A good example of flat design is this icon design collection for Mac OSX, where some of the most famous Mac icons are re-imagined as flat versions of themselves. You can easily see how the icons maintain their style and form even though they’re stripped of details, shadows and textures.
Evolution of Flat Design
Historically, in design as in fashion, trends tend to shift continually between the complex and the simple. This is becoming more obvious in the visual design field, especially in web and multimedia, where designs are more ephemeral and don’t last as long as in traditional print supports.
The term “Flat Design” was coined and popularised by Allan Grinshtein, from LayerVault,a Version Control for Designers. In his post “The Flat Design Era”, Allan explains that “elegant interfaces are ones that have the most impact with the fewest elements”. The idea is that a minimalistic interface can be better suited to its function when compared to a more embellished, complex one. The community took this on board, having being bombarded with skeuomorphic interfaces over the past year.
Since then, flat design has come on in leaps and bounds. Most flat design schemes have five characteristics – no added effects, simple design and UI elements, a focus on typography, a focus on color and an overall minimalist approach. You can find out more about these characteristics in Designmodo’s post on the Principles of Flat Design. You might also want to check out the Flat UI Free Interface Kit.
Flat Design and Microsoft
The biggest player in Flat Design, and the first to bring this style to the forefront, was Microsoft. In 2006, Microsoft launched the Zune music player. It was expensive, applied DRM to your music files and was a commercial flop. But even though Zune wasn’t commercially successful, it was a first step in defining the rest of Microsoft’s design for years to come. Zune’s interface was minimalistic, with a focus on light and big typography, and an interface free of surplus details and elements.
From 2006 to today, Microsoft has used Zune as a foundation to develop its image and visual interface, becoming cleaner and flatter. Other products from Microsoft also influenced this style, such as the Xbox 360 dashboard, a square-based interface that used simple iconography and typography. Windows 8 “Metro UI” was probably one of the biggest interface overhauls at Microsoft. Its simple geometric interface was replicated shortly after on the Windows Phone 7, a smaller, mobile version of Windows 8 interface.
How to create a flat design?
When creating a button, using a border, gradient and drop-shadow will make the element stand out against the background and content. This makes it easily identifiable as a clickable element.
When creating a flat button, you can’t use these details, so the focus should be put on grid organization and color contrast. You can use bevel and shadow as long as you keep the flat look of the button, but you’ll want to make these controls as simple as possible.
Forms are a crucial element to get right in a flat design. Text areas, inputs and dropdowns shouldn’t use inset shadows as they usually do by default. You can change this by styling the form elements with CSS yourself: see this post on how to create a simple login form and style. Or, if you want to have full control over your elements, try using a plugin that supports themes such as uniformjs and style these themes the way you want, or even create new ones.
Typography is a very important element in flat design. Since the interface is more minimalistic, you can use typography to help you create the style and mood you’re looking for. You can set a mood just by using a custom and specific font with a flat design outline. Since the background is simple, the font will pop out and set the style for itself. See these uses of typography in flat design to inspire you and learn how others are using it to achieve a particular look.
A fundamental part of designing an interface is defining a color palette. The color schemes used in flat design interfaces tend to be bolder and brighter than some other color palettes. Flat UI Colors was developed with this in mind and is a great place to check out some of the best (and most popular) colors being used in flat design today.
When picking a color palette, remember to think about how colors will help users navigate a site. Be sure to specify a color for the main actions on your website: buttons such as “Submit,” “Send,” “See More,” etc. should all be the same color, ideally a vivid one which will provide a strong contrast with the background. If your logo or brand has a main color, that should be the one used for the main controls. Don’t overuse it though, or you risk make it less important in the user’s eyes.
You should also choose a secondary button color, usually a light gray. That way you can line up two buttons, for example “Submit” and “Cancel”, with “Submit” as the main action and “Cancel” a secondary one. Color choice is especially important in flat design, because when you’re using flat buttons, these colors will be one of the main identifiers that help the user recognize them.
Usually, you’ll want to make buttons square or square with rounded corners, depending on the style of the site. You can be more creative and use other shapes such as circles, triangles or even custom shapes, but keep in mind the latter might be a bit more risky. Be sure to maintain consistency throughout your interface controls, and to organize content in such a way that the user will be able to identify and recognize your titles, content and controls.
Below you can see the difference between a regular Twitter Bootstrap button and the same button in a flat style on Flatstrap, a flat version of Twitter Bootstrap. The regular button has rounded corners and a really subtle gradient and drop-shadow, while the flat version is completely stripped of these effects, merely changing to a darker shade on mouse-over.
Where should flat design be used?
Flat design should be used moderately. Even though it’s a simple way to create a light and minimalistic interface, it isn’t right for every website. For example, flat can be great if you’re designing a portfolio, or web tech startup site, but it can be a limitation if you’re trying to create something more complex. If you’re designing a website for children, you’ll probably want to make it flashy and colorful, full of fun elements and animated characters. In the same way, if you’re creating a gaming website it should be all about graphics and effects, and the design should be connected to the game.
These types of website can be done in flat, but the flat style may end up harming your website. Always keep in mind your target audience and the message you’re looking to convey. If flat design can be used while keeping your message clear, use it, but don’t make a trend or a visual style more important than your website’s content.
Usability is (always) more important than looks
If you’ve made the decision to create a flat design for your website or product, be sure to test your mockups or prototypes with real people to ensure that your work achieves its objective. You can also try A/B Testing to test two different designs and see which converts more. The main purpose of a web app, mobile app or website should always be to clearly communicate a message and provide a usable and intuitive interface for the user. It’s the designer’s job tomake sure a certain design aesthetic doesn’t hurt usability.
If you create a beautiful design that users can’t understand, then you are hurting the product. Trends and styles should always be used in harmony with the objectives of the project. It’s easy to lose yourself when creating visual work that’s clear in your mind, but at the end of the day, numbers and tests with users are always the best way to know what’s really working and what’s not. Sometimes a simple change can make a great difference to the user.
So, should I use Flat Design?
Always keep in mind that a trend is only a trend. Try to create a great design, but one that is right for your target user. The priority is to create a functional and usable website, not a good-looking and trendy website. As Wells Riley said in his post Less Aesthetic, More Design, “Design is a form of problem solving. Never forget that.”
We hand-pick some amazing examples of HTML5 in action, and talk to the designers behind them to find out how they were made.
HTML5 is the latest version of HTML – the markup language used to display web pages. Although it’s technically still in development, it’s very much ready to use today, to build websites and web apps.
Of course, we’re a very long way from every web designer using HTML5 to build their sites. So here, thanks to our friends at.net magazine, we’ve collected together 65 examples of HTML5 in action that show what it can be used to achieve. Check out these brilliant websites and hear from the people who made them just how they achieved their goals. Meanwhile, if you want to learn more about HTML5 then check out our list of great HTML5 resources.
Subtask is a web application for structuring and organising projects using mind maps. Developer Michael Partheil chose HTML5 because he wanted the web app to feel native, run across multiple platforms and rule out Flash, Silverlight and so on.
But as he points out, this is easier said than done “because support for several HTML5 features isn’t that good on mobile devices”. Subtask includes a host of HTML5 – including XHR2 for file uploads, localStorage and application cache for offline support, SVG, new structural elements and Server-Sent Events.
Arsenal.com is the home of the Premier League football team. It was recently relaunched by digital agency Rippleffect. Twenty per cent of traffic to the site now comes via mobile, so the team wanted to give those users a better experience.
“HTML5 allowed us to code cleaner and make the markup more accessible with the benefit of the new tags,” developer David Churchill explains. “It also allowed us to create a more data-driven site via the use of the new data attribute types, and this helped us achieve our aim of serving the same markup to all devices.”
Churchill remarks that the site also uses a number of new form input types (such as tel and email) to aid UX and the video element on non-Flash enabled devices. Data attributes proved invaluable for serving different size images to different devices, and Churchill explains that “using a placeholder element containing a data attribute for each image size allowed us to determine which image to load on the client side, optimising bandwidth for visitors.”
Moodmet is an experimental project to plot people’s mood around the world. Developed by Carlos Palol, it uses geolocation and localStorage.
Geolocation is required because each user’s contribution is only useful when stored against its location. Palol explains that localStorage is used to “preserve the user’s viewport of the map between visits. This is a very fast and convenient way to store client’s state data.”
Is this the coolest HTML5 experiment yet? Certainly the interactive audiovisual experiment to promote the Nike+ Fuelband (see our reviewhere) is enormous fun and strangely addictive.
The site, which you’re best off viewing on a desktop computer in a modern browser like Chrome, is a audiovisual feast of colourful abstract dots, which spring to life when you start moving your mouse around.
You essentially create your own animated dance track in the process – so headphones are essential! Plus we’d recommend the Full Screen option for maximum immersion. The site was created by Los Angeles studio Fair, with Dinah Moe, David Mikula, Alaa Mendili, and David Knapeg working on the project, with music by Nosaj Thing.
For their new single Preflight Nerves, Melbourne-based electro folk band Brightly came up with a cheeky little solution based on the Twitter API. Basically the online music video serves up the lyrics of the song as highlighted portions of the latest tweets, against a background of archive stock footage. This unique approach has got the band a ton of publicity via social sites like Reddit, Facebook, and Twitter.
Facebook Stories is a site about sharing extraordinary stories of people using Facebook. It sits outside of the Facebook domain and uses new HTML5 elements, video, data-* attributes and SVG. The site was designed and built by Area 17.
He did have some hurdles to overcome though, noting that D3 is intended for graphing, not animation, “so the arc method isn’t for drawing a curved line, but a part of a pie chart. This same unfamiliarity followed through to the CSS as the styling attributes are different for SVG than for regular HTML elements.” Byrne explains that in the main he does like SVG, because “it’s HTML elements, so you can have events and CSS transitions and what not on them. I fell out with canvas ages ago for not being so easy to integrate and style.”
Security firm Grupeme approached design agency Bürocratik wanting a name, brand and website for a new product on the alarm market. Grupeme wanted all of this to surpass its competitors. EnterVideoGuard.
The team at Bürocratik decided to use HTML5 because they plan to make some content available offline and use geolocation to determine a user’s location for driving directions. The Bürocratik team believe that this is the most exciting time to work in the web since the beginning of web technology. “The future of HTML5 is in the hands of developers and browser manufacturers,” reckons creative director Adriano Esteves.
If you’ve ever had to do a presentation, you’ll know how long it takes to wrestle presentation authoring software to ensure consistent headings, spacing, colour and so on throughout – and then you’re left with the content in some proprietary format that you can’t really put online.
Vadim Makeev has written Shower, an open source HTML5/CSS3 presentation utility that gives you a slide overview, individual full-screen slides and works in all modern browsers, including IE10. You can find the GitHub repository here.
“I made it for myself initially, so that I didn’t need to create new pages from boilerplate code whenever I wanted to try out little canvas demos and tests,” says Roast.
Southern Africa Travel was built by Luke Hardiman of newrelease – a tiny web design and publishing outfit based in Cape Town. Not only is it impeccably designed and usable but also uses lots of HTML5 under the hood, including section, article, aside, footer, header, time, figure, figcaption and some data-* attributes.
The site also makes use of microdata, with Schema.org as a reference. “This client has a vested interest in having their content crawled in a meaningful way,” explains Hardiman. “The Organization schema even allows us to flag them as a travel agency, which should serve to reinforce their Google Local listing at the markup level. Microdata seems, to me, to be a risk-free early- adoption opportunity. The engines and browsers that don’t get it will simply ignore it. [And since we’ve] built it into the ExpressionEngine templates, [the client’s] content team don’t need to know what it’s for or even that it’s there at all.”
The site is built with HTML5, and Nelson comments that “learning the semantics and basic rules was actually refreshing”. New elements are used, and Nelson explains that using the <video> element the team could “easily embed a movie, use fallbacks for each browser, overlay jQuery and give visitors a chance to try out the game without leaving our site”.
Built by LBi for Etihad Airways, Yas Marina Circuit enables you to race around Abu Dhabi’s famous Yas Marina Formula One Circuit. Guy Jarvie from LBi explains that there’s “an abundance of interesting facts around the Yas Marina Circuit and Abu Dhabi’s motorsport scene. The danger was to either create a ‘too long; didn’t read’ page or skimp on content. HTML5 solved this problem for us as it allowed us share a wealth of information, but present it in manageable slices.”
The use of HTML5 revolved around the site’s background, where the team converted a four-metre-wide image, weighing in at 1.4MB, into 3000 lines of SVG that reduced its size by more than 20 per cent. Jarvie also notes, following some particularly careful planning, that “thanks to HTML5’s versatility, code already available and hopefully our preparation, the actual build process was not too painful.”
Philippe Pérusse decided to create this free poker clock because he was hosting a poker tournament and wanted to make sure it ran smoothly. The site was built to work on TVs and iPads, and uses HTML5 audio with the media API to play buzzers.
It also uses a few entirely new elements: Pérusse enthuses that forms “are the best thing in HTML5 and the one that saves us the most time… number input types with min and max, validation, placeholders and so on”.
Energy Centre is Ireland’s leading installer of solar panels. The company recently asked Colm Tuite to redesign its website. The site is responsive and was built mobile first using HTML5 and Ruby on Rails. Tuite explains that he develops all his sites with HTML5. “HTML5 elements are much more semantic, which helps code readability if you’re working with a team, and also helps to minimise CSS selectors,” he says.
The site uses a number of new elements and data-* attributes, and some ARIA for accessibility. Video is currently embedded from YouTube, which works across devices, but Tuite may switch to a full-blown HTML5 player in future.
An increasing number of big, consumer-facing sites now use HTML5 under the hood in an unobtrusive way. A great example is the site of the UK’s biggest electrical goods retailer, Currys. Lurking underneath its traditional fridge-flogging design are HTML5 structural elements, ARIA roles and a mechanism for responsive images.
“We were already using HTML5 before we deployed the new responsive website,” Mark Adkins, proposition development manager at Currys and PC World, tells us. “We use ARIA for main [content], navigation and contentinfo roles. It is best practice in terms of accessibility, something that is important to us.”
“We started to develop our own way of loading images using a deferred load (with data-* attributes) on a basic <img> markup,” he continues, “as we only deal with two different image sizes (one for desktop, and one for tablet and mobile). The <picture> element proposal is really new in the W3C draft, and is still a proposal. As we were developing the project more and more documentation was forthcoming on this.”
When Microsoft asked LBi to create an interactive animated story to promote IE9, they jumped at the chance. That’s not surprising considering who was on board for the project: director Edgar Wright and Marvel and Lucasfilm illustrator Tommy Lee Edwards. “Edgar had the opinion that any technology we used should fit the story rather than being shoehorned into the narrative,” explains LBI’s Simon Gill. “This led to a hectic two weeks at the outset, sorting out the main story points, with ideas for elements to build and how they’d fit together. We wanted to try and redefine what an online film is – learning how a Hollywood scriptwriter, an illustrator/animator and a software company could combine on something interesting.”
The decision to use HTML5 and not Flash was a straightforward one, says LBI’s Riaz Ahmed. “While you can do some really cool stuff with Flash, you can now almost do the same with HTML5, CSS3 and jQuery. The mix of these technologies, coupled with SVG and canvas, allows you to put together a visually rich, immersive and interactive experience by enabling developers to create stunning 2D/3D animations and transitions, with the ability to play back high definition audio and video. These technologies are very appealing to developers and ultimately to the web audience, who have no need of downloading or maintaining any plug-ins.”
Roger Dubuis is a master craftsman: a highly skilled, talented watchmaker for those with an eye for beautiful design and a deadly accurate timepiece. The website for his stunning range of watches needed to reflect those qualities; built by French agency Ultranoir and using a host of HTML5 features, the site offers memorable experiences for the user.
Mathilde Vandier, strategic planner at Ultranoir, reveals that along with HTML5 audio and video, the History API is used “to offer a fluid navigation through pages without total reload – it helps to create an immersive experience”. In addition, the closely related Geolocation API is used on the store locator to localise users on the map. Vandier goes on to tell us that if there is an occasion where a browser doesn’t support the site “we provide fallbacks (which are invisible for the user) to keep the consistency of the experience”.
When Icelandic pop icon Björk needed a new website, Jam3 built her an animated 3D interface that screams “wow factor”. The commission came about because of a blog post, explains the agency’s Mark McQuillan. “It was an innocent post about an HTML5 experiment. We were doing some testing of some 3D techniques in the canvas tag. Our developers’ regimen includes regular R&D time so we try to document a lot of our research in our labs blog. At the time, the “whole world was moving to HTML5” so we were just playing around. Björk’s people were searching for some pretty specific HTML5 capabilities and our post looked like a good lead to them, I suppose. The phone rang at Jam3 one afternoon, we were able to tell them more about our team and deep technical capabilities, and the rest is history.”
Jam3 collobarated with art and design partnership m/m to create the site, and getting the 3D data exported and rendering it in a way that it would perform was the main technical challenge. “The first task was to figure out how to use a Google SketchUp file that m/m created the galaxy in. Getting the data out proved to be one of the most interesting challenges our team has ever faced. It wasn’ exactly like we could do a ‘File > Export Canvas’. There was no documented way to do what we were trying to do.
Andy Wilson Financial Services’ website is made by Laser Red and uses HTML5 structural elements, microdata and native video.
“We did initially look at using a library for video fallbacks, but we didn’t think this was necessary,” developer Elliott Stocks tells us. “We used a common method to play Flash if HTML5 is not supported, simply combining a Flash object within the <video> tag. We haven’t had any problems with this, and we prefer keeping the libraries to a minimum.”
Microdata is a contentious part of the HTML5 spec, because many believe HTML should instead incorporate a W3C standard called RDFa. “One of the main reasons we decided to use microdata was because it is backed by some of the biggest search engines,” Stocks explains. “We could have used RDFa but decided against this due to its lack of support in HTML5, its difficulty of use (compared to microdata) – and it doesn’t have the backing of search engines like microdata does” (see this article on .net magazine).
Envelopments has a product customiser tool made with canvas by Bold Array. Creative director Jason Kilp says that “a key requirement was a similar experience on both desktop and tablet devices. Flash was off the table since the iPad does not support it.
Shiny Demos is made by colleagues in the Opera Developer Relations team. A member of the rival Chrome Dev Rel team, Paul Irish is complimentary (“A fine job. Polished work, well developed, novel demos. And great on mobile!”). Designed by Vadim Makeev, it showcases getUserMedia, SVG, canvas, WebGL and more. Try it out, even on mobile!
Authentic Jobs from Cameron Moll has been a popular site for web jobs since 2005. Last year it underwent an HTML5 facelift. The reason for switching to HTML5 is explained by developer Ben Bodien: “Originally (and perhaps surprisingly), it was block-level anchors that led us into HTML5. The job listings on the homepage used to be marked up with a table, but there was no way to link an entire table row with a single anchor.”
The team have implemented a number of the new elements and form input types and attributes, as well as the closely related Geolocation API. Perhaps most interestingly, though, Bodien explains how they’re using the History API to “track changes to the search and filtering controls on the homepage, so that people can bookmark and share specific filters, as well as being able to use their browser’s back and forward controls to navigate through their changes”.
This is a lovely little site developed by Aptitude Lab in Valencia for Spanish indie rock band Metropol. Using a combination of canvas, the Drag-and-Drop API and video, the site becomes truly interactive and enables you to choose tracks to play on the video jukebox. Using graceful degradation, developer Miguel Santolaya explains that users “with IE8 or under will see a YouTube reproduction list instead of HTML5 videos, and they’re advised to use a modern browser to live the full experience”.
The team at Aptitude are excited about the future of HTML5. Santolaya says: “For us, HTML5 is the future. Before this technology, 70-80 per cent of our websites were done with Flash. In a couple of years, probably 100 per cent of our websites will be done with HTML5. We’re really excited with all the possibilities opened [up] with these new features. And that’s just the beginning! A new era is coming. Audio, video, all the canvas stuff … It’s amazing.”
Museums Sheffield is a charitable trust responsible for four of the steel city’s museums and galleries. The site was developed by the team atRckt and uses a host of the new semantic elements provided by HTML5.
Developer John Noel explains that in addition to the features that currently exist, they’re developing a “WebGL interface (with Flash fallback) for 3D exploration of some of the museums’ collection items”.
The team are also looking to integrate HTML5 audio, video and canvas, but Noel is keen to point out that “these are always going to be enhancements rather than core to the experience of the site”. He’s excited about the future of HTML5, but also warns that: “If your hatred of IE already burns brighter than the sun, HTML5 is not going to be for you quite yet, because it only compounds well-known issues.”
When translation agency Living Word requested a re-energising digital relaunch, Tribe took to creating a site to stand apart from the rest. The site needed to be effectively designed and developed to display the content in as succinct a way as possible – keeping a viewer interested without images was always going to be a challenge.
The revamped Flickr Uploadr was designed by Scott Schiller who explains the purpose of the redesign. “The goal was to upgrade our upload process to include editing controls where titles, tags and descriptions can be added upfront, moving towards a single ‘upload and organise’ experience,” he says.
“Our previous ‘Uploadr’ only pushed files to the site and did not include built-in editing and organisation features, so it always felt like the metadata step was missing.”
Drag and drop
It has only recently been possible to do all this in the browser. “We use new HTML5 File APIs for file access, including drag and drop of files right into the browser,” Schiller continues, “and the subsequent retrieval and parsing of EXIF data client- side.
“We also use Web Workers to parse EXIF data, which allows us to quickly and efficiently show image thumbnails before any bytes have been sent. XHR2 is used for network transport, including progress events and error handling.”
LoveTEFL is another website for a company that has zero to do with web technology, showing that HTML5 is now becoming mainstream and mature enough to move beyond geeks to real people and their browsers.
LoveTEFL trains and sends UK graduates to teach English in Southeast Asia. That didn’t stop it using HTML5 for its site. “The market we’re aiming for doesn’t only use desktop computers,” says director Gordon Mathie.
“We want a site that can work on phones, tablets and laptops for young graduates who make up the majority of our applicants, and [for] our partners overseas who might be using portable devices in areas with unpredictable power and slower networks. We’re not quite there, but HTML5 seemed a sensible foundation.”
Every once in a while a website redesign comes along that’s talked about by people who (gasp!) aren’t even on Twitter. Like Mike Davidson’s 2003 redesign of ESPN, which opened the floodgates to sites that are purely CSS in terms of layout, the redesign of the Boston Globe site shows the way forward for mobile-friendly, adaptive, responsible design.
Scott Jehl of the Filament Group explains: “We wanted the page to perform well on underpowered devices, which meant figuring out a way to load assets efficiently and responsively.
“We used HTML5 for a number of reasons,” explains Scott. “Mostly, it’s future-friendly and offered features that were useful in our feature set. We also appreciated the ability to use newer semantic elements in place of div/p/span, where they made sense.” Examples of HTML5 don’t come any better than this!
Written by 16-year-old Mitch Samuels, Catifier uses HTML5 magic to add cats to a background image of your choice. Simply paste any image’s URL into the box on the homepage, then drag from the selection of felines to ‘catify’ it to the desired extent. Our screenshot shows a couple of well-dressed cats.
The Drumlet is an app built by Epic as an experiment to see what could be created using HTML5’s audio API. Partner Henry Daubrez explains that Epic has, “some electronic music lovers working here, and it was a great opportunity to blend everything on a fun project”.
‘Clerkenwell Close – The Pathway of Smokers’ takes us on a journey through the streets of London providing messages along the way. It’s designed and developed by Duncan Deng, who wanted to see what he could achieve to “beat Flash, which seemed to have been dominating the interactive web world”. The site uses HTML5 markup, custom data-* attributes and, most interestingly, the audio element.
A loop of street sounds plays in the background and then, as Deng explains, “A relative <audio> [element] is attached to different locations and parts of the street video.”
Design + Hype is an inspiration site that showcases some of the best creative design from across the web. It’s a side project designed byAaron Tolley and built by Trevor Morris for them to share creative websites, illustrations, typography and more, that they find each week.
Morris tells us that, “inspired by Trent Walton’s talk at New Adventures Conference only one week before launching the site, the aim of the project was to learn new skills”.
“I chose to use some of the new HTML5 elements, such as <header>, <nav>, and <article>, to learn more about their semantics in a personal project setting. Modernizr with the HTML5shiv is included, so the elements are style-able in older browsers, but the target audience for this project is creative types on modern computers using the latest browsers.
Who among us hasn’t muttered tearful thanks to the Unicode Consortium for its vital internationalisation work, and its encoding of useful glyphs such as Unicode Character U+1F63C (Cat Face With Wry Smile) or U+1F4A9 (Pile of Poo)?
With so many languages, emoji characters and weird and wonderful glyphs in the standard, it can be very hard to find the one you want. That is, until Shapecatcher hit the web!
Using <canvas> for you to draw your shape, a variety of HTML5 elements and voodoo magic on the backend, and all coded up by Benjamin Milde for his Bachelor’s thesis, Shapecatcher is, “a tool to help you find unicode characters. Finding a specific character whose name you don’t know is cumbersome. On shapecatcher.com, all you need to know is the shape of the character!”
No more hunting for hammers and sickles, wry cats or poo again, thanks to HTML5.
It’s an in-browser, HTML5 graphing calculator built by the folks at Desmos – a startup backed by Mitch Kapor and Learn Capital among others, that “aims to free education from the shackles of expensive, proprietary hardware and software by building great, affordable alternatives that work inside the browser and on mobile devices”.
Desmos’ founder, Eli Luberoff, told us that they hadn’t chosen to use HTML5 originally: “Honestly – we didn’t at first. Our first draft was originally built in Flash, and we switched for iPad support. We’ve found, however, that the advantages extend way beyond mere iPad support.
“Load time is an order of magnitude faster, computation is faster on modern browsers and the whole thing is way more beautiful and feels more responsive. Where available, we use Canvas, Webworkers and @font-face with fallbacks as necessary.”
James Anderson is one of the best fast bowlers in world cricket and this site, created by Manchester-based agency Cahoona, celebrates his 10th year in the game.
Built with HTML5, it focuses on Anderson’s career in numbers, with inline SVG being used for the graphic visualisation and animation of the facts and figures, thus making the site perform like a large interactive infographic.
Lead developer Scotty Vernon explains that there was a big tussle over whether to use canvas or SVG. “SVG is resolution independent, has great support for animation and is also very cross-browser compatible,” he says, “so it made sense to choose it over canvas.”
“However, for this to happen, IE less than or equal to version 8 needs to be eradicated from mainstream use – and we’re not quite there yet.”
FixMyStreet is an HTML5, responsive, Web 2.0 mash up of public data and user-generated content that is an unglamorous, useful site. Users can view and discuss potholes, broken street lights and similar problems in the UK, and report them to the local council.
It’s made by mySociety, a not-for-profit community of volunteers and (paid) open source coders that runs a number of sites, such asWriteToThem, WhatDoTheyKnow and FixMyTransport, giving people simple, tangible benefits in civic and community areas of their lives.
The Space is a multi-platform site that enables you to experience the arts for free. The Arts Council England and BBC commissioned the project with the BBC’s in-house team also being responsible for the build.
Technical lead for the project Mo McRoberts notes that, “employing HTML5 was the only way that we could target the range of platforms that we wanted to, in the relatively short development time available, and from a single codebase”.
The site uses an impressive range of HTML5 features including new elements, form attributes and input types, as well as <audio>, <video>, data-* attributes, canvas, the History API and localStorage. In addition to that, some of the third-party pieces of art use extra HTML5 features.
The Listening Machine is an interesting, interactive piece of art that analyses Twitter and plays back a musical representation of tweets.
Spanish agency Nectar has built a new site for Lois Jeans using HTML5 – primarily because the firm was seeing a much larger percentage of mobile traffic visiting the site, so couldn’t rely on Flash. The site uses new elements and HTML5 video.
Raúl Ortiz from Nectar explains the agency, “used the <video> tag element with the three alternative versions (.ogv, .webm, .mp4) of the content for the optimal playback in the most variety of browsers (open and closed source formats).”
Ortiz also remarks that while Nectar loves the idea of open standards for the web. “There are clients who need certain closure of content for some reasons (intellectual property, security and so on) and it’s difficult, if not impossible with the openness of this new technology.”
As you know, to be a fully qualified designer you need a check shirt – Schnaydermans shirtmakers can help you out.
The site was built by Swedish ecommerce agency Pangora; Account manager Björn Walther explains that it uses many of the new HTML5 elements as well as data-* attributes.
“[Pangora] aims to build sites that are exciting for both our customers, their visitors and our teams. HTML5, as a future standard, was a natural choice in that perspective,” Walther continues, adding, “the readability and beauty in the markup is fantastic.”
Following the site’s launch Pangora is keen to evaluate the effects of HTML5 on ecommerce – and its impact on SEO for Schnaydermans.
The Lincoln Cathedral website was made by Laser Red to replace a Flash site that had become outdated and inaccessible for many new users, according to creative director Liam O’Leary (just one of many examples of HTML5 again eschewing Flash).
“We used HTML audio for the Choral Evensong to make it accessible to a range of users,” he says. “There are noticeable speed improvements compared to a standard Flash Player.
“The background gradually fades into three colours, similar to light passing through the coloured windows in the Cathedral. We used <canvas> for this.”
“We added extra CSS to try to keep the original design and layout of the website similar for users of older browsers, although we tell them they’re out-dated. They can hide the message if they don’t care.”
Cufon was used because @font-face rendering of some browsers was unsatisfactory, with fonts appearing very sharp and, at some sizes, unreadable.
Fritzo Keys is a musical instrument app that has a continually playing, 32-voice background accompaniment. Developer Fritz Obermeyer created it as an experiment and feels it really pushes what HTML5 audio is currently capable of.
The site uses audio elements, canvas and web workers, and if you’re looking for examples of HTML5 that are more experimental, this is a great place to start.
Obermeyer explains that, “to keep the UI responsive the app does all of its synthesis in a background web worker and sends a data URI of a wave file back to the main window about five times per second. The main window then creates audio elements and plays these back, overlapping the sounds to accommodate timing jitter.”
It also plays foreground audio on mouse click and motion, which are taken from samples generated on page load. The keyboard is rendered using canvas because of it’s better frame rate than SVG.
Ultimately, Obermeyer thinks that as the media API matures, “we’ll see more HTML5 song-as-app releases such as ‘3 Dreams of Black’ and ‘The Wilderness Downtown’.
At the same time, sites such as Soundcloud will be able to offer more interactive audio experiences such as collaborative mixing and jamming.” A perfect example of HTML5 at its best.
Web design and development company Springload has redesigned New Zealand’s premier arts festival website using some aspects of HTML5. The focus was on putting mobile first with a specific mobile website to accompany the desktop version.
Elements such as time haven’t currently been implemented but the options remain to do so. Some of the new form attributes, such as placeholder, have also been improved to progressively enhance the site and users can plan their own festival programme by adding events to their very own shortlist.
Paul Neave’s HTML5 Webcam Toy is a rewrite of a Flash webcam toy that he had written previously, and is one of many examples of HTML5 replacing content originally authored in Flash.
Neave says, “I’ve always hoped to make a non-Flash version. However, browsers haven’t been able to access the camera without the use of a plug-in. That all changed with the new getUserMedia API defined by the W3C, and I’ve been waiting for a browser to implement it. Opera Labs was the first!” (Check out the Opera Labs build and itsimplementation in WebKit.)
Camera to canvas
Paul could have used 2D canvas manipulation for the effects, but instead chose to use WebGL, as it means every effect can be created with a GLSL fragment shader.
He explains, “A fragment shader is a simple piece of C-like code that runs for every pixel in an image and is extremely powerful. Some effects would have been impossible without it, but the most difficult effects are yet to come!”
Folk singer Laura Marling’s latest album, A Creature I Don’t Know, has an accompanying website made by London agency Studio Juicewith illustrations by Shynola. It’s a site that self-scrolls as a poem is read out, while vivid illustrations and animations with parallax perspectives are revealed.
Dom Williams, technical director at Studio Juice tells us, “HTML5 provided new horizons and fewer restrictions, allowing us to be more free with ideas rather than constrained by browser capabilities.”
The site makes extensive use of new semantic elements and the data-* attributes used to trigger animations at specific audio cue points (such as scene changes, animation cues and so on) and also assigning control speeds and directions of the moving parallax elements.
“They were great for assigning any data we needed to an element, which we could then call to run through a function,” says Williams. “This allowed us to create dynamic functions that could control multiple elements throughout.”
Williams has an interesting story to tell about supporting older browsers: “Originally we had planned compatibility with modern browsers only. However, we decided to remove some of the elements using feature detection (such as the canvas animations) for older browsers to open it up for more fans.
“the-bea.st is supported as a parrallaxing piece on IE7 upwards. Due to the large size of the images and audio, the decision was made not to support mobile due to obvious bandwidth reasons.”
A beautifully crafted site to showcase the Sony Tablet S, designed and built by digital agency Odopod. The site uses many new elements and native HTML5 video with a bunch of CSS3 to boot.
Developer Jason Eberle explains that Odopod’s standard approach to building a product site, “involves using some HTML5 technologies”.
Arguably from a HTML5 standpoint the videos are the most interesting aspect of the site. Eberle notes that working with HTML5 video is great! He goes on to point out that “there’s something satisfying about the simplicity of the video markup and API. Although it lacks some of the more advanced features of Flash video.”
Video for Everybody
Odopod used Kroc Camen’s Video For Everybody markup pattern combined with the VideoJS library to render styled controls and handle API calls.
Finally, Eberle enthuses: “If you’ve been avoiding adding HTML5 features to your sites because browser adoption isn’t at 100 per cent yet, don’t! These new features are here now, they’re extremely cool, and they’re designed to fail gracefully. There’s no reason not to jump on the HTML5 train.”
dabblet is a fabulous little interactive playground for quickly testing snippets of HTML and CSS handcrafted by Lea Verou. You can also save your work as Github gists and then share with others.
There’s a whole host of HTML5 features in use, including: revised markup, the History API, inline SVG, data-* attributes and the contentEditable attribute.
Verou explains that she also uses “localStorage to store drafts, settings and the OAuth access_token.”
She also relies up CORS (Cross-Origin Resource Sharing) to “avoid server-side code, which doesn’t scale as well. This way, even if dabblet becomes hugely popular, the strain on my server will be minor.”
Verou has plans to add further aspects of HTML5 when support arrives for APIs such as the UndoManager. To Verou though, HTML5 boils down to three things: “speed, universality and openness”.
Developer Marius Stanciu-Sergiu explains that using Cross Document Messaging and Web Workers enables “Picozu to perform CPU-intensive operations such as fractal generation, blend modes or third-party interfaces”.
He goes on to note that offline storage is used, “for workspace import and export and also the state of the workspace (window location, various parameters) gets saved into it”.
Sergiu also has plans to make use of the Indexed Database and File APIs in the near future. Finally Sergiu believes that “HTML5 is a big part of the web as we know it today and I can only see it improving. I can only hope that more of its features will be available in the current browsers.”
Knowledge management software iDesk2 is designed to “keep your workflow as simple and intuitive as possible”. The (German language) website’s a bit like that: clean, simple and low in distractions, it’s the work of the small Gebrder Heitz agency, based in Freiburg, Germany.
Developer Hans Christian Reinl and designer Daniel Heitz say they opted to use HTML5 owing to its future-proof status. Everything on the iDesk2 page is ready to use (according to resource site caniuse.com) or provides an accurate fallback.
When asked what’s next, Hans points to correcting some ugly code bits. “I want to make the whole template more keyboard accessible,” he says. “We’d like to use the Fullscreen API, too. Another idea is a responsive design for the website, but this needs to be discussed with our customer.”
Gov.uk is a new site built as a long-term replacement for direct.gov.uk and is aiming to become the single government website. Frontend developer James Weiner tells us that they wanted the site to be “forward-looking” and that they didn’t want to, “release something into the world that would be out-of-date from the off. HTML5 is where everything is going so it was the logical choice to make.” The site uses new elements, ARIA roles and the closely related Geolocation API to show people local services.
Original Hover Effects is HTML5, but its doctype is frankly unrelated to its wondrousness. That’s derived from CSS transitions and transforms. By hovering over an <img> with a <div> containing a paragraph and a link, Flash-like animated blingfests are created, using different CSS transitions on the various nested elements, which can be chained together so that one’s transition-delay is set so that it only begins when another’s transition-duration has completed.
There are 10 different effects achieved from the same HTML, proving that you don’t need Flash for complex eye-candy. Now, promise you won’t rush off and implement each of them on every single page… where are you? Come back!
The website, along with accompanying mobile site, for restaurant chain Zizzi has been built using HTML5 by digital agency Propeller Communications. The site uses a number of new elements, form input types and attributes, and makes heavy use of the closely associated Geolocation API.
The site retains some Flash content but developer Simon Shahriveri indicates that moving forward, “we aim to eliminate the need for Flash and develop alternative ways to integrate animation and interactivity,” with HTML5’s canvas seemingly the perfect fit to replace it.
The menus use David DeSandro’s Isotope as a base and Shahriveri explains how they “used HTML5 [data] attributes in order to target various ways of sorting data”.
Finally, Shahriveri notes that everyone at Propeller is, “very excited about the future of HTML5: being in the creative industry it’s exciting times and we have the chance to progress and develop a technology that’s still fairly new”.
Currency.io is an offline-capable, HTML5 currency converter app for the iPhone built using web standards. The app uses a multitude of HTML5 technologies such as localStorage, applicationCache, document.querySelectorAll navigator.onLine and JSON.parse/stringify.
To get the app to work offline, the team used applicationCache. Developer Ben Schwarz from ab+c explains: “We were able to store everything that the application needed to run, then rely on localStorage to have a copy of the currency conversion prices. All the conversion code is done client-side, which I’m sure could prove a point of contention for such a volatile concept as ‘currency’.”
For more on how it was built Schwarz has recorded a screencast. Although the app states that it’s built for iPhones, Schwarz explains that it will, “function on Android devices as well as webOS, but the experience wouldn’t be as tuned as we hoped”.
Cruise specialist Royal Caribbean International has taken the plunge (sorry) and is using HTML5 in its latest redesign. Frontend developer Paul Welsh, from digital agency Building Blocks, explains the reason for using HTML5. “We encourage our clients to use the latest technologies,” he says.
“HTML5 was a logical progression. HTML5 is at a point where there is enough support for most elements in modern browsers, but also enough fall-back options for those without.”
New elements are used throughout the site along with ARIA roles and some of the new web forms input types and attributes. Welsh feels that HTML5 and its APIs are “making code cleaner, leaner and more consistent”.
“Beforehand we had so many different ways of doing things, such as form validation,” he says. “I love the idea that we’ll soon be validating forms using the browser’s native tools.”
Another example of progressive enhancement and ‘stealth’ HTML5 is the use of local storage by Fontdeck, a web font solution from Clearleftand OmniTI.
“On Fontdeck, people can enter text and preview it in different fonts,” developer Josh Emerson tells us. “This string gets stored in local storage so that the text remains as they navigate the site.
“One great feature of local storage we’ve taken advantage of is the storage event. This fires whenever local storage is updated on another tab or window. Now every tab can have the same text instantly.
“We originally used another HTML5 API, called session storage, to store text that ensured the text only remained for a current session. What we didn’t want to happen was for a user to return to the site a week later, only to find their text still remains. To us it feels like a session thing.”
Reddit has quietly begun using the HTML5 <time> element on all of its front-page posts.
The element enables you to give a machine-readable date and time in its datetime attribute, while having human-readable visible content such as ‘3 hours ago’, ‘Last Thursday’ or ‘The Feast of St Taneesha and the Immaculate Surfboard’. Other sites using <time>include Github, and any powered by the new WordPress default theme Twenty Eleven.
Time-based sorting, searching and interfaces are bound to get a boost now that Facebook has its timeline feature. Also, search engines Bing, Yahoo and Google have published markup patterns.
They use these to refine their search results, and <time> is one of the markup patterns used.
Previous sites for American rock band The Killers have been built using Flash. Following the launch of IE9, which supports HTML5 video and canvas, digital agency Spark Art felt the time was right to redesign and develop it using HTML5 and related technologies.
Vice-president of engineering Daniel O’Shea explains that the opening panorama is “built using canvas, the tour page uses SVG to plot the band’s touring history on a world map and the video section uses HTML5 video”.
The team came across a few issues with mime types when using HTML5 video, but otherwise found the API easy to work with.
O’Shea does point out that, “double encoding the videos [WebM & H.264] was painful, but we borrowed a few colleagues’ computers after-hours to assist with the extra work”.
He also notes that there are now a good number of libraries and examples, making HTML5 more accessible for developers. Finally, O’Shea says: “Since the stack behind these sites is open, anyone can use their favourite debugging tools and see how things are implemented. We love it when people peek at the code behind sites like The Killers and see how we built them.”
Cell Cycle is a WebGL app for Nervous System, a design studio that writes computer programs based on processes and patterns found in nature, using them to enable customers to create unique and affordable art, jewellery and housewares. Visitors can customise rings and visualise them in 3D before purchasing.
The WebGL app was made by Jesse Louis-Rosenberg and Jessica Rosenkrantz using direct WebGL calls and Processing.js, without Java or Flash.
“WebGL is the only web technology that can directly interface with the GPU,” says Louis-Rosenberg, “so it was important for making the app responsive. It allows for a more integrated web experience and development than technologies that need a plug-in.
“It’s the fastest developing area of web technology in terms of performance and features, so it seemed appropriate to start developing with it now.”
Font Dragr provides a revolutionary way to test custom fonts in the browser. No coding or uploading is required – you simply drag and drop. The site has been updated to take what was a proof of concept and create a fully functional, useful web app.
Font Dragr is chock full of HTML5 and friends, including new elements; the drag-and-drop API; the History API; localStorage; the content editable attribute and more.
Creator Ryan Seddon explains that after the initial load, if you navigate to another page localStorage is used to “do an Ajax request, which will get the view HTML, replace it in the DOM and then cache that view HTML in localStorage. So it only needs to do a network request the first time around.”
Drag and drop
Unlike some, Seddon found the drag-and-drop API to be, “incredibly powerful”, despite, “some quirks and cross-browser differences”.
With plans to incorporate Application Cache and Cross Document Messaging, it’s an HTML5-shaped path for Font Dragr. That’s no surprise given that for Seddon, HTML5 is the future.
“It’s well kitted out, defines features and behaviours succinctly and eventually will work in most browsers, as the latest rendering engines support it or will do in future.”
Curated to avoid information overload and sometimes controversial, The Daily Beast is dedicated to breaking news and sharp commentary. The site is evolving and some shiny new HTML5 markup has been creeping in.
Delving into the source shows that new sectioning elements have been used widely throughout, along with data-* attributes and WAI-ARIA roles for improved accessibility.
The site also uses RDFa, a W3C recommendation for embedding rich metadata in HTML competing with HTML5’s Microformats and Microdata. It’s a pity the site uses a Flash player rather than HTML5 video or audio for playing multimedia content, but the fact that it’s embracing HTML5 is encouraging.
Mediaelement.js is a multimedia polyfill that acts as an attractively styled video player, and much more. Creator John Dyer is a web developer for Dallas Theological Seminary. He tells us: “Most HTML5 players get around this by injecting a completely separate Flash player, but there are problems with this.
“You end up with two completely different playback UIs that have to be skinned and styled independently, and you can’t use HTML5 Media events like ended or time update to sync other elements on your page.
“Instead of offering an HTML5 player to modern browsers and a separate Flash player to older ones, MediaElement.js upgrades them with custom Flash and Silverlight plug-ins that mimic the HTML5 MediaElement API. Once the browsers all ‘support’ HTML5, MediaElement builds a fully skinnable player with features like support for the fullscreen video, and even Ambilight.”
Dyer continues: “MediaElement.js also supports multilingual subtitles and chapter navigation throughelements using WebVTT, and there are plug-ins for WordPress, Drupal and BlogEngine.net.”
With strong font choices, playful carousel navigation and neat tilt-shift imagery, the first impression of the Union Station Neighborhood website entices users to find out more.
The site tells the story of the new urban infill project located around the Denver, Colorado transportation hub, with interactive maps, videos and photography.
“Respect[ing] the history of the station while creating a forward-thinking experience centred on technology”, was the goal that Sean Klassen, creative director of Legwork Studio, aimed for to mirror the approach of the development project. “By combining classic editorial design principles with progressive web development, we’ve done just that,” he says.
One of the Union Station Neighborhood site’s neatest effects is the unique timeline behaviour on the History page to scroll through the infographics and matching content.
“It was really satisfying to see all the sections come together in a smooth flowing motion,” explained Ross McKegney of the Moso team. “The nature and intent of the site really lent itself to this type of treatment.
Many website owners say to themselves, “I want my site to look great on mobile, but I don’t know where to start.”
If you are in the business of building and designing websites, you cannot ignore the fact that many people are going to be visiting your sites on their smartphones and tablets. The Web and the mobile browsers remain one of the top ways that users interact with websites and if they have trouble on their smartphone, there is a good chance they are not coming back.
That’s where responsive design can help.
Responsive design is a concept where you build your website once and then format it so it can adapt to any screen size that accesses it. Designers use HTML5 and CSS to build the sites and set parameters so the content will resize itself whether the user is in vertical or horizontal viewing mode, on a tablet, desktop or smartphone or even a screen as large as a television.
We employ responsive design here at ReadWrite. Go ahead, test it out. If you are on a PC browser, shrink or enlarge the window and watch the content respond. If you are on a tablet or smartphone, switch between portrait and landscape.
See what happened? ReadWrite looks great no matter what size it is, no matter what device you are using.
“We are now looking at how we display and order content differently from screen size to screen size,” said Jeff Moriarty, Boston Globe VP of digital properties in an interview last year. “This ‘responsive content’ concept is emerging and we are starting to see in data that users want different types of content depending on their context and the device they are on. We have to now think about how content performs differently from the biggest screens to the smallest, how that content is organized and even how headlines are written from platform to platform.”
What’s The Best Way To Build A Responsive Website?
The first thing to think of when building a responsive site is simplicity. Web designers love to show off that they can design the hell out of a website. They fall in love with their code and all the cool things that it can do.
“I think the challenge for me is to use it cautiously – and not try to be overly artsy with it,” said Ryan Light, a website designer working at CoachUp, a startup in Boston.
Light says that some website builders may over-design for the desktop, making some websites fun to play with but absolutely impossible to navigate.
“I find that a lot of people overdo it on their actual websites that are rendered in the browser,” Light said. “I find responsive design helpful for mobile browsing – but clumsy for Web typically.”
So designers, keep it simple.
There are a variety of ways to go about building a responsive website. French e-marketing company Splio aggregated some of the best practices in a very long infographic, shown below.
The idea is to focus around content and avoid the pitfalls that certain aspects of websites can create. For instance, pictures and advertisements can be a problem.
Check out the infographic below. What is your approach to building a responsive site? Let us know in the comments.
So much of that evolution is a result of your feedback. In fact, Gmail was inspired by one user’s feedback that she was tired of struggling to find emails buried deep in her inbox. So we built a new email that leveraged the power of Google Search. You told us you were tired of spam, so we set to tackling that, and today your feedback makes it possible for Gmail to filter out well over 99% of incoming spam. You also said that you needed tools to deal with information overload, so we introduced Priority Inbox to help you manage your email (and we’re still exploring new ways to make it even easier).
Simply put, whether you’ve been a Gmail user for 9 years or 9 months, your input helps us continue to keep Gmail current and useful. Thanks for taking this journey with us, and onward to year ten!
I enjoy evangelizing web performance because I enjoy things that are fast (and efficient). Apparently, I’m not the only one. Recent ad campaigns, especially for mobile, tout the virtues of being fast. Comcast uses the words “speed”, “fastest”, “high-speed”, and “lightning-fast” in the Xfinity ads. AT&T’s humorous set of commercials talks about how “faster is better“. iPhone’s new A6 chip is touted as “twice as fast“.
Consumers, as a result of these campaigns selling speed, have higher expectations for the performance of websites they visit. Multiple case studies support the conclusion that a faster website is better received by users and has a positive impact on the business’s bottom line:
Bing found that searches that were 2 seconds slower resulted in a 4.3% drop in revenue per user.
Vendors are pitching a faster web. Consumers are expecting a faster web. Businesses succeed with a faster web. But is the Web getting faster? Let’s take a look.
A key to a faster web experience is a faster Internet connection, but this aspect of web performance often feels like a black box. Users and developers are at the mercy of the ISPs and carrier networks. Luckily, data from Akamai’s State of the Internet shows that connection speeds are increasing.
I compiled this chart by extracting the relevant data from each quarterly report. The chart shows that global connection speeds increased 4% and US connection speeds increased 18% over the most recent year that data exists (Q3 2011 to Q3 2012). I also created an Average Mobile Connection Speed chart which tracks three mobile carrier networks. Akamai masks the carrier network name but over the last year the connection speed of these mobile networks increased 30%, 68%, and 131%.
Speed is a major feature for browsers. This focus has resulted in many performance improvements over the last few years. In my opinion browser improvements are the biggest contributor to a faster web. I’ll sidestep the contentious debate about which browser is fastest, and instead point out that, regardless of which one you choose, browsers are getting faster with each release.
The following chart shows page load times for major browsers as measured from real users. This report from Gomez is a bit dated (August 2011), but it’s the only real user data I’ve seen broken out by browser. Notice the trends for new releases – page load times improve 15-30%.
Web developers don’t have much control over connection speeds and browser optimizations, but they can control the size of their pages. Unfortunately, page weight continues to increase. The data below is from theHTTP Archive for the world’s top 1000 URLs. It shows that transfer size (number of bytes sent over the wire) increased 231K (28%) from March 2012 to March 2013. The biggest absolute increase was in images – growing 114K (23%). The biggest surprise, for me, was the growth in video by 62K (67%). This increase comes from two main factors: more sites are including video and the size of videos are increasing. Video performance is an area that we need to focus on going forward.
Table 1. Transfer Size Year over Year
231 K (28%)
114 K (23%)
25 K (15%)
62 K (67%)
7 K (20%)
6 K (20%)
10 K (125%)
7 K (88%)
Quality of Craft
There are several “performance quality” metrics tracked in the HTTP Archive. Like page weight, these metrics are something that web developers have more control over. Unfortunately, these metrics were generally flat or trending down for the world’s top 1000 URLs. These metrics are hard to digest in bulk because sometimes higher is better, and other times it’s worse. There’s more detail below but the punchline is 5 of the 7 metrics got worse, and the other two were nearly flat.
Table 2. Quality of Craft Metrics Year over Year
# of Domains
Max Reqs on 1 Domain
Pages w/ Redirects
Here’s a description of each of these metrics and how they impact web performance.
PageSpeed Score – PageSpeed is a performance “lint” analysis tool that generates a score from 0 to 100, where 100 is good. YSlow is a similar tool. Year over year the PageSpeed Score increased from 82 to 84, a (small) 2% improvement.
DOM Elements – The number of DOM elements affects the complexity of a page and has a high correlation to page load times. The number of DOM elements increased from 1215 to 1330, meaning pages are getting more complex.
# of Domains – The average number of domains per page increased from 15 to 19. More domains means there are more DNS lookups, which slows down the page. This is likely due to the increase in 3rd party content across the Web.
Max Reqs on 1 Domain – The average top 1000 web page today has 100 requests spread across 19 domains. That averages out to ~5 requests per domain. But the distribution of requests across domains isn’t that even. The HTTP Archive counts how many requests are made for each domain, and then records the domain that has the maximum number of requests – that’s the “Max Reqs on 1 Domain” stat. This increased from 40 to 41. This is a bad trend for performance because most browsers only issue 6 requests in parallel, so it takes seven “rounds” to get through 41 requests. These sites would be better off adopting domain sharding.
Cacheable Resources – Pages are faster if resources are read from cache, but that requires website owners to set the appropriate caching headers. This stat measures the percentage of requests that had a cache lifetime greater than zero. Unfortunately, the percentage of cacheable resources dropped from 62% to 60%.
Compressed Responses – The transfer size of text responses (HTML, scripts, stylesheets, etc.) can be reduced ~70% by compressing them. It doesn’t make sense to compress binary data such as images and video. This stat shows the percentage of requests that should be compressed that actually werecompressed. The number increased but just slightly from 76% to 77%.
Pages with Redirects – Redirects slow down pages because an extra roundtrip has to be made to fetch the final response. The percentage of pages with at least one redirect increased from 67% to 71%.
These drops in performance quality metrics is especially depressing to me since evangelizing performance best practices is a large part of my work. It’s especially bad since this only looks at the top 1000 sites which typically have more resources to focus on performance.
The ultimate goal isn’t to improve these metrics – it’s to improve the user experience. Unfortunately, we don’t have a way to measure that directly. The metric that’s used as a proxy for the user’s perception of website speed is “page load time” – the time from when the user initiates the request for the page to the time that window.onload fires. Many people, including myself, have pointed out that window.onload is becoming less representative of a web page’s perceived speed, but for now it’s the best we have.
Perhaps the largest repository of page load time data is in Google Analytics. In April 2013 the Google Analytics team published their second report on the speed of the web where they compare aggregate page load times to a year ago. The median page load time on desktops got ~3.5% faster, and on mobile was~18% ~30% faster.
Web pages have gotten bigger. The adoption of performance best practices has been flat or trending down. Connection speeds and browsers have gotten faster. Overall, web pages are faster now than they were a year ago. I think browser vendors deserve most of the credit for this speed improvement. Going forward, web developers will continue to be pushed to add more content, especially 3rd party content, to their sites. Doing this in a way that follows performance best practices will help to make the Web even faster for next year.
Responsive design is about more than just layout; it’s about designing for the Web, which means, mostly, for people with browsers. And that’s just about everything we know about the people who visit our websites: they are probablyusing a browser. All the rest we just don’t know.
Up until not so long ago, we used to base our designs on some rather general assumptions about screen size and input type. With the rise of devices with various screen sizes and alternative ways to interact, these assumptions have turned out to be unreliable. We need to upgrade the defaults that we use when we start designing our websites.
A Closer Look
People keep saying that the Web has changed. But has it really? Let’s take a look at all of the things that have actually changed.
In the 1990s, the Web was 640 pixels wide. In the early 2000s, it grew to 800 pixels. A few years later, we decided it should be 1024 pixels. But five years ago, all of a sudden, something strange happened. A device with a very small screen entered the market. Suddenly, our ideas about the size of the Web did not work anymore. Later on, tablets entered the market. People hold these things however they want. Today, the height of the viewport could be bigger than the width! But is that new? Not really.
We never really knew what size the window of our visitors would be. We just assumed it was at leastthe random pixel width that we felt comfortable with. These numbers were always arbitrary, and there were always people who could not see the entire website. We simply ignored them.
“EVERYONE HAS A MOUSE”
We’ve always assumed that everyone uses a mouse. Even though we knew that this was not always true, most designs completely ignored alternative ways of interacting. People who had to use a keyboard, for whatever reason, had a very hard time interacting with our websites.
But because most people did use a mouse, and because back then many designers thought that designing only for the majority was OK, we created websites that were unusable for a lot of people. And this turned out to be a growing number. Many mouseover interactions are completely dysfunctional on a touch device. Because people love these devices, and even managers and designers use them, they are harder to ignore.
“EVERYONE HAS BROADBAND INTERNET”
Another thing we always assumed was that everyone had a super-fast Internet connection, at least as fast as our own. And if they didn’t already have it, they’d have it soon. This was again mostly true; speeds were increasing. But today, more and more people use crappy, unreliable 3G connections all the time. If you’ve ever travelled on a train in The Netherlands, you know what I mean. And if you’ve ever had to rely on the mythical “free hotel Wi-Fi,” then you know for sure that the assumption about the ever-increasing speed of our Internet connections is just not true. This is a big change in our thinking; we really should consider these users. This will have a major impact on what our designs look like.
“EVERYONE’S COMPUTER GETS FASTER EVERY YEAR”
It used to be true that computers would get faster and faster. If you waited half a year before buying a computer, you would get one that was twice as fast, for the same price. This was true of new desktop computers, but mobile devices have priorities other than processor speed. The most important thing for a phone, for instance, is battery life: you really don’t want to have to charge it after every phone call.
And there’s another trend: instead of creating ever-faster devices, many manufacturers are starting to sell ever-cheaper devices. Many people care about price and battery life more than about processor speed. This is also not new: what happened to your old computers? You probably sold them or gave them away. People keep using old stuff. Not everyone has the same hardware as we designers do.
“ALL MONITORS ARE CALIBRATED”
Well, we always knew this to be untrue, right? Only the monitors of visual professionals are calibrated. Most other monitors don’t display colors accurately, and many monitors are downright crappy. Most mobile phones that I’ve tested have pretty decent screens, until you start using them outside, in the sunshine. If you’re lucky, you can read the content, but you definitely cannot see the subtle gradients in low-contrast designs.
I haven’t even mentioned “modern” black and white screens. These, too, are not new. People have always used crappy monitors, and people with bad eyesight have always visited your websites. It’s just that more and more people are seeing a subpar color palette. Instead of buying a state of the art monitor, buying a cheap monitor and several low-end devices to test your work on might be a better investment.
All of these things are not new. In 2002, John Allsopp wrote the monumental article “A Dao of Web Design.” People such as Jeremy Keith and Roger Johansson have written about all of these facts for years and years. And yet, somehow, we’ve always managed to actively ignore them. But we really can’t anymore. The Web actually did change in the last five years, with new devices, new browsers and many, many cool new features. We need new defaults. The old ways of creating websites just don’t work anymore.
In the past few years, we’ve been actively researching new ways to deal with all of these different screen sizes. But apart from responsive design, there are many more challenges in today’s ever-growing pile of devices. We have to find new patterns of interaction: we need interfaces that work on any device. Maybe we have to reconsider that enormous photo carousel on the home page, now that we know that not everyone has a cheap and fast connection. New defaults are emerging, and I’ve collected a few for you here.
The things in this article are not new. Many clever people have written about them in many articles and many books. But these ideas, like all good stories, have to be repeated many times so that people understand and remember them.
New Default: Activate
I initially titled this section “New Default: Touch.” But I came to realize that “touch” has a different meaning for everyone. Some people, like me, think of a single tap when we hear the word. Others think about swiping and complex gestures. That’s why I settled on the heading “New Defaults: Activate.” All devices, no matter what kind of input they offer, let the user activate something in some way.
With a mouse, it’s a click; with a touch device, it’s a tap; on a keyboard, it’s the “Enter” key. There are ways to activate things by voice, and by waving your arms in the air. And many devices offer more than one way to interact. The only thing that all of these devices have in common is the action of activating. Most of them are capable of doing many other things, too, but all of them can activate stuff.
Only recently have we really started thinking about alternative methods of user input. We used to assume that everyone uses a mouse. Hiding content and showing it on mouseover was considered to be a decent design pattern. And it used to work for most people — until all of these wonderful touch devices entered the market. What should a device without a mouse do when content can be revealed only with a mouse? Different devices have different solutions. Let’s look at a simple drop-down menu.
When you hover over a menu item, a submenu appears. But apart from hovering over an item, you can also simply click on it to follow the link. Now, what should happen when you tap on the item with a touch device? Should the submenus appear, or should the link activate? Or both? Or should something else happen? On iOS, something else happens. The first time you tap a link like that, the submenu appears; in other words, the hover event fires. You have to tap a second time to actually follow the link. This is confusing, and not many people will tap a second time. On Android, the submenu appears and the link is followed simultaneously. I don’t have to explain to you that this is confusing.
It’s very well possible to think of complex solutions whereby you define different interactions for different input devices. But the better solution, I think, is to make sure that the default interaction, the activate event, just works for everybody. If you really need to, you could choose to enhance this default experience for certain users.
For instance, if you are certain that someone is using a mouse, you could enable some mouseover interactions. Or if you’re sure that someone has fat fingers, you could make small buttons a bit bigger. But only do so in addition to the default activate interaction, and only if there’s no doubt about it, and only if the enhancement would really make things better. Those are quite a few ifs, and some of them, such as the mouse usage, are very hard to detect — especially on devices that offer more than one way to interact, such as a laptop with an optional mouse, touch pad, camera, microphone, keyboard and touchscreen. Give it some serious thought. Do you really need to optimize for a mouse?
New Default: Small Screens
Growing is easy. Most things grow. Babies grow, trees grow, curious minds grow. They don’t grow by themselves, but you don’t need much energy to make things bigger. This is just what things do when they live. While shrinking things is definitely possible, it’s also much harder. You could, for instance, compress a car to a fraction of its original size. A compressed car does have a certain aesthetic appeal to it, but it is definitely not as useful as it was before. The same goes for websites. Shrinking a desktop website does not always result in a pleasant experience on a small screen.
Cedro di Versailles by Italian artist Giuseppe Penone clearly shows that things grow. On the other hand, the workPapalote Goliad by American artist John Chamberlain shows that shrinking can be aesthetically appealing but may result in less useful results.
To build a responsive website that works on all kinds of screens, designing for a small screen first is easiest. It forces you to focus on what’s really important: if it doesn’t fit in this small square, it is probably not terribly important. It forces you to think better about hierarchy, about the right order of components on the page.
The same principle that we follow for interactions — whereby we design the activate event first and enhance it later — applies to graphic design. We should start designing the things that we knoweveryone will see. That’s the content. No matter how big or small a screen is and no matter how minimal the feature set of a browser, it will be able to show letters. Because this is about the only thing we know for certain — since color is absent on most Kindles, most of the latest CSS doesn’t work on old browsers, and layout is of minor importance on small screens — starting with the text is logical.
I wrote an in-depth article about defining breakpoints on the basis of typography, so I won’t repeat every detail here. But the basic idea is that you start by designing the relationship between the different font sizes. Almost everyone, no matter what device they have, will be able to see this. When the typography is done, you would start designing the layout for bigger screens; you can think of this as an enhancement for people with bigger screens. And after that, when the different layouts are done, you could add the paint. And by paint, I mean color, gradients, borders, etc.
I’ve presented this as a very strict way of working; in real life, of course, things are not as rigid. I’m not talking about “activate only” or “small screen only.” When I say to start with typography, I don’t mean that you aren’t allowed to think about paint at the same time. Rather, I’m trying to find the things that all of these different devices, with all of their different screen sizes and all of their different features, have in common. It just seems logical to first design this shared core thoroughly. The strange thing is that this core is often overlooked: Web professionals tend to view their own creations with top-of-the-line devices with up-to-date browsers. They see only the enhancements. The shared core with the basic experience is often invisible.
New Default: Content
The way we designed our websites until recently was by putting a header with the logo and navigation at the top, putting the subnavigation on the left, putting some widgets on the right, and putting the footer at the bottom. When all of that was done, we’d cram the content into the little space that was left in the middle. All of the things we created first — the navigation, the widgets, the footer — they all helped the visitor to leave the page. But the visitor probably wanted to be there! That was weird. It was as if we were not so confident in our own content and tried our best to come up with something else that our guests might like.
But rather than pollute the page with all kinds of links to get people out of there, we should really focus on that thing in the middle. Make sure it works. Make sure it looks good. Make sure it’s readable. Make sure people will understand it and find it useful. Perhaps even delight them with it!
Once you’re done with the content, you can start to ask yourself whether this content needs a header. Or a logo. Or subnavigation. Does it need navigation at all? And does it really need all of those widgets? The answer to that last question is “No.” I’ve never understood what those widgets are for. I have never seen a useful widget. I have never seen a widget that’s better than white space.
Compare a typical news website’s attention to widgets with Medium’s complete focus on content.
By starting with the content first, you can come up with some very interesting solutions. For instance, does the logo really need to be at the top of every page? It could very well go in the footer on many websites; such as in digital style guides or on pages for registered users. Many links that we used to put in the subnavigation might work better in relevant spots in the main content.
For instance, the option to add extra luggage to a flight booking might be most effective right there in the overview of the flight, instead of in the middle of a list of links somewhere on the left of the page. And when looking at the hierarchy of a page, does the main navigation look more important than the main content? Most of the time it shouldn’t be, and I usually consider the navigation to be footer content. A simple “skip” link at the top of the page could either take the visitor to the navigation or fetch the navigation and show it at the top of the page.
In this era of responsive Web design, we need many new clever solutions. As we’ve seen here, our old defaults don’t work anymore. We need to reconsider how we work with interaction, how we approach design and how we shape our content. But we need to think about one other very important thing, and that is where our content comes from.
New Default: The API
Luke Wroblewski wrote a fantastic article about designing an application for the command line first, and then enhancing it for different needs. This is not just a nerdy idea, but a very practical idea, too. If you are able to design and develop your own application, you could test the functionality relatively easily before even starting to think about what it will look like on different devices. This requires designers to work with developers to design a feature that at first works only from the command line. If the feature does not work as expected, then you merely have to change the API, rather than also a bunch of visual designs. Once the API works as you want it to, enhancing it for all of the devices and screen sizes that you want to support becomes easier.
Most of the time, you wouldn’t design the entire API of the application that you’re building. Most companies would choose a content management system (CMS) of sorts or a specialized tool to help them achieve what they want to do. I’ve always been amazed that CMSes are so often chosen onlyby technical people and business people. This causes many problems during the design process.
Developers and business people have different goals than designers. Developers want stuff that is easy to develop on. Business people want stuff that’s cheap. But designers want to make the best and most beautiful things possible. These goals can easily conflict.
I’m not saying that designers alone should choose the system, but they should definitely be a part of the decision-making process. I’m convinced that the selection of CMSes will improve. And I’m convinced that CMS makers will start to improve their products once designers get involved. Right now, all CMSes I know of deliver hostile cruft unless you tweak them extensively.
But it works the other way around, too. If designers are involved in the selection process, they will have a say in the choice of tool and will understand how it works, what’s possible, what’s easy and what’s hard. This will result in designs that are based in part on the tool, not just on imagination. This is an important part of the design process that has not yet been optimized. Right now, the command line and the systems that deliver the content we design for are the domain of the developers, and designers have nothing to do with them. That is a pity. Just as you would want to take advantage of the knowledge of developers in the design process, you would want to take advantage of the knowledge of designers in the development process.
If you review the sections above, you’ll see that what I’ve described is nothing other than progressive enhancement. You start with the content, then design the content and optimize it for different screen sizes and devices, and after that you can further optimize for very specific features such as mouse usage and fat fingers. Many Web developers build websites according to this principle. They transform the beautiful Photoshop documents that they receive into all of the different layers described above.
This can work out fine if the developer has a good sense of design and a delicate attention to detail. But if they don’t — which is often the case — this can easily result in crappy usability and ugly details. I’m not saying that designers shouldn’t use Photoshop anymore. If that’s your tool, go ahead and use it. But do remember that you’re designing the layers of the Web, not the layers in Photoshop. There’s much more to the Web than a single beautiful image. People will see our creations ininnumerable ways. We design for all of these people — remember that. We don’t just design for the CEO with a laptop. We also design for the people on the train and the people with “free hotel Wi-Fi.”
I’ve mentioned Photoshop a few times because it’s still widely misused for designing websites. One reason we have a hard time with progressive enhancement in the design process is due to a lack of good Web design tools. The tools we use are built to wow; they mostly help you to create the “paint,” not to design the core. Fortunately, more tools are popping up with very specific functions in the design process. These are micro-tools such as the International Measure Slider, which helps you to define breakpoints in your grid; tools such as Gridset, which helps you to create grids for different screen sizes; and excellent tools that help you to define typography. By incorporating these tools into our design workflow, we might start making better stuff.
The Web has always been a weird, borderless, flexible medium. In the last couple of years, we’ve started to realize that designing for this medium is fundamentally different from the design work we’ve done previously. The fixed dimensions and the singular ways of interacting that formed the basis of all types of media that we’ve worked with for centuries just don’t work on the Web. This truly is a unique medium.
We have to find new defaults, new starting points for our design process. I’ve explained some of these new defaults here, but of course there are many more. The way we work with forms, for instance, could probably use a whole series of articles by itself. Some new starting points are well established by now, but I’m sure many more will be invented in the near future. I am curious to hear about new patterns and new defaults that you have discovered and have used successfully in your projects.