luni, 28 ianuarie 2013

The SEO of Responsive Web Design

Posted: 27 Jan 2013 05:05 PM PST

Will Critchlow announced back in November that Distilled's blog was updated with a new responsive design, but it occurred to me recently that we never went into the specifics of why responsive web design is so great. Responsive design has been a hot topic in online marketing for the past few months, but is it really going to become an industry standard?

Short answer: yep.

Responsive web design means that you don't have separate mobile, tablet, and PC versions of your site: the site adapts to whatever size screen it's being displayed on. Regardless of what device a visitor is using to access your site, they'll see all of the content you have to offer (no more partial-content mobile versions of sites) and they'll see it in readable way.

With a 55% increase in smartphone subscriptions in 2012 alone, responsive web design is the future of online marketing.

How does it work?

Sounds too good to be true, doesn't it? It all started with a fairly simple theory from Ethan Marcotte in a 2010 article titled "Responsive Web Design." Rather than creating a single webpage that is 800px across and centers itself on the screen, responsive webpages are composed of elements that size, shape, and place themselves based on the width of the browser screen. Elements determine the screen size using CSS media queries.

Let's start with a simple example on a grid, using 9 rectangular elements labeled A–I. On a small screen, like a tablet or an older computer with fewer pixels, the elements would display themselves in a 3 x 3 grid:

Web elements in 3x3 grid

When the screen is wider, those elements can spread out:

Web elements on 4x2 grid

When it’s narrower, they can stack:

Web content in 1x4 grid

Now, here’s a real life, complex, and, might I say, ingenious example. Microsoft’s website uses these sections:

Microsoft desktop layout

When the screen gets smaller, elements stack differently:

Microsoft site sized for mobile

For a more interactive example, go to www.microsoft.com and have some fun changing the browser screen.

In their design, Microsoft keeps all of the elements from the desktop version of the page to view on other devices. But one of the biggest differences between desktop sites and mobile sites is that mobile sites just don’t have room or the browser memory to have so much content on one page. For example, Smashing magazine gets rid of the extra stuff as your screen size gets smaller:

Here is their desktop view:

Smashing Magazine at desktop width

The full-sized page has two levels of navigation on the left, the main content in the middle, and search and ads on the right. It centers the main content in the middle, where you’ll be looking, but makes use of the ample width of the desktop screen.

Moving on to the iPad-sized tablet view:

Smashing Magazine for iPads

When the screen doesn’t have as much room on either side, Smashing Magazine keeps the ads and search on the right, but it moves the navigation to the top in a clever way that is noticeable, but doesn’t take up too much space.

Here's their Kindle Fire-sized tablet view:

Smashing Magazine for Kindles

The ads were sacrificed as screen space became too valuable. Search was moved to the top, so that second tier of navigation was moved to the side to make sure the main content didn’t start too low on the page.

And now, onto mobile:

Smashing Mag for Mobile Phones

On the mobile view, the ads are still gone, along with the share buttons. The navigation has changed from a constant element on the page to a small drop down at the top. The search bar was put in the space available once the top navigation was gone.

As you can see, responsive web design gives you an amazing amount of control. With some creativity, a responsive web design can convert almost anything from PC-optimized to mobile-optimized, to anything in between.

Why responsive design is good for SEO

So now you know that responsive design is a clever idea that, with the right set up, will cut down on web maintenance and content creation. But how does that help SEO?

Usability

Google wants to send visitors to the sites that they want to see. When searchers navigate to your site and immediately return to search engine results pages, Google makes a note that your site might not be the best choice for that search term.

If you have a mobile site that has less content or looks significantly different than your regular site, you’ll frustrate return visitors who are looking for something they found on the desktop version. If you don’t have a mobile site at all, 61% of visitors will return to Google to find a site that is easily readable. Either way, your bounce rate will rise and your rankings will drop. With a responsive web design, visitors will get all the content they want, in a format they can read.

Duplicate content

Don’t worry, a mobile site with the same content as the main site won’t be hit by Panda. But you’ll still have the same content on two places on the web, which is bothersome for you and could bring visitors to the wrong version of your site. A responsively-designed website means that content is only in one place on the Internet.

Ranking for mobile searches

Google has said that it ranks sites optimized for mobile higher in mobile searches. Google recommends responsive web design, meaning your responsive designed site will rank as well on mobile search as a site designed specifically for mobile. That’s especially useful for...

Link building

With a responsive web design, a link to your main site is a link to your mobile site as well. Mobile sites are still new, so your competition in mobile search is going to have significantly fewer backlinks. A responsively-designed website will have the backlinks of your original site, even while competing for mobile visitors. It’ll give you an instant edge over there. And, as mobile usage rises and webmasters start linking to mobile sites, your backlinks from both mobile and desktop sites will combine for a stronger backlink profile.

Early adopter recognition

Making your site responsive now, when the topic is hot but largely unused, will get you noticed. Here are a few great examples:

http://blogs.adobe.com/digitalmarketing/digital-marketing/mobile/responsive-web-design-and-web-analytics/
http://inspirationfeed.com/inspiration/websites-inspiration/60-examples-of-responsive-website-design/
http://www.clicknewz.com/5984/benefits-of-responsive-web-design-examples/
And, of course, Microsoft and Smashing Magazine from this post.

Results

As you can probably guess, if your site was previously unoptimized for tablet and/or mobile, you’ll see a decreased bounce rate from those devices. We’ve seen the positive effects spread into the main site as well. On a fellow Distiller’s site, implementing responsive web design increased visits by over 400% in a month:

Responsive web design traffic increase

That’s an extreme example; the switch to responsive web design on Distilled’s blog didn’t have the same effect. However, results like this show that, in the right situation, responsive web design could bring amazing results.

The cons

Responsive web design isn’t the Holy Grail of online marketing, though; there are some disadvantages you’ll want to mull over before you decide to take the plunge.

Set up time

Moving to a responsive web design will take a significant amount of time from both your design team and your development team. It’ll probably take longer than most redesigns you’ve been through since both teams will have to learn a completely new concept before they can implement it. On the plus side, when other sites start upgrading to responsive web design, you’ll be ahead of the curve.

Large pages

If you have a lot of content on your desktop pages, responsive design means that all of that content has to be loaded on mobile pages. Can you imagine a poor phone trying to load all of this?

Lots of content on NYT

That’s why sites like NYTimes.com and CNN.com have separate mobile versions that only display a small portion of all the articles and links they have on their desktop versions. If you have a site that’s huge like that – and is meant to be huge like that – stick with separate mobile and desktop versions.

Mobile user experience

Since responsive web design confines you to the same pages and content on the mobile and desktop versions, it could limit your options for enhancing user experience. While I pointed out earlier that mobile users want the same content as desktop users, they’re searching on a tiny screen with their fingers rather than a large screen with a mouse and keyboard, so their journey to that same content will feel completely different. If you have a really interactive or complicated site that needs to have different pathways to content, like Facebook, you might want to keep that mobile version of your site so you can have that control.

So, is responsive web design right for your site?

If your site is too large or too complicated and needs a mobile site, you’re probably aware of it (and probably already have an amazing mobile site that shouldn’t be messed with). But, what if you don’t have a mobile site, or have a simple one and don’t know if the switch to a responsive web design is worth it? You’re going to do a little Google Analytics research:

Do I even need a mobile site?

Start by going to the Mobile Overview report, which is a Standard Report in the Audience section under the Mobile drop down. If the number of mobile and tablet visits is under 5% of your total traffic, you probably don’t need to worry about creating a mobile-specific site (yet: this number is only going to grow).

If it’s more than that, click on the Goal Set or Ecommerce metrics set – whichever you use to track conversions – at the top of the page, under the Explorer tab:

How to change metric sets on standard reports in Google Analytics

Are your desktop visits converting significantly more than mobile visits? If mobile conversion rate is less than half of desktop conversion rate, your site is performing below industry standard, and you need to optimize for mobile visitors.

How does my mobile site look on their screens?

Go to the Standard Reports > Audience > Mobile > Devices and change the primary dimension to “Screen Resolution.” You can change that right above the table, by clicking the Other drop down to the right of the line of other primary dimensions you could use. Try out the 10 most common screen resolutions that are used by your visitors. How does your mobile site look on them? Use Screenfly to see your site on different devices. You might be surprised by how many tablets or large phones are seeing an overly simplified site that isn’t very compelling. Even if you have a mobile site that looks great on 50% of mobile visits, if it looks bad on the other 50%, you should consider responsive web design.

Does my mobile site give visitors what they want?

Look at the mobile bounce rate under Standard Reports > Mobile > Overview. When visitors land on your mobile site, is something making them leave more quickly than on a desktop? Mobile visitors should have roughly the same bounce rate as desktop visitors.

If you have the time, do a full mobile SEO audit to really identify what the mobile version of your site needs to look like. Aleyda Solis wrote up a great mobile audit guide on State of Search.

Your best option: move towards responsive web design slowly

If you’d like to move towards responsive web design slowly or already have a pretty good mobile site out there, consider making your site responsive so that it’s optimized for desktop and tablet, but not mobile just yet. The design will be easier, but you’ll get a first taste of the technical side, and you’ll get better conversions for tablet users (which you probably haven’t optimized for yet).

Ethan Marcotte explains how the coding works in his original article and developers have been creating themes for popular CMSs (for WordPress, for Drupal, and for Joomla).

Be aware that the technical implementation is fairly advanced, and there are a number of small mistakes you should watch out to avoid:

1. Use compressed images

You might have some gorgeous photos that load fine on the desktop version of your site, but those are going to have to be loaded on mobile versions as well. 74% of mobile users will leave after 5 seconds waiting for a page to load, so make sure that you compress your images as much as possible, and use them somewhat sparingly. Smush.it is a great tool for compressing images.

2. Design for all screen sizes

A lot of designers will want to design for one mobile size, one tablet size, and one desktop size, and just make a “responsive” design that snaps the site into a different layout for those standard sizes. But we have large and small cell phones, tablets the size of Kindle Fires to 10” Samsung Galaxy Tabs, and desktop monitors as big as 30”. A responsive design is more about resizing the elements on a page as you have more pixels than it is about snapping one design into another. As designer Stephen Hay says, “Start with the screen small first, then expand until it looks like sh*t. Time to insert a breakpoint!”

3. Always show all content

It might feel overwhelming to find a way to fit all of the content from the desktop version of a page onto a mobile version of a page, but that’s the point of responsive web designs. In the examples described above, the only content that goes away is ads (which users probably didn’t want in the first place) and some navigation (which is replaced by a simpler version of navigation). No actual content is hidden. Mobile visitors want just as much information and just as many options as desktop users do, so don’t deprive them.

4. Optimize for touch

You probably won’t accidentally include an onmouseover JavaScript event on the mobile size of your site, but be aware that tablets can’t hover with their mouse either, and someone on a desktop might be using Windows 8 and want to use touch. Best practice is to make your site completely accessible with touch-only, regardless of the screen size.

5. Test on all browsers

Remember the good old days, when you complained about having to test your website on IE and Firefox? Now you’ve got:

Desktop:

IE9 for Windows 7
IE10 for Windows 8 (which doesn’t run Flash)
Firefox
Chrome
Safari

Tablet/Mobile

Safari
Default Android browser
Chrome beta
Dolphin
Opera
Firefox

And those are only the most popular ones. You’ll have to test on all of those, at different screen resolutions, too.

But it’s worth it

Switching over to a responsive web design will be a big challenge, but with the way the industry is moving, it’ll prepare you for the future, and put you a step ahead of your competitors.

Have any of you made the switch? Any advice for those who haven’t?

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!

Photo of the Day: A Run Along the Colonnade

Your Daily Snapshot for
Monday, January 28, 2013

Photo of the Day: A Run Along the Colonnade

President Barack Obama runs along the Colonnade of the White House with Deputy National Security Advisor Denis McDonough's children, Jan. 25, 2013. The President announced McDonough will become Chief of Staff, replacing Jack Lew, the nominee for Treasury Secretary. (Official White House Photo by Pete Souza)

Seth's Blog : Beyond showing up

Beyond showing up

You've probably got that part nailed. Butt in seat, smile on your face. We often run into people who understand their job to be showing up on time to do the work that's assigned.

We've moved way beyond that now. Showing up and taking notes isn't your job. Your job is to surprise and delight and to change the agenda. Your job is to escalate, reset expectations and make us delighted that you are part of the team.

Showing up is overrated. Necessary but not nearly sufficient.

• Email to a friend •

duminică, 27 ianuarie 2013

Mish's Global Economic Trend Analysis

Australia Roundup: Hundreds of Restaurants Close Rather Than Pay 250% Holiday Rate; Massive Housing Incentive, Still No Buyers

Posted: 27 Jan 2013 09:09 PM PST

It's time once again to take a look at happenings down under. Restaurants are closing en masse rather than pay double time and a half to stay open on holidays.

Please consider Penalties blamed for taking high-end dining off menu.

The annual survey of the 7500- member Restaurant and Catering Australia reveals a 33 per cent jump since 2011 in the numbers of restaurateurs saying they cannot afford to open on public holidays.

Public holiday penalty rates require employers to pay double time and a half, equating to pay rates of at least $40 an hour.

Robert Marchetti, executive chef of Sydney's Icebergs Dining Room and Bar and North Bondi Italian Food and owner of highly acclaimed restaurants in Sydney and Melbourne, said some of his businesses - including Neild Avenue - would be closed today, while those that opened would be providing a "public service".

"The government are a bunch of monkeys who don't understand business," he said.

"We're not living in the 1960s anymore. Australia has its head stuck up its arse on IR.

Following ACTU Secretary Dave Oliver's Christmas Eve call for the Fair Work Act to be changed to enshrine penalty rates as a minimum entitlement, United Voice liquor and hospitality division Secretary Tara Moriarty said the issue was one the industry raised every public holiday.

"Penalty rates haven't made the sky fall in yet, despite them constantly making suggestions to the contrary," she said.

Shop, Distributive and Allied Employees Association national secretary Joe De Bruyn said the closure of some businesses on public holidays would simply mean more business for the restaurants that stayed open.

"Penalty rates have been part of workers' entitlements for decades," he said.

Unions were awaiting the outcome of a Fair Work Australia hearing on penalty rates. "While the unions put up a very strong case for preserving penalty rates, the employers' case was a pathetic performance," Mr De Bruyn said.

Double-Time and a Half Insanity

You have to love the mentality "the sky is not falling yet" mantra, especially when it clearly is.

Who pays for this absurdity? Consumers in general of course. Business owners and employees of businesses who cannot afford to pay double-time and a half, also get hit hard.

House and Land Incentives

Property Observer notes House-and-land incentive and discounts from $5,000 to $126,000

New housing finance and building approval figures suggest there will be no swift rebound in demand for new housing.

There was a 10.3% fall in home loan commitments for new dwellings and a 0.3% drop in building approvals for new houses in November, according to seasonally adjusted ABS figures.

New home buyers can secure discounts in the thousands and sometimes tens of thousands of dollars on select blocks of lands and new homes in Melbourne, the Gold Coast and Sydney.

There are also generous first-home buyer incentives on offer from NSW, Queensland, Tasmanian and South Australian state governments for those buying or building new homes.

$30,000

Listed residential developer Peet is offering savings of up to $30,000 on "certain lots" in residential communities on the outskirts of Melbourne.

$22,000

Listed developer Devine is offering to pay mortgage repayments for up to a year on behalf of approved purchasers who sign an unconditional contract to purchase a new Devine house and land package before February 28 2013 under its Devine Mortgage Break promotion.

Melbourne builder Carlisle Homes is offering a $30,000 discount off the retail price of double-storey homes and $22,000 off the retail price of single-storey homes in its luxury Affinity and T Range collections. There is currently no end date to this promotion.

$10,000

Up until February 25 2013, Stockland is offering approved purchasers a $10,000 VISA gift card to spend as they wish.

$76,000 - $126,000

Discounts of up to $126,000 are on offer for residential lots in The Highlands community in the Ecovillage, Currumbin Valley on the Gold Coast.

Massive Housing Incentive, Still No Buyers

Macrobusiness reports Developers Go Completely Mad.

Today, Property Observer has provided a comprehensive list of incentives being offered by developers in a bid to lift sales, which are in addition to generous incentives on offer in New South Wales, Queensland, Tasmania and South Australia.

Clearly, such developer incentives are failing to stimulate demand and could actually be precluding the new home market from functioning properly.

Australia's property development industry appears to be caught in a pincer. If they don't abandon incentives in favour of transparent land price deductions, financing of new house and land packages will remain problematic and sales will likely continue to struggle. At the same time, reducing the listed price by the same value as the bonuses and incentives being offered could lower their collateral value, potentially triggering the banks to call in more equity from bank-financed developers to bring their loans back to agreed conditions and/or loan terms. Straight price cuts are also more likely to aggrieve recent purchasers that paid higher prices.

How Fast the Collapse?

The housing bubble in Australia has clearly burst. All that remains to be seen is how fast things collapse.

Meanwhile, Australia's unions still cling to an already dead model, oblivious to the fact the boom is over.

Mike "Mish" Shedlock
http://globaleconomicanalysis.blogspot.com

"Libertarian Turned Keynesian" Responds

Posted: 27 Jan 2013 12:49 PM PST

In response to How to Debate Paul Krugman: "Ask Questions Like a Child", a self-proclaimed "Libertarian Turned Keynesian", a graduate of Columbia University, writes ...

Hello Mish

I want you to publish this rebuttal to your post.
You can use my first name if you'd like with Libertarian-turned-Keynsian in brackets.

Let's say there are 8 million healthy, unemployed people in US.

The Treasury can simply print 4 million pieces of IOU claiming that the holder of this piece of paper is entitled to a free massage or a free cleaning services or free haircut or free baby-sitting or free moving (basically any service worth $50 with negligible raw material) from another unemployed person and simply distribute it to unemployed people.

What happens? On Day 1, the 4 million who got the coupons tender their coupons and receive services (increase in daily GDP 4 million * 50 == 200 Million).

On Day 2, the opposite happens and this goes on quite a while. Now, lets say the economy improves and 2 Million get employed. Now essentially we have 1 Million extra coupons (inflation). Treasury will tax the lucky/rich people who have a job and a coupon and essentially retire them.

Or, let's say the economy deteriorates and 2 more more million get unemployed. Now there are few coupons and some may be willing to do the job for 3/4th of a coupon (deflation). Now essentially Treasury can print extra 1 million and distribute them.

Notes:

1) We need flexible money supply.
2) Having gold standard is stupid. What does amount of gold supply have to do with anything?
3) We increased GDP by simply printing pieces of paper.

Bonus:

Let's say someone comes with a brilliant idea that one unemployed can actually perform two jobs a day. Now instantly the capacity doubled and Treasury can print double the amount of IOUs.

So Ridiculous I Hardly Know Where to Start

I did not post the first name of "Libertarian Turned Keynesian" on purpose. His name was unusual enough that he could be found.

The above response is clearly absurd. I reply only because it is precisely the kind of "something for nothing" silliness that is frequently taught in higher education.

Any person with a modicum of common sense, at any education level beyond 7th grade, should understand what happens to demand as soon as free money stopped.
Any person with a modicum of common sense, at any education level beyond 7th grade, should understand costs of goods and services would soar if free money was handed out in any significant amount.
Any college graduate should understand the difference between nominal GDP and "real" inflation adjusted GDP.
Any college graduate should understand what happened in Zimbabwe and Weimar Germany.
Any person with any amount of common sense should understand it's what you get for your money, not how much you have, that matters.

Ignoring the typos, clearly the writer has absolutely zero sense of the difference between nominal GDP and wealth. In nominal terms (using the number of Zimbabwe dollars in circulation as "wealth"), Zimbabwe was economically the strongest country in the world.

Unfortunately, they cannot teach common sense in schools. Instead they teach Keynesian claptrap. Then economically illiterate graduates write me things similar to the above. This kind of thing happens all the time, frequently with emails ending in ".EDU".

Addendum: Spare the Monetarists?

Reader Ayal asks "You target your attacks at Keynes and Keynesians, but why do you spare the Monetarists?"

The simple answer is I don't. Bernanke is primarily a monetarist with some Keynesian tendencies as well. QE is 100% monetarism and I attack that all the time.

Countless times I have pointed out that Japan tried both monetary and fiscal stimulus and failed. One can also search my blog for Greg Mankiw, the high priest of monetarism to see what I have to say.

If I had to pick one of article in that search reference to read, it would undoubtedly be Modern Day Fairy Tale of 3 Economic Wizards (Except It's True)

Comment

It's quite shocking what comes out of our education system. Of course, what comes out is hugely influenced by economically illiterate teachers at the highest levels in education.

Addendum 2: Not a Hoax

Several people suggested the email was a hoax.

It's not. I have additional correspondence with this person thanking me for not using his name. And a Google check of his name with numerous references ties back to Columbia.

Mike "Mish" Shedlock
http://globaleconomicanalysis.blogspot.com

SEO Blog

Five Must Have Apps For The Proactive Freelancer

Posted: 27 Jan 2013 11:38 AM PST

The days where one could simply pick up a job, write, pick up a paycheque, and then pick up another job are long gone. Now it's up to the freelancer to find their jobs, organise their electronic data, market themselves, and do this all whilst working on any existing...
Read more »

Interpersonal skills | Most required to create a good social network

Posted: 26 Jan 2013 10:31 PM PST

To interact with the people socially we need some skills which are known as Interpersonal skills. These are the set of rules applied to interact effectively with persons. Interpersonal skills play a very important role in one's life if he wants to be succeeding in an organization. These are essential...
Read more »

luni, 28 ianuarie 2013

The SEO of Responsive Web Design

The SEO of Responsive Web Design

How does it work?