For the 6th year in a row, UMBC is the Baltimore host site for the Global Game Jam, which will be held from 5:00pm Friday January 24 to 5:00pm Sunday January 26. Many Global Game Jam sites charge admission. Thanks to the generous support of Next Century, the UMBC site will again be free, meals included. So we can plan appropriately, we do require advance registration.

In a game jam, participants come together to make a video game. Each participant joins a small team at the jam, and over a couple of day period creates a new, unique and creative video game according to the rules of the jam. Game Jams are a great way to meet other developers, beef up your resume, or just learn what it takes to make a game. Teams need designers who can come up with a creative game idea according to the jam constraints, artists, programmers and testers, so there is something to do for participants at all levels of experience.

The Global Game Jam takes place in the same 48 hours all over the world! Last year had more than 300 host sites across the world.  All participants will be constrained by the same theme and set of rules. After the theme is announced, participants will have the chance to brainstorm game ideas and pitch them to other participants to form development teams. After a couple of mad days of game development, all the games are demoed and submitted to the global game jam site.

If you’re a living, moving, breathing person, then the chances are very high that you’ve heard of the newest infatuation in the design world, flat design. If you’re unsure, here’s a quick crash course: it’s flat color. This means there are no (or very subtle) gradients and we are no longer making buttons and other parts of user interfaces look three dimensional.

The sudden rush to this type of design honestly makes flat design feel like a fad. Everyone’s talking about it and everyone is doing it. Whether this will stick or if we will be doing something new in 2014 remains to be seen. Whatever the outcome, flat design is in right now. It’s the last push away from what Web 2.0 was and into what the future holds.

If you aren’t using flat design, today we’ve gathered a boat load of free and premium flat user interface kits. Let’s go right ahead and jump in.

Flat UI Kit by Riki Tanone (free)

Here’s a nice free PSD kit of some widgets that are popular to use in web design. This one also has a wonderful color palette.

Flat UI Kit (PSD) by Devin Schulz (free)

This is a more extensive PSD for flat colors that has a very simple color palette. It includes everything from navigational buttons to tag styles.

Eerste UI Kit (free)

Eerste was obviously made with the idea of keeping everything as simple as possible. There are so many elements to choose from in this PSD to help create a wonderful website.

Metro UI kit (free)

This Metro kit reminds me a lot of what Windows is doing with their Windows 8 user interfaces. If you’re looking for something that bold, try this PSD kit out.

Ui Kit by Abhimanyu Rana (free)

Here’s another pretty simple UI kit that has some interesting pieces. Most notably, those buttons are really nice, and the forms are very well put together.

Flat Ui Kit by Zachary VanDeHey (free)

Most flat kits are very reliant on a great color palette. Zachary did something fairly different here by going with a very light, pastel color palette. It works!

FREE flat UI kit by Visualcreative.cz (free)

This kit will probably need some editing once you get it into your project, but there are some nice pieces to start with thanks to this kit. The media player is definitely worth checking out.

UI Kit (PSD) by Piotr Kwiatkowski (free)

Flat design is all about flat color, but every so often, you find a kit like this. While there’s a very subtle gradient on these colors, you can’t deny where the basic principles of this kit come from.

Vertical Infinity (free)

This is a flat UI mega kit that you’ll definitely want to download. It has the various states of your buttons and navigation and it just has so many pieces that you’d probably forget about. This is a great free PSD.

Flat/UI Kit by Sebastiaan Scheer (free)

I like this kit because it features a very popular color and makes it a monochromatic color palette. The typography is delightful as well.

Flat UI Kit by Jan Dvorak (free)

This is just a wonderful kit that has little bits of character all over. I really enjoy the icons, navigation, media player and the graph. Very usable stuff in this kit.

Flat Design UI Concepts (free)

This one is also reminiscent of Windows 8′s user interface, however this kit seems to vale consistency in their palette a little more. This is another pretty big kit that has lots of elements, especially for a blog of some sort.

UI/UX Kit (free)

This kit comes with a variety of colors for you to choose from. It’s not as predictable as most kits in its design and stylistics, but it’s definitely something for those interested in doing something a bit different.

Flat Bold UI Kit by Simon Eramo (free)

I love anything dealing with basketball, so when I saw this one, I knew I had to include it. Otherwise, this kit is beautiful, simple and offers many variations of buttons. Great for news and statistics sites.

UI Kit by Huseyin Yilmaz (free)

This UI kit is a pretty standard and very solid iteration of what we love about flat design. You’ve got a sign up, profile window and much more to start designing sites with.

Splash of Color Premium Kit (free)

The folks over at Ice Flow Studios created a FREE premium kit that focuses on minimalism. They embraced white space and the smallest of details while also adding a splash of bold color

Flat UI Kit by Design Modo (free)

Last but not least, check out the kit DesignModo.com created. There’s a PSD available for the PRO version as well. Get it now if you haven’t already!

Drops Flat UI Kit ($5)

If you’ll be working with graphs and infographics in your web design, you’ll probably want to invest in this kit. This one comes with a $5 price tag but includes some very useful graph elements.

Pixels Flat UI Kit ($9)

This $9 kit not only includes tons of buttons and forms and such, but also includes skins for things such as a YouTube player and Behance profile. I actually see this kit being used greatly for musicians and super creatives.

Atom UI ($10)

This flat color kit features a very slick, yet detailed look perfect for back end and front end design. And it’s affordable and well worth the money spent.

Night Sky Theme ($18)

This theme was created with the back end user in mind. It’s an administrators theme, but has some great flat color elements from bar graphs to buttons. Perhaps you can take pieces of this $18 HTML/CSS template, which also includes the PSD.

Flat Stroke UI Kit ($8)

The cleaner the better is a mantra many designers live by. Flat design is pretty clean, but to make it cleaner, many designers are starting to use just outlines to create their interfaces. Here’s an example and a kit that you can purchase for $8.

Square UI ($39)

Square was originally created to help us designers create prototyped websites quicker than usual. Come to find out, it’s a pretty great set of flat color elements as well as some other necessary elements for web design. For $39, you get many things that will help you design better and quicker.

UI Kit – Flat Design ($8)

This $8 flat design kit not only includes elements great for the web, but also for app development as well. The quality and detail in this set is stunning and adds a bit of punch to our normal set of flat elements.

Flat UI Kit ($6)

This kit includes a PSD and PNG version for our developer friends who aren’t too design-minded. The elements included in this $6 kit are great for web and apps, have buttons, sliders and much more.

Ultimate Flat UI Kit ($6)

The designer for this kit had their eye set on one thing: mobile design and development. If you’re looking for a bunch of elements specifically for smartphones, this is the  kit for you.

Flat UI Kit ($4)

Buttons, icons and infographics are a huge part of this wonderful kit. The color palette is great as well, but easy to change. For $4, this is a nice little kit to have on hand.

Metro UI Responsive Admin Template ($16)

Here’s another administrators template for those of us who want to design for the backend. They admittedly drew lots of inspiration for the flat color stylings of Windows and created a wonderful template to be used.

Conclusion

Flat design is functional and fits into our other favorite style, minimalism. As the web transitions into a place where there should be less fluff, less beautification and more of what’s important, it’s hard to see flat design evaporating any time soon. My suggestion is to get one of these kits, learn the style, and implement it as quickly as possible. Flat design isn’t only the “in” thing, but it’s the smart thing.

Have you used one of these kits? Have we missed your go-to UI kit? Let us know in the comments.

When Google announced its preference for user-friendly responsive websites in June 2012, I immediately saw an influx of posts that equated responsive design with search engine optimization. This is unfortunate because, while responsive websites can be SEO-friendly, some responsive websites are not.

I’ve detailed some of the common errors that give responsive websites problems in search results in an article on Search Engine Land earlier this year, so it’s nice to be able to do a more in-depth SEO audit of a responsive website here on Smashing Magazine.

I know not everyone’s definition of SEO is the same, so for those of you who don’t know my work, it should be emphasized that fixing all of these issues with SEO will improve the user experience in general; and like most credible SEOs these days, I don’t believe in manipulating search engine algorithms for short term ranking benefits.

The website I’d like to audit today is the US version of Disney Junior. I’ve chosen this website for three reasons: it’s not run by a client or a partner; it exhibits a lot of the SEO issues of many responsive websites; and my two and four year olds are huge fans of the brand and often use my smartphone or our family iPad to visit it. Hopefully, Disney can use this free advice to make its website better for my kids and kids like them who search.

This audit of Disney’s beautiful but often frustrating website shows that mobile SEO doesn’t end once you’ve made a website responsive, and it gives Disney a framework to make its website more usable and findable on search engines.

Is The Website Indexed?

Disney Junior doesn’t seem to have any real issues with indexing; many of its pages have been indexed by Google. See for yourself with a simple site:domain.com search, or verify it in Google’s Webmaster Tools if you use it.

Google has indexed approximately 1,630 pages of Disney Junior. However, the descriptions indicate that we might have problems with content parity.

Obviously a website that isn’t in a search engine’s index will be invisible when people search for it. This is true for responsive websites as well as for websites that use dynamic serving or dedicated mobile URLs. That being said, this tends to be more of a problem with mobile URLs because of the common practice of intentionally nofollow’ing mobile websites in the robots.txt file in order to prevent the mobile pages from competing with the “canonical” pages for link equity.

This practice is misguided because bidirectional annotations (or switchboard tags) can harness that link equity and bring mobile URLs into search results, but that’s neither here nor there when it comes to responsive websites.

While Disney Junior is indexed, some responsive websites, such as Idis are not so lucky. Idis is responsive and innovative, yet only one page of the website has been indexed by Google. Because the website is dynamic and because _escaped_fragment_ hasn’t been used, the URL does not change when a user clicks on different website elements, thus depriving search engines of deep links to include in their indices. If anyone searches for text on any of these pages, they won’t find this interactive, award-winning website.

This could happen to any website that doesn’t have static URLs, of course, but mobile SEO isn’t done once the developer has decided whether to make their website responsive or use dynamic serving or use dedicated mobile URLs.

Is The Website Crawlable?

In order for any website, responsive or not, to be indexed, Google must be able to crawl the website — that is, to follow a link to every unique piece of content and then store that new URL.

To check this, run any website crawler, such as Xenu or Screaming Frog. I prefer Rob Hammond’s SEO Crawler for mobile SEO audits because it allows you to set the smartphone Googlebot as your preferred crawler. The number of URLs is limited but enough to give you a pretty good idea of any crawlability issues. If you own the website, verifying it with Google and with Bing is imperative. Both search engines have tools for developers that specify the crawl errors they encounter, and Google even lets you tell it to ignore certain parameters that might be causing problems. If you don’t own the website or can’t verify it, you can still identify most problems by crawling the website as described above.

When I crawled Disney Junior, it quickly became apparent that the content is hosted on several URLs: DisneyJunior.com, DisneyJunior.Disney.com, WatchDisneyJunior.Go.com and Disney.Go.com/DisneyJunior. This could hinder a search engine from assigning page authority, because a search engine’s spider has a limited crawl budget for every website, based on that website’s PageRank, so if you’re splitting your PageRank between four URLs and three domains, then you’re possibly presenting to Google a website architecture that is less than optimal. More on this later in the section about duplicate content.

Disney’s URLs themselves don’t seem to have any major issues with crawlability because they are mainly static URLs, which search engines have an easier time with. However, the site map could certainly be improved upon. Search engines jointly announced Sitemaps a few years ago as the convention for finding content on websites to index. DisneyJunior.Disney.com does have a site map, but there are a few problems with it, the biggest being that it’s a video site map that contains more than just videos.

Site maps are a way for site owners to communicate directly with search engines, so making the information as accurate as possible and not confusing search engines are imperative. Google has site maps for the many different kinds of content included on Disney Junior, so presenting separate maps for images, videos, HTML documents and so on would be best.

Crawlability is not a mobile-specific problem, but getting it wrong can harm a website intended for mobile users just as easily as it can harm a traditional website, and it needs to be done right regardless.

Recommendation

• Disney should consider hosting all content on a single subdomain to ensure that search engines can properly identify page authority and to ensure that all relevant URLs are crawled efficiently.
• Disney should also consider breaking down its single video site map, which contains all types of content, into individual site maps for HTML content, image content, video content, etc.

Is The Website Readable Without Images, Flash Or JavaScript Enabled?

A search engine cannot factor what it can’t see into the overall relevance of a page. And while Google can do some amazing things with optical character recognition in Google Glass, Google Drive and Google Goggles, it still only reads text for Google Search. As it says in its “Webmaster Guidelines”:

• Create a useful, information-rich website, and write pages that clearly and accurately describe your content.
• Think about the words users would type to find your pages, and make sure that your website actually includes those words within it.
• Try to use text instead of images to display important names, content, or links. The Google crawler doesn’t recognize text contained in images. If you must use images for textual content, consider using the “ALT” attribute to include a few words of descriptive text.

Is Disney’s responsive website text-based and information-rich, and does it include terms that people would actually use when searching? Not really. If we look at the website through a simple text browser, like SEO-Browser.com, to get a better sense of how a search engine sees the website, then we get a much different picture than accessing it in a browser:

Unlike websites that embed keywords in images or in Flash, search engines aren’t blocked from seeing relevant content here — there’s just not a lot of relevant content to see. The website isn’t readable in this case because there are no words to read.

If we look at a deeper-level page, we’d see some graphic text that search engines would have a hard time accurately processing.

The text beginning with “Watch Sam Sandwich…” is accessible, but the words in the logo “The Bite-Sized Adventures of Sam Sandwich” are not because they are embedded as a graphic.

Recommendation

• At the very least, Disney should make embedded text accessible as alt text.
• When the text is substantial, the developer should consider making it accessible in a Web font, rather than as an embedded graphic.
• Furthermore, the volume of relevant keywords, such as “games for kids” and other non-brand words, should be increased. This could be done by slightly expanding the text block on each page or, ideally, by designing the page to include some scannable text, keeping progressive enhancement in mind.

Is The Website Easy To Link To And Share?

Many websites, both responsive and not, have URLs that don’t seem to be intended for human consumption. This is detrimental to SEO, of course, mostly because the URLs aren’t memorable and are difficult to share. Given how important search engines view sharing and linking when ranking pages, the more we can do to facilitate linking and sharing, the better off we’ll be in search results.

The print and video URLs for Disney Junior fall into this category, adding random characters to otherwise memorable paths (http://disneyjunior.com/print/stethoscope-4e4e43e2e8368d71cf2086da). For the most part, though, the URLs include keywords and are easy for users and search engines to understand.

The website could go one step further and include social bookmarklets to enable users to share content on social networks. Disney Junior has an active presence on Facebook, Twitter and YouTube, so its creators must understand the value of social media. But they might not understand that leveraging social media is becoming important to organic discovery and search. And given that 78% of Facebook’s user base is mobile and that mobile users spend more time on social networks than PC users, then helping mobile searchers share content whenever they’d like makes sense.

This isn’t a tutorial on how to make social buttons work on a responsive website, but Facebook’s mobile “Like” button works on responsive websites. However, for performance considerations, it’s a good idea to use social sharing buttons or SocialCount that use lazy loading to load the actual social scripts on click. If you use a third-party plugin, such as AddThis, there are ways to make those compatible with a responsive website as well.

Recommendation

To increase referrals from social networks and to facilitate content discovery, Disney Junior should incorporate social-sharing buttons that are responsive, that add to the overall experience but that don’t significantly increase page-loading time.

Does The Website Display Content For Users’ Needs, Regardless Of The Device Used?

Those who champion “content parity” have a worthy cause in making websites accessible to everyone, regardless of device. Unfortunately, the issue is a little complicated. Making content available on all platforms is sometimes good for users, other times not.

Disney Junior is fairly representative. It deprives users of relevant content, fails to connect relevant content to users who need it, and gives users content that they have no chance in the world of ever using. Unfortunately, in my experience this is fairly typical of responsive websites, many of which don’t go far enough to make all content accessible, regardless of device, and which provide content that’s unusable on mobile devices.

Google sees one weakness so often on mobile websites that it has threatened to penalize for it in smartphone search results: unplayable videos. In June 2013, Google said this:

“We recommend using HTML5 standard tags to include videos and avoid content in formats, such as Flash, that are not supported by all mobile devices. Regardless, try your best to offer smartphone users the best experience possible to make sure that the videos are playable on as many devices as possible.”

So, when I encounter many screens like the following when trying to play Disney Junior videos, I get a little concerned:

Not supporting a piece of content for mobile users could lower your ranking in smartphone search results.

In some cases, though, Disney Junior goes too far with content parity. The four main sections of the website are games, videos, printables and a live feed. The problem is that unless a user is not only aware of Google Cloud Print but is one of the handful of people who has it installed on their device, they won’t have any way to print the coloring pages or other printables.

I have no idea how many people have actually printed these PDFs from mobile devices, but I’m guessing that the vast majority of people who attempt to access this content leave in frustration. I have no evidence that Google actively penalizes a website for unplayable videos, but it announced that it would more than four months ago, and it could start any day. Regardless of the impact on ranking, fixing this issue would make the website more usable to whoever visits.

One quarter of the content on Disney Junior is inaccessible on mobile devices.

No doubt, printables and coloring pages are a popular feature on desktops and laptops, and users actively look for such content. On mobile devices, it’s an entirely different story.

According to Bing Ads Intelligence, which lets you see search volume by device, less than 5% of the total search volume for “coloring pages” comes from mobile devices. The reason is that most mobile devices aren’t connected to a printer, thus rendering such content unusable.

It’s worth noting that Disney has made huge strides on its responsive website at Disney.com since I addressed this issue in April 2013. None of its Flash games had been accessible to smartphone users, and it’s since made most of them compatible with HTML5. So, fixing these issues that plague both responsive and dedicated mobile websites is possible, but it won’t happen by itself.

Making this content available to all users is fine, but if Disney is going to do this, then it needs to explain that, before printing it from a mobile device, the user will have to download Google Chrome and/or the Google Cloud Print app and connect their device to a printer. If Disney doesn’t do that, then a lot of confused and unhappy kids will be left staring at a PDF on their mobile device, wondering how to print it. Disney could also consider making the feature less prominent on its home page for mobile users.

Finally, what’s missing from Disney Junior’s responsive website is any mention of the mobile content that is actually available. Assumptions on user behavior are always tricky, but in this case it’s quite safe to assume that mobile users would be looking more for apps and mobile games than for printables. However, the first search result for “Disney junior apps” in Google takes the user to a non-responsive page, before giving them an error message due to the absence of Flash.

“Dad, what is this?!” says my four-year-old son as he tries to watch Disney Junior on my smartphone but is redirected to a page that tells him to download Flash.

What’s more, when it comes to “mobile games,” a phrase that people search for more than 12,000 times a month, Disney is nowhere to be found. It’s a shame, because Disney’s games, being compatible with smartphones, are relevant to the term, but they won’t be found in relevant search results because the term isn’t included. And not appearing in relevant search results is definitely not search engine optimization.

These figures for search volume of Disney-related keywords by platform show that mobile users often search for different things and at a different frequency than users on desktops and laptops.

Recommendation

Disney Junior has three opportunities to improve the accessibility and relevance of its responsive website:

• Ensure that all videos and games are playable on most smartphones before Google makes good on its promise to penalize websites for unplayable videos. This will also improve the user experience and reduce the number of frustrated visitors.
• Rethink the website’s information architecture. Highlighting printables and coloring pages for mobile users doesn’t make sense if these users have no way to print them from their device.
• Ensure that the website contains all relevant keywords, regardless of platform, so that the many people who search with platform-specific keywords, like “mobile games” and “iphone apps,” can find relevant content on Disney Junior.

Does The Website Load Quickly?

When I echoed the claim of Guy Podjarny, Akamai’s evangelist, in Search Engine Land that responsive websites are often bloated and slow, I was met with a lot of hostile comments. Many thought I was saying that responsive websites cannot be fast. Of course they can be made fast; unfortunately, most are not (PDF).

This is not just bad for performance, but can be detrimental to SEO as well. When Google pointed out common mistakes that it might soon penalize for, it put slow-loading pages on the hit list. Fortunately, Google has given developers many resources to make their websites faster, including the PageSpeed Insights tool. Following the recommendations made by this tool will go a long way to making your website load in one second or less, which is what Google recommends for optimum mobile performance.

Disney Junior takes more than seven seconds to load on average, and Google gives it a score of 71 out of 100 for page speed.

Akamai’s Mobitest tool is great for showing how long a page takes to load on mobile devices.

Google’s PageSpeed Insights follows the color coding of stop lights to indicate the priority of its recommendations.

Much has been written in the design community about the performance of responsive websites. At the very least, a responsive website should follow Google’s guideline of loading in less than a second.

Recommendation

Disney Junior should follow Google’s PageSpeed Insights and optimize its images, eliminate render-blocking JavaScript and CSS in content above the fold, and reduce page-loading time overall to one second or less.

Does The Website Try To Get You To Download An App Instead Of Showing What You Asked For?

WTF Mobile Web lists many websites that attempt to get users to download an app, instead of immediately showing them relevant content — a technique known as a door slam. Rotten Tomatoes is typical:

An app interstitial is shown to smartphone users who access Rotten Tomatoes’ website.

This used to be merely annoying to users — until June 2013, when Google added it to its list of things to penalize websites for. Now it should annoy all website owners, too.

These door slams usually happen when the website detects the user agent to be a mobile device. They’re rarer on responsive websites, in my experience, because most owners of responsive sites are happy to let users freely access their content, instead of trying to persuade them to switch to the app experience.

Disney Junior is the exception to the rule. If you attempt to watch one of its videos on your mobile device, the page will redirect you to an app. If you’re on an Android device, you will be redirected to an app that doesn’t exist:

Android users who click on the “Watch Disney Junior” link on the home page are greeted with this message.

If you include app interstitials on your responsive website, then now is the time to consider whether their business value outweighs the prospect of not appearing as often in Google search results for relevant queries on smartphones. As far as I can tell, Google hasn’t yet begun to penalize for this infraction; however, as with unplayable videos, it’s only a matter of time before it does.

Recommendation

Disney Junior should remove the app interstitial or at least turn it into a banner that is not disruptive. Smart banners are available on Android and on iOS as replacements for app interstitials.

Including a smart banner on iOS is as simple as adding the following meta tag to the head of the page, with the relevant App Store details:

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    

Adding a smart banner on Android is not quite as simple, but it can be done through AdMob. Some developers have simulated iOS’ banner on Android using jQuery.

Does The Website Contain Duplicate Content?

Duplicate content has been preventing relevant pages from ranking for given queries long before smartphones came around. Now, it gets even more complicated. In case you don’t know, duplicate content is a single piece of content that exists on more than one URL. It makes a page less competitive because its PageRank indicators are dispersed.

Mobile subdomains are usually the culprit of duplicate content, as my case studies demonstrate. However, just because a website is responsive doesn’t mean that duplicate content is not possible. In fact, checking for it is important for any website, mobile-friendly or not. Neglecting it means letting Google itself identify the canonical page for a given piece of content, which doesn’t always end well for the website owner.

We shouldn’t take chances. Instead, we should ensure that search engines can understand which pages are intended for users and which pages are just copies of canonical pages. We can give search engines as many signals as possible to alert them to canonical pages (such as by including canonical tags, by adjusting the handling of parameters in Webmaster Tools, and so on).

As mentioned earlier, Disney Junior has quite a bit of duplicate content. But according to the source code, it has added canonical tags to tell Google and Bing which pages to rank. So, we have no recommendation for Disney on this one.

If you’re not familiar with canonical tags, it’s as simple as adding the following tag to the head of any duplicate page:

    <link rel="canonical" href="http://www.disneyjunior.com"/&gt;
    

The URL referenced in this tag should be the canonical URL for the given content. Some of Disney Junior’s properties do have a slight problem of duplicate content. Chuggington.com, for example, has equivalent content on DisneyJunior.com/Chuggington. If Disney wanted to set Chuggington.com as the canonical URL, it would simply add the following tag to DisneyJunior.com/Chuggington:

    <link rel="canonical" href="http://www.chuggington.com"/&gt;
    

Does The Website Take Advantage Of Mobile Devices To Deliver Extra Value?

Disney Junior doesn’t show anything unique to mobile devices. This might or might not be intentional, but it ignores opportunities to delight the consumer with device-specific content.

Back in 2008, one analyst predicted that mobility would create an entirely new Internet, filled with voice-recognition apps, GPS and scannable content, and hosted on .mobi domains. He called it the mobile ’net and thought that it would be separate from the Internet as we knew it.

It reads a little like science fiction today, with silver mylar-clad people jetting around in flying cars and on hoverboards, but the author was spot on with one thing. He basically predicted Uber, the mobile ride-sharing app that is disrupting the taxi industry. And the article foreshadows the purchase of mobile-first photo app Instagram by Facebook for $1 billion in April 2012. Smartphones and tablets have different properties than PCs, and they are often used in situations where a PC would be impractical, thus instilling behaviors and patterns that previously did not exist on the Internet.

GPS enables users to find things around them with Google and Bing, and search data is showing that users are taking advantage of it, using terms like “navigate to,” “closest” and “near me” primarily on smartphones and tablets. Shopping-related searches are two times more likely to happen in-store now, and 70% of mobile searchers call businesses directly from search results — something they can’t really do on a PC. Granted, many people search for the same things on their mobile devices as they do on their desktop computers, and they often do it when they’re not on the go. However, 17% of them are on the go, and all of them have access to things like GPS, the camera, the accelerometer and the phone, which aren’t available on desktops and laptops.

Today, these mobile-first experiences are sometimes built on the Web (i.e. not a separate mobile Web) and more often in apps. From an SEO standpoint, they make the most sense on the Web. In its “Webmaster Guidelines,” Google says, “Think about what makes your website unique, valuable, or engaging. Make your website stand out from others in your field.” And it echoes this sentiment in its “SEO Starter Guide” (PDF), saying that “creating compelling and useful content will likely influence your website more than any of the other factors discussed here.”

In short, great content that people find useful will be linked to and shared, which will alert Google to its quality. But an app probably won’t appear in search results unless the user types the word “download” or “app” or the app’s name in their query, and Google cannot process or index deep links within apps. The way to make content as accessible to mobile users as possible is not to put it in an app, but to put it on the Web.

The problem is that doing this with a responsive Web design, as Google defines it, is difficult. Many responsive websites make great use of geolocation (such as Starbucks’), but most use JavaScript or server-side components to accomplish it, which is beyond Google’s scope of a responsive website.

Still, some websites do offer content that would be very useful to someone on a smartphone or tablet, which might differentiate those websites just enough for Google to rank them higher than competitors. One of my favorite examples is Sears, which uses dynamic serving on its mobile website to give smartphone users a scanner to compare competitors’ prices with Sears’ online prices. This empowers consumers to find the best price, while combatting the practice of “showrooming” by making it easy for people to find the best prices at Sears.

Sears’ mobile website enables smartphone owners to scan items to compare against Sears’ prices.

Another great example is Lowe’s, which provides an in-store map on the location-related pages of its mobile website. It’s a small addition, but it helps users find what they’re looking for faster once they get to the store, and it potentially differentiates the brand.

Lowe’s provides an in-store map on the location-related pages of its mobile website.

Recommendation

Disney Junior should consider mobile-specific opportunities to differentiate its content from that of competitors and to add value for users.

Conclusion

Unfortunately, creating a responsive website alone won’t be enough to be properly optimized for search results. If you’re keeping score, more than half of the content that Disney Junior’s responsive website highlights is unusable on smartphones. The website is beautiful, to be sure, and Disney deserves credit for trying to make its content accessible to users, regardless of device. But can a website like this really be called “responsive”? It contains all the ingredients of a responsive design; however, responsive means “reacting quickly and positively,” which this website fails to do in many ways.

User-friendly responsive Web design is preferred by Google, and Google doesn’t (intentionally) send traffic to websites that frustrate users, or to websites that don’t contain the keywords that people are including in their queries, or to websites whose content is not more compelling than that of competitors. Hopefully, this audit has taken you beyond just thinking about mobile configurations when tackling mobile SEO. And hopefully you feel equipped to really make your own responsive website competitive in search results.

Start with these basic SEO tips, which many responsive websites do not follow:

• Make sure your responsive website has been indexed by doing a site:domain.com search in Google and Bing. If it hasn’t, then merely making the website responsive will not improve its visibility.
• Ensure that search engine spiders can crawl your website and that they index every unique piece of content once. Responsive websites should have static URLs, without difficult-to-crawl characters such as hashbangs, if possible.
• A site map will make your website more crawlable. But use the proper type of site map for the content, and follow protocol.
• Include enough plain text that search engines can understand what the website is about, without needing access to image- or Flash-based content. Progressive enhancement is a useful method of building pages that are accessible to search engines. Use SEO-Browser.com to check your work.
• Try to include relevant keywords in your URLs, and make pages easy to remember and share by avoiding long strings of human-unreadable characters.
• Include responsive social bookmarklets to help mobile users share your content on their social networks. But keep an eye on page speed.
• Don’t highlight content that users can’t access on their device. Content parity is great, but serving device-specific content to the wrong devices goes too far.
• Don’t make all of your content adaptive. Users often look for device-specific content (such as mobile games, apps, mobile coupons, etc.). Including relevant keywords is the only way to get traffic from search engines.
• Make your responsive website load in less than a second, using Google’s PageSpeed Insights and Akamai’s Mobitest. Not doing so could hurt you in search results for smartphones.
• Use smart banners to promote your app, instead of the more disruptive interstitials.
• Identify content that exists on more than one URL, and use canonical tags and permanent redirections to tell search engines which pages to show in search results.
• Make sure that adaptive content and responsive Web design are really the best way to serve your users. Not every website is a traditional publication, and sometimes users have needs that are difficult to address with a single information architecture.
• If responsive Web design truly is best for your users, then enhance your adaptive content by adding useful features (such as a scanner or GPS locator), using server-side components.

(al, ea, il)

© Bryson Meunier for Smashing Magazine, 2013.

The constant geometric precision of screen-based design is enough to dehumanize any design project. The best way to counter that is with a typeface that screams “hand written!”

That’s why we’re delighted that our sister-site, MightyDeals.com, has been able to arrange a huge discount off Laura Worthington’s Alana Pro.

Alana Pro is an award winning typeface, having received the MyFonts Best Fonts of 2011, Ascender Fonts — Best Fonts of 2011, Typographica’s Best of 2011, and 2012 Communication Arts awards.

Named for Worthington’s little sister, the typeface oozes feminity and affection. It is inherently formal, but breaks out into spontaneous moments of playfulness, especially in some of the 341 alternates, that are so important to any handwriting font.

Alongside the standard characters, there are 62 ornaments providing some charming hand-drawn illustrations of leaves, flowers and birds.

Look closely and you’ll see that all of the glyphs — characters and ornaments — have been treated to a rough, uneven edge giving the design a wonderfully earthy and wholesome feel. If you’re working on a design for a healthfood shop, a yoga class, or even your local surf school, this is a great place to start your design.

You can add this tremedous font to your toolkit for just $14, that’s an incredible saving of 71% off the full retail value. And for just $5 more you can grab the desktop and web versions. Head over to MightyDeals.com to take advantage of this offer right now.

Have you use Laura Worthington’s Alana in a project? What uses do you envisage for it? Let us know in the comments.

Massive Infographic Bundle (100+ templates) – only $27!

Yan Xiao, PhD Wednesday, November 20th noon in ITE 459

Electronic health record (EHR) is an integral part of work in growing number of healthcare organizations. Quality of care received by patients and quality of working life of frontline professionals are increasingly tied to EHR. This presentation will share the experience of improving EHR usability in an integrated healthcare delivery organization, the largest in Texas.

Usability as experienced by frontline clinicians is an evolving property of a complex socio-technical system, with leveraging points in hardware infrastructure, user training, technical support services, on-going system integration, optimization, and organizational policies. Case studies will be used to illustrate the role of human factors in understanding usability challenges, in defining approaches to improve EHR related safety and quality, and in identifying research opportunities. On-going projects sponsored both internally and by federal Office of National Coordinator for Health Information technology will be presented as well.

Biographic information: Yan Xiao leads the human factors program at Baylor Heath Care System, Dallas, Texas, and conducts patient safety research sponsored by the federal government. He is adjunct professor at University of Texas at Arlington, and previously adjunct professor at UMBC. His education includes a PhD in human factors from University of Toronto in 1994 and a Masters degree in systems engineering from Beijing Institute of Technology in 1985. He published more than 60 peer reviewed journal articles in the past 20 years in key aspects of human factors, including collaborative work, team leadership, and information systems. He left academia as a tenured full professor of anesthesiology at University of Maryland School of Medicine in 2009. As principal investigators his work has been sponsored by such federal agencies as National Science Foundation, National Institutes of Health, Department of Defense, NASA, and Agency for Healthcare Research and Quality (AHRQ). Industry support for his work! came from top telecommunication, medical devices, and defense companies. He has two patents related to technology support for team performance. He is on editorial board for Human Factors & Journal of Cognitive Engineering and Decision Making. He serves in a standing panel of AHRQ to advise federal government on sponsored research.

By Mark Finlayson

Narrative structure is an ubiquitous and intriguing phenomenon. By virtue of this structure humans are able to perform high-level processing of stories necessary for deep understanding; for example, we recognize the presence of 'villainy' or 'revenge', even if those words are not actually present in the text. Narrative structure is an anvil for forging new artificial intelligence and machine learning techniques, and is a window into abstraction and conceptual learning as well as into culture and its influence on cognition. I will discuss various components of my approach to learning narrative structure automatically.

First, I will present Analogical Story Merging (ASM), a new machine learning algorithm for extracting plot patterns from sets of stories. I demonstrate, for the first time, automatically learning a theory of narrative structure from text: ASM can learn a substantive portion of Vladimir Propp's influential theory of the structure of folktale plots. Second, I will discuss data and tools that support this extraction, including: the several deeply-semantically-annotated story corpora I have created; the Story Workbench, a general-purpose text annotation tool I have designed for collecting the corpus data; and the new linguistic representation schemes I have developed to capture important aspects of story semantics. I will highlight a new result, namely, the first-ever demonstration of the reliable double-blind coding of higher-level narrative by trained annotators. Third, I will discuss future applications for my techniques and tools, including in cultural studies, persuasive communication, understanding religious extremism, and understanding the structure of business and law cases, as well as an upcoming project funded by the NIH on investigating narratives that affect patient health care behavior.

Bio: Dr. Mark Finlayson is a Research Scientist at the Computer Science and Artificial Intelligence Laboratory at MIT. His research focuses on representing, extracting, and using higher-order semantic patterns in natural language, especially with regard to narrative. He received the B.S.E from the University of Michigan in 1998, and the M.S. and Ph.D. from MIT in 2001 and 2012, respectively, all in Electrical Engineering and Computer Science. He is general chair of the Computational Models of Narrative (CMN) Workshop series, now in its fifth iteration, and is lead guest editor of a special issue on Computational Models of Narrative, to be published by the Journal of Literary & Linguistic Computing in 2014.