Why is this big news? Because the new Boston Globe isn’t an ordinary newspaper website. For the first time, Responsive Web Design has finally got a poster child to call its own.

Responsive web design has come a long way in just 1.3 years. Back at the end of May 2010, Ethan Marcotte famously (at least to us web designers) published his seminal article on A List Apart, aptly titled ‘Responsive Web Design‘. The article introduced a new paradigm to web design – a revolutionary but not destructive or disruptive one – stating that websites should be inherently flexible to their constraints. This thinking wasn’t necessarily new, but it was so well considered and logical in both its theory and methodology that I and many others stood up and noticed. Since then, many of us have adopted it as the new norm when creating websites for clients.

However, as with any new and groundbreaking idea, it was always a working concept. Since its inception, RWD always needed a big backer. A name big enough that people beyond our small community/industry would notice and think ‘well, that’s a good idea’. A website big enough that when people viewed their other favourite websites on their multiple devices, they would notice that the Globe’s experience just ‘fit’. No pinching, no zooming, no squinting required. They could view the Globe site on their iPad, their iPhone, their Android, Android tablet, or – if they so desired – on their 13 year old Apple Newton, and for each device, the viewing/reading/browsing/subscribing experience responded and adapted to the device – not the other way around.

The point is, responsive web design, however practical and logical it is from a service provider’s perspective, needed a live and in-the-wild example to prove its real worth. The new poster child that is the Boston Globe represents in plain view just how useful, applicable and cost-effective a well-made & responsively designed website can be.

A tour of the new BostonGlobe.com from jeff moriarty on Vimeo.

I’m lucky enough to have clients who have understood the application and benefits of using responsive web design in their projects from the onset. And, judging by the fantastic output of http://mediaqueri.es, many others do too. However, the majority of companies and businesses out there are likely to need a little bit more persuading as to why designing with this approach is the best way forward. Thankfully, our jobs have just been made all the easier thanks to Ethan and that A-Team who designed and built the new http://bostonglobe.com

Here’s an argument for creating content first – or at least thinking about content first.

What is a website anyway?

Websites exist to deliver content. Websites are the things we create when we have something to say, and something to show. We create websites because we have content to display and share.

We design websites because we want content to look great, to give users a pleasing experience and to create a good impression of our treasured brands.

Designing for the content

Typically, professional web designers design websites, while the client provides the content. After all, it is the client’s content. So the designer designs, and the client gets busy working on the content. Except they don’t; they get busy with business, and forget about the content.

Meanwhile the designer designs a website based on old content, or no content at all. The designer can only assume:

• What the new content will say
• How much content there will be
• What shape the content will take (long lists, tables, bullet points, multimedia?)
• Where the content will lead people (will the copy include instructions or calls to action?)
• The focus of the content (will a key point be hammered home?)
• The tone of the content (what voice will the website have?)
• How images will fit around the copy
• If video or audio content will feature

Designing a website without content is like designing a house without knowing who will live in it.

The benefits of designing around content

Designing with content means…

• Your website feels like a planned creation – with every element pulling in the same direction.
• The design and content speak the same language.
• The design responds to and enhances the content, featuring break-out elements (such as testimonials or definitions) in the best possible way.
• The design perfectly contains the content, and is clearly designed to contain that content.
• You don’t waste money on design materials or collateral which, because of a belated content decision, become obsolete before your site launches.

In the next post we’ll consider easy ways to create your content. Because for many organisations, content production is time-consuming, complicated, and a little bit scary. But it needn’t be.

This was a guest post written by Leif Kendall, a freelance copywriter and content strategist, and author of Brilliant Freelancer.

Have a project you want to discuss? By all means – get in touch!

• A social network (built on Buddypress) designed specifically for expatriated Anglophones living in Paris. With illustrations and creative direction provided by Brighton-based FentonForeman, the project saw CarbonGraffiti design & optimise the interface & user experience and develop the site on the Buddypress platform. The result: a full-scale social network where expats can meet, interact and share tips on Parisian hotspots and life in Paris with one another. The site, built in HTML5 and using @font-face and other CSS3 goodies, uses media queries and responsive design to cater to a mobile audience. The site will go live in Q2, 2011.
• A multichannel solution for a professional speakers management company in Australia – CarbonGraffiti created and launched a rebranded, MailChimp newsletter and accompanying WordPress-powered blog, to help the company grow their existing email marketing database and communicate with their readership more effectively. The project originally started as an RSS-driven campaign, but after determining the need for additional functionality, the campaign became a fully editable, branded newsletter to match the new blog style. The blog was built in HTML5 and will be used as the primary news and article section for the client’s existing website.
• Ongoing digital marketing consultation and campaign management for a startup specializing in the training and education of clinical research nurses. Services range from custom MailChimp template coding (based on a design by the illustrious Jon Hicks who also did the site design) to PPC and email marketing setup, management and consultation.
• Designed, developed and launched a website for a new startup offering premium accommodation to international students through purpose-built hotel-quality centres throughout the UK. The site, built in HTML5 and powered by WordPress, uses media queries and responsive design to cater to a growing mobile audience. As a result of this successful phase, CarbonGraffiti has been invited to tender for the larger second phase of the company’s impressive growth trajectory.
• Continued 1-day email marketing workshops in central Brighton, covering the basics of email marketing, from history, jargon and best practices to a hands-on demo and case studies. The courses are offered at Silicon Beach Training in Brighton’s North Laines.
• Designed and developed a custom MailChimp email template for an LA-based actress, to be used as part of her promotional kit and new personal brand. Based on the success of the template, CarbonGraffiti has been commissioned to redesign and develop the full website and brand identity.
• Ongoing digital marketing support for a well-known Montreal-based ESP.
• Gave a presentation at English UK’s annual marketing conference at the Westminster Conference Centre in London, focusing on ‘The future of digital marketing’ as related to the English Language Training industry and the many challenges and opportunities it faces today.
• A few basic trade industry sites we’ve designed and/or coded in the past have now gone live, see them here. The Garatec site was built on Shopify, coded by CarbonGraffiti for a local web agency.

That’s it?

That’s just the tip of the iceberg – we’ve worked with some great clients not included in the above list, and are always on the look out for more. If you want to be one of them, get in touch today.

The best part? The entire experience is done through a few new meta tags and an iPhone-only stylesheet. No markup was harmed in the making of this (mobile) version.

A few points

• Knowing that mobile users won’t take actions normally reserved for desktop browsing, I removed the contact page (and large contact form) from the mobile version. Should a visitor want to contact me, they can do so using the relevant contact details and a click-to-call mobile number on the footer of each page.
• Through CSS, I was able to increase the size of buttons throughout the mobile version, as well as remove the need for a hover state. We all know fingers are much more cumbersome than a mouse pointer, and the mobile optimisation acts accordingly.
• Using %’s for widths vs pixels allows a fluid setup when a user rotates from portrait to landscape orientation.

Update October 2010 – Let’s get responsive!

Having become somewhat obsessed with responsive design recently (and applying it to client sites, for example http://lcpeurope.eu), this site is now set on a fully-flexible layout, powered by media queries and %’s, not pixel widths. That means the site will expand and stretch to use all available screen real estate, and not remain locked into what now feels like a cramped and confined 960px grid layout. Unfortunately, this does not apply to IE8 and lower. Sorry.

Further Reading

• Responsive Web Design – A List Apart
• http://www.engageinteractive.co.uk
• O’Reilly’s Building iphone web apps

Looking at these figures, it’s easy to see why the Premier League is considered the most lucrative in the world. But if there’s this much money involved in the world’s fourth highest gross revenue-generating league (behind American football, baseball and basketball), why haven’t the clubs in the world’s richest football league recognized the value in the fastest-growing and most cost-effective channel available – Online – and invested accordingly?

Setting the pace

The recent launch of Manchester City’s new website prompted me to take a look at the websites of the 19 other clubs in the top flight. City (and the agency they used for the build – www.pokelondon.com) had clearly done their research into what makes a site usable and attractive in today’s market. More importantly, it seems they spent a while looking at what’s *not* being done across the majority of EPL clubs, and I’d imagine Poke happily realized their work was cut out for them after completing their competitive analysis. Simply integrating social media across a well-built site coupled with a modern, attractive and clean interface, I have no doubt the City site will win fans not just of the team’s football, but of a better online experience.

What about the rest?

One might argue that the traffic arriving on a football club’s website is qualified enough to know what they want and where to go – allowing the UX to be disregarded. However general web marketing and design should always be given priority, no matter how familiar the audience. What’s more, considering the EPL’s global reach and revenue, all 20 clubs have potential user bases worldwide, meaning their sites should be optimized for acquisition and retention where and whenever possible. Key web design factors such as usability, interface design & architecture, SEO, grid structure, Flash vs CSS, navigation, page number, page depth, ad space and many more should always be addressed, but in most cases of the sites below, these considerations seem to fall by the wayside.

Below are the websites of the 20 English Premier League teams for the 2009/10 season, in alphabetical order. Some thoughts follow.

Some recommendations

• Update and differentiate. Man City’s rethinking of what their site visitors want and need – and stripping away the rest – is welcome progress to what seems like a stagnating and under-appreciated medium for football clubs. This thought is enforced by the realization that no less than 7 of the 20 clubs are built on identical templates, provisioned by a wholly owned subsidiary of The Football League called FL Interactive (FLi). The implicit trust those 7 clubs have put in FLi – that the templates used are indeed the most effective, usable and optimized designs and layouts possible – seems worryingly naive. Surely each club’s supporter base and season ticket holders are as unique as their club’s history? They deserve to be treated as such – both online and off.

  Instead, these 7 clubs have limited their web channel’s potential by using an agency who uses identical templates as 6 of their competitors. Shockingly, FLi actually use the same template for almost all teams in England’s Championship, League 1, League 2 and Non-League. See the full list here.

• Become more social. Although Man City is not the first club to offer a live Twitter update feed directly from their homepage, they might be the only club to realize the importance of fully integrating social media across their entire site. Worth mentioning that Liverpool and Chelsea have also highlighted their social media presence on their homepages, with Facebook and Twitter the primary networks of choice. Surprisingly, neither Man Utd or Arsenal seem to have any such presence – yet.

  Clubs extending their brand name through 3rd-party social sites allows higher degrees of interaction and helps build loyalty amongst those supporters who haven’t grown with allegiances to any particular club. This is especially true in other countries where the EPL is broadcast, and where support bases translate into huge revenues through merchandising alone.

• Question the value of 3rd-party ads. Interestingly, given the huge revenues generated by EPL clubs over a season, it seems strange that 17 clubs use 3rd-party advertising on their homepages and subpages. Only Manchester United, Manchester City and Chelsea opt against 3rd-party ads on their homepages, and it’s no coincidence these 3 clubs are currently considered the richest in England. Strangely though, most clubs also tend to run ads for their own content using standardized IAB ad sizes. In my opinion this contradicts a maturing web society’s user behaviour: basic run-of-site banner ads are becoming white noise due to saturation and ineffectiveness. I can’t recall the last time I clicked a banner ad, so why train users of a club website to go against a growing online behaviour? Improve the overall user experience to gain long or short-term revenue, and lessen the reliability on ad-generated revenue.
• Improved use of white space. After a quick scroll of the list above, one main pattern emerges: the clutter. In the world of web design, white space and padding are not-so-secret ingredients to a successful layout. Proper spacing aids in the visual differentiation of a page’s content into digestible chunks for the eye. Unfortunately, the majority of the sites below blatantly dismiss the need for white space, and opt instead for cramming as much content into each page as possible. Again, Man City’s new site leads the pack here, and the choice of sIFR typography accents the white space very effectively.
• Deliver multilingual content to a global audience. As mentioned above, EPL club websites can’t afford to assume their user base are in the British Isles only. The Big Four of the EPL have included multilingual site variants, with Arsenal and Man Utd opting for Chinese, Korean, and Japanese, whereas Arsenal and Chelsea have also translated into Russian. Both Man Utd and Man City (no surprise given their new owners) have translated into Arabic. Of the 16 other club sites, only Spurs have elected to provide translated content – into Chinese. It should however be a matter of time until the remainder of the EPL sites start translating into languages their records show are generating overseas sales.

So what do they do successfully?

The above recommendations don’t touch on the various web marketing methods that are implemented by most, if not all, of the 20 EPL sites – and successfully so. Given the growing size of the UK’s mobile industry, SMS marketing seems to be a very popular channel used by all clubs, as well as registration-based marketing and subsequent email marketing for maintaining communications. Streaming video content is also widely used, as are other media forms such as podcasts, TV, blogs and RSS. Various forms of competitions, prize draws and contests are used to retain traffic and build site loyalty. As already mentioned, some sites successfully use social media, although there is definite room for improvement in this area. Ultimately one might consider the point of doing such effective web marketing campaigns when the base website could be so much better.

Have any thoughts on the 20 EPL web sites listed above, or feel I’ve missed something? Feel free to comment below.

SweetCron is one such platform, and is quickly becoming the first choice for many lifestreamers. Offering great functionality, maximum extensibility and high customization, it lets a lifestreamer input their feeds, tweak the code (and design) and let the software do the rest.

Did I mention it’s highly customizable? Without further a do, here are 25 of the best SweetCron-powered Lifestreams out there in no particular order. As always, if you have suggestions or think I’ve missed a great example, post a comment below!

http://me.noeruiz.com/

http://Ba21.us

http://ancyru.net/

http://cronthemes.com/

http://dailymax.limpag.com/

http://www.lifestream.papertreedesign.com/

http://colinanawaty.com/

http://simon.dynamicmushroom.com/

http://life.colorlab.nl/

http://cockscomb.info/

http://www.lushanoperera.com/

http://www.bochenn.com.ar/

http://www.ogurosouhei.com/

http://www.pitofdarkness.com/

http://sati.sh/

http://inkh.net/

http://in.jurio.us/

http://roycifer.com/

http://mikesheetal.com/

http://robertpolmear.com/blog/

http://steveeller.com/sweetcron/

http://demo.sweetcronthemes.com/plainsimple/

http://www.unravel.ca/blog/

http://www.qultr.com

Not only is he the president, he’s also a client!

http://www.yongfook.com/

…and coming in at #26

…yours truly.

http://lifestream.carbongraffiti.com

So here are the top 25 websites that combine beautiful design with various web marketing services (not just web design).

As always, if you have a site and feel it should be included in the list, by all means add it in the comments section.

ADAPTD

Viget Engage

Studio7 Designs

Ten 24 Media

GoodBarry

toggle

South Creative

Actionhead Studios

Outloud Creative

Nixon Mcinnes

Tactica

Chama

EtonDigital

Guava

Flame Digital

3sixty

Citrus SEO

f-i

Pump

Surefire Media

Good Works Media

August

SEA Interactive

Collective ID

CarbonGraffiti - Yours Truly!

So the same can be said about negative momentum – where a community backlash can reach a tipping point and something starts to happen. I’m hoping that by intentionally publishing this article alongside a recent post by Elliot Jay Stocks, a new script by Chris Coyier, a dedicated upgrade campaign, and a new browser from Google (to name but a few), we’ll all be riding the crest of a large wave that sees Microsoft’s bastard child IE6 finally come crashing to a halt.

I hate IE6, as do many others like me. It famously lacks support for W3C standards, so websites rarely look ‘right’ when viewed. This matters because IE6 still has a significant share of the browser market (between 25-30%, depending who you ask) even though it was released a whopping 7 years ago. Fact: no other browser of that age exists.

But my mum doesn’t hate it, nor does my Dad, my wife, or many colleagues. They don’t care how a site is supposed to look, how it should work, or what hacks were used to make the site they see before them look at ‘pretty’. All they understandably care about is the site and its content. So the problem with IE6 lies primarily on the shoulders of the developers/designers/coders wasting precious hours making their sites pretty, only to be forced to hack and compromise them to ensure they look the same on IE6 as in all other browsers. Sure, this might sound trivial, but I assure you that there is nothing more frustrating than making a site look great in Firefox or Safari, only to see it look like the creation of a 10 year old in IE6. Essentially we create 2 versions of the same site – one for the ‘good’ browsers that fully support standards, and one for IE6, which simply doesn’t do what it should.

So what’s the Reverse Tipping Point angle?

IE6 has negatively affected so many web developers, designers and builders since ’01 that the time has come for this community to actually make a difference. With a market share as high as 30%, IE6 wouldn’t disappear overnight, but with what seems to be an increasing trend of ‘non-support’ for IE6, small-, mid- and large-sized web companies are getting bolder and phasing out all support for IE6… with or without Microsoft’s help.

Some methods are extreme. Chris Coyier’s new script tells an IE6 user that the site simply doesn’t support IE6, forcing the visitor to upgrade to view the site. Others are revolution-catalysts – see the IE Death March, and some are a bit more subtle – like savethedevelopers.org. But perhaps the most significant agent for creating this (reverse) tipping point is the fact that many of today’s top web designers (and companies that cater to web designers) are announcing that they’re ceasing all hacks, bug fixes and general support for IE6 – on both their own sites and for all new clients moving forward. It’s these guys – these mavens – that will ultimately change how many people are still using IE6 by this time next year. These guys basically lead the line on web design, so as word filters down that enough is enough, all others will start to follow suit.

To start the pendulum swinging, I’ve rounded up a few posts, sites and tools to get you started in saying goodbye to IE6. If you’re not even a web designer and have only a faint idea of what this is all about, 1) good job on reading this far, and 2) get stuck in anyways! You have nothing to lose, and rest assured you’ll be helping a great cause. Do you part to make the web a prettier place (the way it should be) and say no to IE6!

Tools & tips:

http://css-tricks.com/ie-6-blocker-script/
http://www.savethedevelopers.org/
http://24ways.org/2007/supersleight-transparent-png-in-ie6
http://nettuts.com/html-css-techniques/evening-tip-force-ie6-to-display-alpha-transparency/
http://www.my-debugbar.com/wiki/IETester/HomePage (PC only)
http://www.browsercam.com/
http://www.stopie6.org/

Stats:

http://www.w3schools.com/browsers/browsers_stats.asp
http://ma.tt/2008/07/ie6-independence/ (WordPress-specific)

Other posts/articles:

http://www.sitepoint.com/blogs/2008/08/25/is-it-time-to-ditch-ie6/
http://www.37signals.com/svn/posts/1072-apples-mobileme-drops-support-for-ie-6
http://www.kryogenix.org/days/wp-content/uploads/2008/08/facebook-ie6.png
http://www.viget.com/inspire/is-it-time-to-ditch-ie-6/

Taking a stand:

http://ryanfarley.com/blog/archive/2008/08/18/why-i-am-no-longer-supporting-ie6.aspx
http://www.insideria.com/2008/07/37signals-drops-ie6-support.html
http://noscope.com/journal/2008/08/ditching-ie6

IE Death Marchers:

http://iedeathmarch.org/category/marching
http://iedeathmarch.org/2008/08/carsonified/
http://iedeathmarch.org/2008/08/we-are-not-freelancers/
http://iedeathmarch.org/2008/08/wplover/
http://iedeathmarch.org/2008/08/facebook/
http://iedeathmarch.org/2008/08/daring-fireball/
http://iedeathmarch.org/2008/08/37-signals/

Follow/Join/Interact:

https://twitter.com/SaveDevelopers
http://www.petitionspot.com/petitions/IE6MustDie
http://www.new.facebook.com/group.php?gid=2463342409
http://www.stopie6.org/
http://www.stopie6.com/
http://friendfeed.com/e/c7b7d477-bfcf-47c2-aa6f-63d58c3eb645/The-STOP-IE6-campaign/

Just a side-note to say that Janine and Co. look to be doing really well – I used to compete with them when I worked at Campaigner and it seems they’ve fully embraced blogging culture, proven by their consistent 1st place prize for ‘best business/marketing blog’ in ClickZ’s yearly awards. If only I could say the same for my previous employer!…

11 Places You Need To Include Your Opt-In Form

Your Homepage – If you don’t have one on your home page, get one there now.

Your Sub-pages – All of them! If you don’t have the space to put an actual form on all of your sub-pages, at least have a “Newsletter Sign Up” link on them.

Your Blog – Not everyone subscribes to RSS to get information from your blog, so you’ll need to include an actual form for your readers to sign up, or a “Sign Up For Our Newsletter” link to it. You don’t want to lose the opportunity to get email addresses from people who might be interested in knowing about your regular updates. If you use TypePad, you can get the free VR Opt-in Form Widget with just a few clicks.

Your Purchase Confirmation Page – Someone has just hopefully had a great experience purchasing from you, why not ask them to join your list right then and there?

A Pop-up Window – Include a pop-up window when someone leaves your website. You won’t be able to use this with visitors who have their browsers set to block them, but you’ll surely get some people seeing them. We’ve had thousands of people signing up through this form.

A Landing Page – If you have a separate landing page you send people to from your search engine pay-per-click campaigns, include a newsletter sign up form on it. If they don’t purchase from you, they might at least sign up to your list, then you’ll be able to attempt to get them to purchase later on.

The Footer of all Outbound Email Correspondence - Any email you personally send or any email your employees or customer service people send one on one, should have the link to your opt-in form.

Your Email Marketing Campaigns – We have many customers that include an opt-in form image or link inside their actual email marketing campaigns. If the email is forwarded to someone who isn’t on your list you might get a new subscriber. You can also use Forward to a Friend links as well.

Offline

Your Counter – Don’t forget to put a sign up book at your counter or somewhere prominent in your place of business. Then enter those email addresses quickly and send them a welcome email.

Taking Appointments – If your service business is centered around making appointments with your clients, ask them for their email addresses so you can confirm the times. Also ask if they would want offers from you and make a note of their answer.

Your Tradeshow Table – You’ve spent a lot of money to be at a tradeshow. If someone doesn’t have a business card you don’t want to lose the opportunity to add them to your list. So make sure you have some kind of sign up form or book at your booth.

Why? Because having an all-HTML site starts to become a burden when you want to make quick updates, and especially when those updates are of the blog nature. This new site is built on the now famous WordPress.org platform, meaning I can make updates quickly and from any browser. I think I’m the definition of WordPress’ (very successful) adoption strategy – want to blog, start on WordPress.com, buy custom CSS (for $15), demand more freedom, consider WordPress.org, tinker with WordPress.org, pay for domain transfer ($10), use WordPress.org, love WordPress.org.

So, as for the site – new look, new feel. I love the aurora effect, too bad considering it’s just got some attention, but I assure all of you that this site design was purely a coincidence!

Hope you like it, if yes (or no), let me know!