Summary: This may not be the most glamorous conference we’ve ever attended, but I can’t remember the last time a conference was packed with so much useful information. Below are some of the highlights from and important takeaways for anybody working in the mobile gaming space.
- The deck is stacked against small mobile gaming developers who typically lack the resources and know-how for marketing and distributing their games. Many of these small developers are turning to publishers for help. But those publishers often take a 50% revenue cut. Moreover, there a lot of small developers vying for the attention of these publishers, who are in turn becoming more and more choosey about who they partner with. In general, the new benchmark for a successful game seems to be set at around $1m.
- The speed at which this sector is advancing is astounding. The main reason is because mobile apps are a closed-loop economy, meaning that transactions occur directly and instantly. Therefore, even small developers can get a good sense of ROI as soon as the game launches. And they have the means to conduct lots of testing within the app to see what works and what doesn’t. The mobile app market has sold over 50b apps and according to Gartner, the mobile app market will hit $25b this year. One of the main reasons this nascent market has grown so fast is the break-neck speed at which they are able to learn. Probably 5x faster than any other sector we work in. This underscores the need for expertise in the space, since mobile gaming has a somewhat proprietary language and set of metrics. In other words, you can’t survive by simply throwing around buzz words, you must be authentic.
- There are many third-party platforms available to developers to compliment their SDK’s. Everything from marketing support to analytics are being offered. However, what seems to be lacking are strategic services. More precisely, a lack of understanding of gamer behavior OUTSIDE of the game itself.
- There were interesting trends mentioned, which we think will only continue to develop. For example, mini-consoles, whereby people use their mobile device as a controller/CPU and their TV as a monitor. We also expect to see more developers focus on niche markets, e.g., moms or on specific devices, e.g., tablets, which are two rapidly growing niche markets.
- Microsoft and Blackberry are still struggling to get developers to create apps for their operating systems. So much so, they’ve begun offering financial incentives to them. Overall, iOS and Android will continue to dominate the app market for at least the next 18 months.
Packaged-goods marketers may not have been the fastest adopters of mobile advertising, but they’re catching up, according to a new study by Millennial Media and comScore, which found CPG advertisers more than tripled spending on mobile last year.
Among the things you might not have known about CPG advertisers in mobile:
1) CPG is adopting mobile faster than the other leading categories. Consumer goods ranked in No. 6 among industry verticals last year, according to Millennial Media, with spending up 235%.
2) Mobile is an awareness medium for CPG advertisers, just like, well, all the other media. Of consumer-goods campaigns, 46% had awareness as a goal vs. only 14% among mobile advertisers generally. As a result, CPG advertisers are using their awareness-building medium of choice — video — heavily. They’re twice as likely as advertisers overall to use mobile video, according to the study. (Separately, growing CPG interest in digital video has driven growth of TV-style ratings for online audiences and led them to increasingly repurpose TV ads as digital video. Thus, comScore recently divested its ARS Group TV copy-testing service, since few CPGs were paying separately to test digital video copy.)
3) CPGs are into location, with 40% using some kind of location targeting in mobile campaigns, making it the fourth-biggest vertical category using location, even though it’s only the sixth-biggest spender overall. Beverage and beauty advertisers led CPG subcategories using location targeting, accounting for 69% of industry usage.
4) Men are more likely than women to use their phones in stores for some tasks. Specifically, men are more likely to use phones to check product availability, compare prices, find deals or make online purchases. Women are more likely than men to use phones in stores to text or call friends about products, send pictures of products, or research product features.
5) Shoppers use their phones in stores more than many people believe. Millennnial Media and comScore found over a three-month period that 40% of women and 47% of men used their phones in stores to find coupons or deals, while 29% of men and 41% of women used their phones to research consumer-product details.
In-Store Mobile Behavior by Gender
During three-month period, percentage who used their phone for the following consumer-goods-shopping tasks while in a store:
Check product availability:
Find coupon or deals:
Take picture of a product:
Text or call family or friends about a product:
Source: Millennial Media, comScore
Department store chain Nordstrom is enhancing the consumer experience on its iPhone application with updates that include product sharing via SMS and user reviews.
The new functions of the app will help consumers share their opinions on Nordstrom’s products with their friends and fellow shoppers. Luxury marketers with mobile apps should continue to update them with new functions to keep the experience relevant to savvy customers.
“We launched our smartphone shopping apps back in November of 2011, and since then have been doing a lot of listening and learning from our customers to make this a better shopping tool,” said Colin Johnson, spokesman at Nordstrom, Seattle.
Trying something new:
Nordstrom chose to tweak the shopping experience on its commerce-enabled iPhone app to encourage consumers to share their opinion on products. Before the update, consumers could share their favorite items with their friends via Facebook, Twitter and email. Now, consumers can send an auto-generated text message to anyone in their contact list about a particular product.
For example, if an app user wanted to share the Chloé Vanessa bag with a friend, the text message draft would say, “Check out my latest find from Nordstrom: http://shop.nordstrom.com/S/3453967 Chloé ‘Vanessa – Medium’ Crossbody Bag.” Nordstrom looked to make it easier for consumers to browse and make purchases on the app with a few other subtle updates, per Mr. Johnson. The retailer improved the sign-in process and enhanced the performance of the app. Consumers can also shop complete looks while browsing the sections of the app such as women, men, juniors and kids.
Nordstrom launched its iPhone app in 2011 to combine commerce, customer service and cross-channel engagement. The app lets consumers buy products, curate looks, create a wish list, venture in-store for events and call customer service. Nordstrom’s smartphone app went live for iPhone users first, but was soon introduced for Android devices (see story). Since texting is important to Nordstrom’s customers, it was the next natural step in enhancing the app, per the retailer.
“Shopping, mobile and social are as aligned as the designer purse and shoes to go with the high-end dress – at least that is what my wife tells me,” said Jeff Hasen, Seattle-based mobile marketing consultant. “The shopping experience has been social for a long time,” he said. “Consumers call or text their friends for opinions, to show something off or to get those in the social network in on the sale.” In particular, the addition of sharing products via SMS will help Nordstrom reach out to potential customers who do not use Internet-enabled phones but have access to text messaging. “While we might believe that all Nordstrom shoppers carry smartphones, that certainly isn’t the case,” Mr. Hasen said. “Texting programs are inclusive, ensuring that all who want to participate can.”
2012 was a milestone year in the consumer devices market. For the first time since 2001,PC sales were lower that they were the previous year. Tablet sales are expected to top laptop PC sales for the first time in 2013. In addition, Nielsen reports that 55% percent of U.S. mobile subscribers own smartphones and 2 out of 3 Americans opt for a smartphone instead of a feature phone when purchasing a new mobile.
Mobile usage is increasing and translating into a growing percentage of mobile visitors. If businesses operating online want to benefit from this trend, they need to optimize the mobile experience for their website visitors.
Shopping on mobile devices can be a pain
The process of trying to buy something from a desktop design site with a smartphone can be summed up with one word – pain. Navigating from from one end of the site to the other, zooming in and out to find relevant content. Filling forms that assume that you are a screen tapping ninja and the checkout button which has the link “Terms and Conditions” below, making it an unexpected challenge to reach the checkout page. It´s no wonder that61% of mobile visitors move on to competitors sites after encountering a frustrating mobile browsing experience.
Meanwhile, mobile visitors are becoming more comfortable in taking action with their mobile phones, when its favored that is. Nielsen reports that 29% of smartphone owners have used their device for online shopping. The percentage will surely increase as businesses improve the mobile browsing experience on their sites. Companies that have already acknowledged the potential, and have invested in improving the mobile experience are reaping the benefits.
A good example of a company who is successfully converting mobile traffic isWebundies.com, a family-owned retailer of underwear, sleepwear and lounge-wear. Webundies.com announced 2012 mobile commerce sales of $168,000, accounting for 5.4% of total sales. For Webundies.com, mobile sales in 2012 increased a whopping 169,2% from 2011. The company is implementing both a responsive design and a tablet-optimized catalog to boost their mobile and tablet conversions, and clearly its paying dividends. Who wouldn’t want to enjoy the same success?
A business with a desktop design website that would like to enhance the mobile browsing experience and boost conversions has three options in general:
- Build a website using responsive design.
- Build a dedicated mobile web.
- Build an mobile app.
Responsive web design
Is a flexible, liquid layout that adapts to fit a various screen sizes, resolutions and devices. It allows websites to automatically change layouts according to the visitor´s screen resolution whether on a desktop, tablet, or smartphone creating a user-friendly interface when visitors browse websites.
If you’re viewing this blog post on a desktop browser, you can test responsive design in action. Try making your browser window smaller and you´ll notice the images and content column shrink to fit your screen.
A good example of responsive design in work on the example of The Boston Globe website. Notice how the same content adapts to fit the various devices
Responsive design has gained a lot of advocates due to its benefits compared to alternative solutions:
- One website to build and manage: a strong advantage for business who update their content often as it is no longer necessary to ensure content parity in various locations.This advantage also plays dividends in conversion optimization, for example in A/B testing, as there is only one body to conduct tests on. In addition, visitors encounter a cohesive brand experience regardless whether they´re using a laptop, smartphone or tablet.
- Search engine optimization: all links and bookmarks point to one URL. No wonder Google recommends responsive design.
- Social Media: with responsive design, the URLs visitors encounter are the same regardless whether they´re browsing with a laptop, tablet or smartphone. That makes sharing content through social media foolproof, as it´s guaranteed that the recipients will be able to browse the content in the most optimal view.
- Analytics: one complete view of all the traffic.
- Future-friendly: whatever the new trend setting device might be, responsive design has it covered by shrinking content to fit the resolution of the device.
The effect of responsive design on mobile conversions
Lets take a look at some examples of how implementing responsive design has boosted mobile conversions. All of the following companies have gone from a desktop site to responsive design:
The popular e-commerce store O´Neill Clothing racked up some impressive results after implementing responsive design. O`Neill monitored conversions, transactions and revenue for three weeks prior to going responsive. Then, after deploying the responsive conditions to the already live site, they monitored the same metrics for another three weeks. The results are staggering:
- Conversions increased by 65.71%
- Transactions increased by 112.50%
- Revenue increased by 101.25%
For Android devices:
- Conversions increased by 407.32%
- Transactions went up by 333.33%
- Revenue increased by a whopping 591.42%
Think Thank Photo
Think Thank Photo (TTP) is a company that produces equipment and accessories for photographers. After witnessing their mobile visitors triple in a year to 13% of their overall website traffic, TTP made to decision to rebuild the site using responsive design.
As a result of the new responsive layout and other optimization efforts, TTP achieved a 188% increase in revenue from Black Friday through Cyber Monday compared to 2012. Transactions from users on smartphones and tables increased more than 96% and pageviews among mobile users increased by 224%.
A family-run company that has been designing and producing neckties since 1971, Skinny Ties decided to reinvent the brand`s identity and build a platform that would be future-friendly. Bearing in mind the increasing penetration of smartphones and tablets, the company opted for responsive design. The site launched in October 2012 and within a couple of weeks Skinny Ties experienced massive improvements in sales metrics compared to the previous three months:
- Revenue from iPhone grew a staggering 377.6%
- iPhone conversion rate increased 71,9%
- Revenue from all devices went up 42.4%
- Overall Conversion rate increased by 13.6%
- Bounce rate dropped 23.2%
Maxatec is company that offers POS & EPOS systems, mobile and barcode products. Similarly to the previous examples, Maxatec saw an increase in mobile visitors and decided to the improve the user experience of tablet and smartphone visitors and boost conversions in that segment.
The results: mobile visitor goal conversion rate went up by 12% and the average time to complete a task decreased by 50%.
As predicted, the described case studies unambiguously show that responsive design is far superior to desktop design in converting mobile visitors. Businesses who attract mobile visitors to a desktop design are missing out on a large chunk of potential conversions and revenue and as smartphone penetration is increasing, having a desktop design could turn out to be expensive (in terms of lost conversions and revenue).
Dedicated mobile website
A business may also opt for building a dedicated mobile site to enhance the browsing experience of mobile visitors. A dedicated site lies separately (separate URL) from the desktop site and it´s sole purpose is to host mobile visitors.
An example of dedicated mobile website: Amazon
The advantages of a dedicated mobile site:
- Dedicated mobile sites optimize for both mobile behavior and resolution, while responsive optimizes for only resolution.
- Faster load times. When Beth Israel Deaconess Medical Center wanted to improve their sites mobile experience, BlueTrain Mobile made an example of how one page of their website would have looked if they had adopted responsive design, and how the page would have looked in a dedicated mobile site. In the same mobile network, it took 15 seconds for the page in responsive design to load while the dedicated mobile page loaded in just 2 seconds.
- Easier to optimize for mobile conversions. Dedicated mobile sites focus solely on mobile visitors, while with responsive you have to keep in mind laptops, tablets and smartphones.
The disadvantages of dedicated mobile sites are basically the same as the advantages for responsive design:
- Two bodies of content to manage
- Separate URLs: if you´re using content marketing to attract visitors, this is a huge disadvantage as link sharing in social media is problematic.
Building a mobile app to enhance the browsing experience of mobile visitors is a good idea if you have a unique social or interactive platform our when your site is your product. If you´re not Facebook, Twitter, LinkedIn, YouTube – build a dedicated mobile site or use responsive design.
Just think about it. When your site is not your product, can you think of any realistic reason why anyone should download your app from an appstore, install it, and use it just to visit your site? No? Thought so.
The additional disadvantages of apps are that they have a restricted amount of content and functionality, plus they´re operation system specific. Most probably you´ll need need to build for both Android and iOS to optimize for your mobile visitors.
Responsive vs Dedicated Mobile: which one should you choose?
Responsive has a lot of advocates for a reason. When comparing the two alternatives, responsive design is more future-friendly, has one body of content to manage (assures content parity), provides a constant brand experience and is social media friendly.
Dedicated mobile sites have basically one advantage – faster load times. But with the improvement of mobile networks and faster downloading speeds, the loading time differences between responsive design and dedicated mobile will lessen.
From a conversion optimization standpoint, the fact is that with both alternatives you´d need to follow the same route: constant improvements, A/B testing and multivariate analysis. Therefore it would be wise to go with the alternative that provides the most advantages – responsive web design.
5 things to keep in mind when optimizing responsive design for mobile conversions
1. Focus on the important
When optimizing for mobile visitors, it´s important to remember that the most annoying thing for mobile visitors is going through bunches of plain text. If mobile visitors can´t find what they´re looking for quickly, they´re gone.
Critically review your content and keep everything that helps mobile visitors to find what they´re looking for quickly. Get rid of anything that may lead to visitors clicking away
Make sure that the first thing your mobile visitors see is your value proposition (VP).A value proposition is a clear statement that explains how your product solves customers problems; delivers specific benefits and why the customer should buy from you and not from the competition. For more information about building a viable value proposition, read this blog post.
Fork, an open source CMS, is a good example of a responsive web that has a highly visible value proposition for mobile visitors. When browsing the site, a mobile visitor will immediately know what Fork is and what are its benefits. The questionable part of the VP is “will rock your world”, which really communicates nothing. Replacing it with a statement that says who Fork is aimed at (eg “small businesses”) would be much more informative.
Although a dedicated mobile site, Kumon is a very good example of a business that is correctly communicating its value proposition. A glance at the site and you have a clear understanding of what the service is and who is it designed for.
In addition to making your value proposition visible, statements developed for boosting conversions, for example free shipping and money-back guarantee, should also stand out from rest of the content.
2. Make your CTA-s stand out and according with mobile behavior
Make your call-to-action buttons so large that they take up the entire width of the mobile screen. This ensures that mobile visitors don´t need to zoom to focus in on the CTA button.
Also, put your CTAs in accordance with mobile behavior. A 15 page white paper may be a conversion hit on a desktop site, but it´s highly unlikely that a mobile visitor will be interested in going through the trouble of downloading the paper and then reading it on a tiny mobile screen. “Sign up for Our Newsletter” or “Like Us on Facebook” are better call-to-actions for a mobile visitor who is on-the-go.
A clever idea is to implement mobile specific call-to-actions under contact information, such as “Call Now” or “Get Directions”. The mentioned CTAs will start a phone call or open a map application, overall resulting in a more targeted mobile browsing experience.
Audi has a highly visible CTA on their mobile landing page. Though not responsive design, it´s a great example of a well placed CTA, leaving mobile visitors with no confusion on what to do next.
3. Make use of photographs and videos
Reading plain text on a mobile phone is tiresome and difficult, especially when you consider that most of mobile browsing happens on the fly with texting and apps interfering. Photographs and videos on the other hand are great for capturing the attention of mobile visitors and communicating your marketing messages.
A great example of a responsive design site that uses photographs to capture mobile visitors attention is Food Sense, a food recipe blog. When on the look for recipes for delicious meals, it´s highly likely that you´ll stop on a site which uses remarkable pictures to develop a craving for food.
Another company that is effectively using images to capture mobile visitors attention and communicate its brand values is Starbucks:
With creative, keep in mind that more photographs and videos translate into a longer page load time. A study found that 67% of people expect a mobile site to load in under just 4 seconds. Also, never use flash as it´s not supported on some mobile devices, for exampleiOS.
4. Cut down your forms
Long forms are conversions killers on desktop sites. They´re even worse for mobile visitors. Filling out forms with a smartphone is time consuming and uncomfortable. To boost mobile conversions, keep your forms short.
Review forms with the view of “Is this field absolutely necessary?” If the answer is no, delete it. You can ask for additional information after the actual conversion with a follow up e-mail or call.
A good example of a business who has made filling out forms as easy as possible is Hertz, a car rental company. You can get a quote on a rental car by filling out four information fields. No name, address or contact information needed – they´re irrelevant when requesting a quote and can be gathered later, when the customer has made the actual purchase decision. Well done Hertz!
5. Use expandable content or tabs to avoid mobile scrolling
When running an e-commerce business, try implementing expendable content or tabs on your product pages. The point of tabs is to structure information based on categories so that mobile users can find what they´re looking for quicker.
For example, instead of scrolling to waves of content to find product reviews, a mobile visitors just clicks on the “Review” tab on the product page and voila – he has the needed social proof to make the transaction.
Tria offers a good learning example with their desktop product site and the same page as a mobile landing page. Notice how all the content on the bottom half of the desktop site is placed as expandable content on the mobile landing page.
In addition Tria gets credit for the CTA which is highly visible and well placed. Also notice how “Free Shipping” has been made more visible compared to the desktop site. “Reviews” have been altered in the same manner to provide social proof to mobile visitors.
- An increasing amount of website visits are performed on smartphones and tablets meaning that businesses who want to benefit from this trend, must enhance the browsing experience for these devices.
- Responsive web design allows websites to automatically change layouts according to the visitor´s screen resolution whether on a desktop, tablet or smartphone, thus creating a user-friendly interface when visitors browse websites.
- Companies that have invested in improving the browsing experience of mobile visitors and have gone from a desktop design to responsive design have seen increases in mobile conversions.
- When optimizing responsive design for mobile conversions make sure your VP and other conversion boosting elements are highly visible. Use images and videos instead of plain text and make your forms as short as possible.
An increase in Twitter volume about live TV correlates with an increase in TV ratings across varying age groups,finds Nielsen in a study conducted with SocialGuide. Analyzing tweets about live TV, the study determined that Twitter was one of 3 statistically significant variables to align with TV ratings. The other two are prior-year rating and advertising spend. Nielsen cautions that the “study doesn’t prove causality.”
For the 35-49 age group, a 14% increase in Twitter volume corresponded with the 1% rise in ratings for premiere episodes, while for midseason episodes, the associated Twitter volume increase was 8.4%. That suggests that the relationship between Twitter and TV is stronger among the younger group, a fairly intuitive result. Notably, by midseason, Twitter accounted for more variance in ratings for the 18-34 group than advertising spend.
The finding, should it hold up in further research Nielsen plans to conduct, is an important one for the TV industry, which has been grappling with the effects of increased multi-screening behavior. It follows from survey-based research last year by TV Guide survey, which found that social media buzz affects the TV viewing patterns of some adults. More recent data from Nielsen indicates that up to half of 25-34-year-olds visit social networking sites on their smartphones during both commercials and programswhile watching TV.
Previous research has also found Twitter to dominate the social TV landscape, and Twitter itself recently said that about two-thirds of its primarily mobile users visit the site in front of the TV.
Nielsen’s Mobile Consumer Report
Nielsen have just released their Mobile Consumer Report. It’s got some interesting findings, so we thought we’d give you a summary.
The current landscape
Mobile phone ownership in both developed and high-growth countries has reached a critical mass, with no growth from the first half of 2012. The high rates of ownership are shown in the below graph:
Nevertheless, the kinds of phone we own are changing. Smartphone ownership is highest in South Korea, China, Australia and the UK, whilst those in Turkey and Brazil were most likely to own a multimedia phone. Feature phones are most popular in India, owned by 80% of all those with a device.
Some countries have a higher prevalence of multiple-device ownership, too, as highlighted by the coloured segments in these pie charts:
The report also contains interesting information on where and why we purchase our devices. 49% of Russian mobile users purchased their device at a major electronics or media store, whilst 39% of those in the UK purchased online. Factors vary by location: value for money is most important in the US, UK, Italy and China, as opposed to Russians who care about ‘stylish design’ or Chinese consumers, who want a large choice of apps.
Behaviours: shopping, social & video
Worldwide, text messaging is by far the most popular use of a mobile device. E-mail, instant messaging, social networking and the general use of apps are big too; the latter two showing high penetration in almost all markets other than India. Within the use of applications, social networking is strongest in the US, where 85% of smartphone owners are regular users, followed by 67% in Brazil and 60% in China. 58% of UK smartphone owners regularly make use of social apps.
Smartphones have the biggest impact on shopping for US users, who are most likely to use their devices for in-store price comparison, online coupons and purchasing products.
Another big use of smartphones is in watching mobile video, the frequency of which is shown below. This is most prevalent in emerging markets, especially China, and less so in the developed world, with the exception of the US.
In most countries, video is most often accessed via mobile web, but South Korean and UK users prefer to use a mobile app. In the US, both mobile web and applications are hugely popular: 72% of smartphone owners watch mobile video through these. Downloading clips is the least popular method in most countries, other than in India, where it outranks applications and Russia, where the two are level.
As smartphone usage grows, it is unsurprising that mobile advertising increases with it. In every country other than India, more than 50% of smartphone users who receive mobile ads did so at least once a day.
The effectiveness of these ads varies by country, too. In developed countries, people are less likely to click on adverts, whilst fast-developing countries see greater success. Interestingly, whilst it was shown above that Indian smartphone owners are least likely to receive ads, they are more likely to submit personal details once an ad is seen.
So, there’s a whole host of information about the differing nature of mobile ownership around the world. We’re seeing smartphones take over the developed world, with developing economies following not too far behind. All across the world, we’re using our phones for more and more exciting activities: apps, social networking, m-commerce. When it comes to mobile advertising, we’ve seen an increase in volume, which may well be responsible for a dip in effectiveness.
There’s plenty more in the report, too. For even more information, as well as details of the research methodology in different countries, make sure to have a look at the whole thing.
(Source: Carrie Cousins, http://www.adobe.com/devnet/html5/articles/ten-things-you-need-to-know-about-responsive-design.html)
Responsive design is all the rage these days. Almost everywhere you look someone is talking (or writing) about it.
So what makes a web design scheme responsive? Responsive design is an approach to web design that adjusts to the user, from varying browser sizes to changes in device. The concept has been around for a few years, but 2013 is the year responsive design is really expected to have a huge affect as it is implemented on an exponentially growing number of sites.
Responsive websites work by using media queries to detect the device or the resolution of the device being used to access them. Once this determination has been made, a combination of flexible images, type, and grids adjust to fit the screen on which the site is being viewed. If you want to see responsive design in action, adjust the size of your browser while viewing a site that has implemented responsive design. Mashable is a great example. The adjustments will enable you to see just what the designers had in mind when creating it and how different each stop can be.
Responsive design is popular now because of the number of tablets and smartphones in the market. The number of users accessing the Internet via a device other than a desktop computer is rapidly increasing, making it necessary for developers to think about all the different ways their information is being viewed.
So what do you need to know about responsive design? This article covers ten important concepts.
Our collective use of a variety of devices is unlikely to change.
The variety of computer monitor shapes and sizes continues to expand.
These factors alone should be reason enough to understand why responsive design is important and likely to become the standard practice for developers. Every website needs to work well from device to device. More and more users have come to expect a consistent experience regardless of the device they use to access a website. In fact, the number of sites using responsive techniques has grown steadily since 2010, when responsive design was really brought to the forefront byA List Apart.
Responsive techniques, while sometimes time-consuming in the planning phases, can help developers in the long run. With a responsive plan, there is no need for multiple websites and redirects to sites that are designed just for mobile or tablets. This can make updates much simpler, because one update will address all devices.
Responsive design also fosters consistency. Regardless of size, visuals are consistent. This branding bonus can help sites maintain a sense of identity.
While responsive design is a great technique for rendering content on mobile devices, it is not mobile design. Responsive design is “whole web design.”
Yes, responsive techniques should work on mobile devices. It can even be argued that the design process may even start with mobile, but it is so much more than that. The best responsive sites can be viewed as intended on desktops at a variety of resolutions, from the common 1024×768 pixels to 800×600, 1366×768, and 1920×1080 displays. Those same sites also look amazing on tablets, with both standard and retina displays, and smartphones.
If a developer considers responsiveness only in relation to mobile, there is a whole web experience opportunity that has been missed. Mobile, though, is a good starting point for the whole responsive design conversation. It is a common practice to start with a mobile outline and grow the design to other sizes when planning a responsive site. Many designers and developers find it easier and less time-consuming to expand visuals than to shrink them.
Flexibility is the lynchpin of responsive design. The grid is flexible; the type is flexible; the photos are flexible. If you neglect any one of these factors, your site design is in trouble.
Moreover, when you think about flexibility, consider design flexibility. Sometimes the best options for different browser sizes include changes to, additions to, or subtractions from your original concept. Images and content may be hidden to create a better experience for smaller devices. Or you may opt for a simpler overall design scheme so that the site has a more uniform look across devices.
Remember to be just as flexible in your thinking during the development and design process as you expect the overall result to be.
Designing with a grid is not a new concept; it has been done since the advent of publishing. The concept of a fluid grid, though, is relatively new.
The best responsive projects include a fluid grid. The site can scale proportionately based on percentages or be built based on a number of grid stops. Grids that use these stops are the most common and work beautifully when planned well.
Consider the most common widths that users will use when viewing a site as a starting point. Most responsive grids include versions for at least three different browser widths–768 pixels or more, 480 to 768 pixels, and 320 to 480 pixels–as well as versions for tablets and mobile devices. Some developers opt to include additional browser widths for greater than 1000 pixels to explicitly support wide-screen monitors. While each of these stops will render a website at the best-possible resolution, a fluid background will fill any leftover space on the screen.
Another option that is gaining popularity is the use of fluid breakpoints, which are dictated by the overall design rather than predetermined stops. This more fluid style can help keep up with the growing number of “common breakpoints” used to address the wide variety devices on the market.
There are more than a dozen options out there when it comes to great, user-friendly grid choices. Twitter’s Bootstrapand ZURB’s Foundation are two excellent responsive options that really showcase what a grid can do.
A poor image will not look good at any size. The quality of images is much more important than the number of images. Almost as important as image quality is load time. This is especially important when thinking about mobile users, who typically have more limited bandwidth.
Strike a balance between quality and load time. Make sure to optimize images for the web; avoid loading full size images and scaling them using CSS width and height properties. It is best to crop images before uploading and save every photo at the smallest possible size that maintains visual quality.
When it comes to using images in a responsive layout, there are several options: use a limited number of images, limit images in mobile-sized frameworks, use multiple versions and file sizes, or allow images to hide in mobile environments. Any of these options can work well, although some developers avoid hiding images since users must still load these images even though they are unseen.
Type is not one size fits all. That 24-point Helvetica that renders beautifully on a desktop may be impossible to read on a much slimmer mobile device. Typography should follow the same guidelines as the rest of your responsive design.
The key concept when it comes to responsive typography is line length. The eye can only handle so many letters and breaks with ease. To maintain readability, type should be optimized based on screen width. For websites, 50 to 75 characters per line are considered ideal, but that drops to 35 to 50 characters per line on mobile devices. Select a point size for type based on this guideline to ensure optimum readability.
Consider the fact that blocks of type need to be easy to read vertically as well, sometimes for many scrolls. The space between lines can affect how long a user can read without tiring. Many websites use a line space that is 140 percent of the point size for large blocks of text. For smaller screens, consider adding extra space to aid readability.
Finally, think about the kind of typeface used. Novelty typefaces, dramatic lettering, and letterforms with extravagant serifs can look great on large screens but are difficult to read at smaller sizes. Give these kinds of typefaces plenty of room to breathe, use them as art-style elements, or consider switching to a different typeface. At small sizes the easiest typefaces to read tend to be regular sans serif styles with fairly even strokes.
Responsive design improves search engine optimization. For anyone building a website with branding, sales, or visibility in mind, this benefit alone is enough reason to consider using a responsive design scheme.
Because a responsive web design all lives in one place with one URL, as opposed to multiple pages targeting mobile formats, linking remains simple. Redirects don’t take away from the main site and advertising campaigns (such as those using Google AdWords) all point to one location.
Having a single website destination with a standard set of language, metadata, and keywords is also important. There is no worry that updates have been made in one place but not another or that links redirect improperly.
Another advantage is that for analytics and data collection, you do not need to track multiple URLs and redirects in addition to the main site or URL. The single responsive page can collect analytics regardless of the user’s device.
For some, the most intimidating part of responsive design is media queries. There is no need to be intimidated by media queries.
Media queries can help determine the capabilities of different devices and deliver different styles to them via CSS. Media queries expand the role of media attributes and enable site designers to use the same HTML to support multiple layouts based on information collected about the display settings of the user. You can apply the correct styles after determining the screen size or any of a variety of other media features.
When working with media queries and defined breakpoints, consider building targets based on specific pixel-width stops as you might when using a grid. A few common targets include 320, 480, 600, 768, 900, and 1200 pixels.
Another advantage of using media queries (typically based in percentages to make size adjustments) is that they can create an extra level of flexibility, making them more user-friendly on a variety of sizes and devices.
The era of the dropdown menu may be over. Simple navigation is a key feature of many responsively designed websites.
Dropdown menus don’t work very well with touch. Navigation must work for users who click or tap. Larger navigation elements are also becoming more popular. Again, touch devices are driving this trend because a minimum size of 44×44 pixels is most comfortable for users when tapping user interface elements on mobile devices.
When designing and thinking about navigation, it helps to think about the smallest sizes first. Design navigational elements to work at the smallest sizes and work up to the largest sizes, remembering that elements for additional navigation can be added for larger sizes.
Hidden swing-style navigation is gaining popularity as well. A full menu opens by clicking or tapping an icon that is usually located at the top of the screen. This option can be great for more expansive navigation menus. For a great example, see Chris Coyier’s CSS-Tricks article titled Convert a Menu to a Dropdown for Small Screens.
The key is to keep the design simple and easy to understand at any size. Users must be able to quickly understand how to use a site for it to be effective.
Responsive design as it exists now is not a perfect solution; it is just part of an evolving process. As technology and user habits change and new devices hit the market, practices for how the web is used and developed will adjust.
Web users are already using a variety of devices to view most websites. Right now there are just too many devices and too many options to create a site that is perfect on every one. Not considering browser sizes, eight of the most popular devices have six different horizontal widths:
- iPhone 4S and iPhone 5 – 640 pixels
- iPad first and second generation – 1024 pixels
- iPad3 – 2048 pixels
- Samsung Galaxy Note – 1280 pixels
- Microsoft Surface – 1366 pixels
- Google Nexus 7 – 2560 pixels
When you make your site responsive, it will be even more intuitive and it will provide a consistent experience regardless of the device, even as new devices are released.
Different devices can still provide very different experiences even without responsive design (clicking versus tapping or zooming versus scaling, for instance). Even the amount of time spent on a site or the reason for visiting may differ depending on what type of device the user has. Consider how users will actually use a site on varying devices. While it is not a perfect solution yet, responsive design will continue to develop and enable you to move in this direction.
Despite any current limitations in responsive design, it is important to start now. The data indicates that the numbers of users accessing the web on something other than a desktop computer will continue to grow. By implementing a responsive design now, you can position your site to be usable in any environment.
Now it’s time to put it all together and build a responsive website.
Check out the Beginner’s Guide to Responsive Web Design from the Treehouse blog to get a better understanding of why responsive design is important and how it will continue to influence web design more broadly.
Ethan Marcotte first got designers excited about responsive design in 2010. Read his breakthrough article from A List Apart.
If you still need convincing that responsive design is the way to go, see How to Design a Mobile Responsive Website from UX Booth and Getting started with responsive web design from Adobe Inspire Magazine.
UI Design guidelines for Responsive Design by Codrops is an excellent grouping of factors to consider for multiple devices when working in a responsive design framework.
Games on smartphones and tablets are eating into the profit of traditional gaming consoles. Why? because smartphones and tablets naturally attract casual gamers. To combat this trend, game developers and console manufacturers are concentrating resources on the hard-core gamer segment, offering more digital add ons, i.e., extension packs, and releasing fewer titles.
A major catalyst: the arrival of new consoles from Nintendo, 7974.OK +4.36% Sony6758.TO +3.01% and Microsoft MSFT -0.46% —the first since 2006. Nintendo’s console, the Wii U, was introduced in September and is the only one to hit the market so far. But Sony introduced the PlayStation 4 on Feb. 20, slating it for a “holiday 2013″ release. And Microsoft is expected to announce a new Xbox in coming months.
With new consoles comes demand for new games to play on them. Or that is how things have usually worked.
Today, the media-technology environment is markedly different than during the last gaming cycle. More people are playing games on mobile phones and tablets. There is also new competition for control of the living room, including more capable DVRs and Internet-connected TVs.
For some console makers, that may indeed be reason for concern. Nintendo slashed its sales outlook in January after disappointing holiday demand for the Wii U. And in February, Activision Blizzard ATVI -0.13% forecast lower earnings in 2013, citing uncertainty around console transitions as a factor.
But Nintendo is the most exposed console maker to gamers defecting to tablets and phones, according to Wedbush. The original Wii attracted casual gamers, selling almost 100 million units, while the Xbox 360 and PlayStation 3 targeted more hard-core gamers, selling 74.4 million and 73.1 million units, respectively, according to videogame tracker VGChartz.
This cycle, Wedbush expects Nintendo to sell around 50 million fewer units. Microsoft and Sony, on the other hand, should each sell 10 million to 15 million more. This benefits developers like Activision, Electronic Arts EA +2.96% and Take-Two Interactive, TTWO +1.04% whose games primarily run on non-Nintendo platforms. And while game-software sales fell 22% in 2012, sales of the top 10 titles, which drive much of those developers’ revenue, fell only 5%, according to Macquarie.
Game makers have honed their offerings to focus on a smaller group of key franchises that remain wildly popular with hard-core gamers. In aggregate, publishers released about 200 new console titles in 2012, down 40% from 2005, according to Macquarie.
Developers have also spread out the sales impact of these high-profile games by offering consumers a stream of digital add-ons to beef up the experience. Instead of just buying a game for $60, users can pay an additional $1 to get a new shield for their character or $30 to change the location of the virtual battlefield. Take-Two, for example, got 20% of revenue from digitally delivered content in the first nine months of fiscal 2013 ended in March, compared with 12% the previous year.
While developers aren’t likely to start selling many games for new Sony and Microsoft consoles until 2014, the buzz around console unveilings has already boosted game stocks. Over the past three months, shares of Activision and EA are both up 28%, while those of Take-Two are up 21%.
Yet valuations remain reasonable: Activision and EA trade at 17 times forward earnings, compared with a 10-year average of 23 times and 28 times, respectively. Take-Two, which tends to have lumpier earnings because of the time between its title releases, trades at only seven times. That is compared with a 10-year average of 19 times.
The smartphone era will pose a challenge for game makers. But they still have lives left to play.