November 2012

How a Blog Can Support Your Sales Goals

According to Wikipedia, there are over 156 million Blogs on the Internet providing information on just about every subject you can imagine.

If you consider that there are over 324 million Websites (based on a May 2011 survey by Netcraft), you can quickly see how valued Blog content is across the globe.

The term ‘Blog’ is commonplace in every conversation about marketing, so why are some businesses still cautious about implementing a Blog, and why is it now considered a mission critical part of the communications strategy?

Statistics

Here are a few useful stats I’ve collected to help explain the scale of Blogging and related Social Media activity. You can also launch these statistics as an Infographic:

  • B2B companies with blogs generate 67% more leads per month on average than non-blogging firms. (Source: Social Media B2B)
  • 77%  of buyers say they are more likely to buy from a company whose CEO uses Social media, and,
  • 82% of employees say they trust a company more when the CEO and leadership team communicate via Social Media (Source: eMarketer)
  • 92% of Blog users who posted multiple times a day acquired a customer through their Blog. This decreased to 63% for those who blogged monthly and 43% who blogged less than monthly (Source: Marketing Charts)
  • 60% of bloggers post weekly,10% of bloggers post daily (Source: Marketing Charts)
  • Blogs are the single most important inbound marketing tool according to 81% of blog business blog operators polled. 25% of blog operators rate their company blog as critical to their business, whilst 56% considered their blog either important or useful (Source: Marketing Charts)

 

The Changing Face of The Sales Process and Why a Blog Can Help

We’ve known for some time now, that the buying process has seen its biggest swing since businesses first started paying attention to how people buy products and services.

The case for talking at your customers with conventional sales messaging versus engaging them in conversation is nothing new, but the gravity of this argument is quickly becoming apparent.

The Harvard Business Review published the results of a very important study this year to show that a customer is likely to be 70% of the way through his or her buying decision ‘before’ they bring a company in to discuss their requirements.

Just think about that for a minute.

If you assume a prospect will bring in three companies for comparison, you only have a 1 in 3 chance of being the company that the prospect feels most comfortable dealing with.

If they bring in 5 companies then your odds drop to 20%.

This means that your Leads are now not quite as HOT as you might think they are.

This scenario came up recently when I was discussing marketing tactics with a client in Renewable Energy.

As soon as I brought this subject up, the Sales Manager jumped in:

“That’s so true. Things have changed this year completely. Before people expected me to promote products, nowadays they are telling me what products they want because they’ve read up all about them on the Internet. Selling is getting much harder.”

In essence, selling has changed dramatically in the last few years because technology has empowered us with the means to take control of the buying process.

We no longer need to buy on impulse, and in fact we have become highly resistant to any process or communication that attempts to do it.

 

Here’s How Selling Used To Work:

  1. A salesman wants to sell you a product
  2. The salesman establishes wants and needs so he can claim that buying the product will satisfy those wants and needs
  3. Something always gets in the way such as timing, budget, or is it a need or is it a nice to have
  4. Because of this, the process needs a strong close
  5. Closing of course is nothing more than coercion and manipulation

Whilst all this is going on, the customer has very little chance to establish the reputation of your company, build any trust or see credibility in anything you offer.

Here’s how things work now:

  1. You don’t need to take an approach from a salesman because it’s probably not what you want.
  2. You’ve got better things to do at the moment, and when you do want to buy something you now have the tools to do it on your own terms.
  3. You know you have the biggest research tool on the planet at your disposal and that’s the Internet. All you have to do is fire up a browser and type in a question or a product name and the world comes straight to your computer screen

In fact on Google alone, we do this across the globe 4,717,000,000 times on average every day.

But here’s the deal:

92% of these searches fall into the first two, of three known phases of search.

People are either looking for inspiration relating to a particular subject, or are looking for ways to define their own objectives more accurately.

Only 8% of key phrase driven searches are from people looking to buy a specific product, service or solution.

 

Changing the Focus of Your Marketing Activity

It’s clear from the changing trends and supporting statistics that we have a new set of goals if we are to excel at marketing:

  • Engage prospects when they start looking for inspiration
  • Foster an environment of trust, credibility and reputation
  • Keep the conversation going until the time is right for them to buy
  • Ensure that when a prospect calls you in, they are 70% of the way through the process of buying from ‘your company’ and not any of your competitors
  • Understand that the “close” begins as far back as the first time a prospect comes across any communications collateral relating to your company.

 

10 Reasons Why a Blog Can Support Your Sales Goals

  1. People don’t have to find your Website to find your Blog
  2. People will arrive at your Blog posts because someone they trust either referred them, or the content came up when they were refining their Internet search terms
  3. Your Blog posts won’t be selling anything, so the reader won’t have any barriers up when they arrive
  4. Your Blog posts will contain real answers, to real problems
  5. Your Blog posts will empower the reader with even more knowledge
  6. Readers can share your Blog posts with their colleagues to generate opinion
  7. Because you helped them achieve this you will appear credible
  8. Because you appear to be a useful centre of important knowledge and information, you have an instant reputation
  9. Because of your credibility and reputation, people will trust you
  10. Because people trust you, they will value your opinion when they get to a more advanced stage of the buying process

 

A Blog as Part of The Marketing Mix

If your Website is the centre of your promotional world, your Blog can be the centre of your engagement world.

Here are 12 things you can do with a Blog:

  1. Encourage people to make comments to engage them in conversation
  2. Capture their Email address for follow up marketing
  3. Give them an RSS feed so they receive updates and new posts automatically
  4. Feed your posts straight to Facebook
  5. Feed your post titles straight to Twitter
  6. Feed your posts straight to LinkedIn
  7. Create links to different parts of your main Website
  8. Turn your Authors into respected experts in their field
  9. Invite posts from leading authorities and industry experts
  10. Generate article Likes and referrals to help Google love you
  11. Add fresh content to your site on a daily basis to help Google love you even more
  12. Get content referred throughout your market in minutes, not weeks or months

 

Author: Philip Allen is the Studio Director at mwa Digital. He delivers Search Visibility & Engagement Strategies for companies who want to build immersive relationships with their audience.

 

More Reading:

mBlog v4.0 For Drupal Influenced By Google Blog Eye Tracking

Latest Research Tells Us Don’t Sell Solutions To Problems, Just Sell Products and Services

What Is Content Strategy and Why Does It Matter?

D.Blog 5.0 With Enhanced Authoring, Tag Management, Spam Comment Management, News Feed and Social Media Integration

Empower your audience with knowledge and engage them more effectively in conversation with latest Drupal Blog solution from D.

Like many of the systems I help develop at D., our de facto Blogging system is the result of user trends and detailed customer feedback.

Our latest release is v5.0, and we’ve made a number of enhancements to help you grow your audience.

Have a look at the following illustration and it’s accompanying key to get an overview of what’s included as standard.

Of course because it’s built on Drupal, D.Blog 5.0 can be enhanced even further with extended styling and functionality.

mwa Digital's Drupal Blog - mBlog 5.0 Part 1mwa Digital's Drupal Blog - mBlog 5.0 Part 2

 

Key:
 

1. Editable Banner

2. Search within the blog

3. Allow readers to subscribe via RSS

4. Link your readers to your other social media

5. Search blog by tags (alphabetically ordered)

6. H1 blog post title, themed in your site colour

7. Fully manageable parent/child blog categories themed in your site colour

8. Allow readers to share a post on their Facebook

9. Allow readers to share a post on their Twitter

10. Allow readers to share a post on their LinkedIn

11. Allow readers to share a post by email

12. Allow readers to share a post on their Google +

13. H2 blog post intro text

14. Illustrate your post with multiple images

15. H3 blog post subtitles, themed in your site colour

16. Add links, internally or externally, themed in your site colour

17. Tag your post with targeted keywords

18. Show your blogging authors to build authority

19. Let your customers comment on posts using the powerful DISQUS system (can be disabled)

20. Reply to other comments to create threads/conversations between customers

21. Auto-archiving of posts by month and year

22. Latest Tweets from your associated company Twitter account

23. Dynamic Google map and quick link to site's contact page

24. Enhanced layout with contrasting background / module boxes

25. Powerful DISQUS system integration, dramatically reduces spam commenting/moderation

26. Subscription for your audience which will allow for email updates with new posts

 

Author: Paul Barnes is a Senior Web Developer at D. and has an active role in Project Management. He has driven the transition of providing Responsive Web Design solutions using the Drupal platform, and has been a key contributor to a number of custom Drupal offerings such as mBlog, Companies and Contacts, and Xpress Checkout for Drupal Commerce.

 

More Reading:

Link to Why you need a Blog

What Is Responsive Web Design?

In a nutshell, Responsive Websites automatically ‘respond’ to the target device being used and reformat the content to work as the device intended. Non-responsive Websites simply scale down the content and it becomes unusable.
 

Responsive Design Devices (Smart Phones, Mini-Tablets, Tablets, Laptops, Desktops)
Fig 1: Just a small selection of the wildly varying, web devices from the, wide desktops to the mid-size tablets, mini-tablets down to the smaller smart phones.

 

Why Consider Responsive Web Design?

Traditionally, Websites are designed and built to single set sizes. Usually this is a size determined by the most popular desktop screen size.

Until recently, this has been a 1024px wide screen that produces a 960px canvas for a Website design (allowing for browser window edges and some quiet space).

The problem with designing a fixed-width Website is two-fold at the time of writing:

  1. According to Statcounter, 1366x768 overtook 1024x768 as the most popular screen resolution earlier this year.
  2. According to Gartner’s 10 Critical Tech Trends, mobile devices will pass PC’s to become the most popular Web access tool in 2013, and by 2015, tablet shipments will be 50% of laptop shipments.

What we now have is a plethora of devices with all sorts of different screen sizes.

Smart phones have been edging up in size and resolution, whilst tablets and mini-tablets have exploded onto the market to create a whole new genre of device that we didn’t even know we couldn’t do without.

We now find we are accessing, or at least trying to access our favourite sites from the very smallest of Smart Phones, right up to the very largest of high-quality desktop monitors.

So if you want to give your audience the best experience regardless of the device they are viewing your site on, what are the options and what will it cost?
 

The Case Against a Dedicated Website For Each Device

Ouch! UX guru Jakob Nielsen recently suggested that we should do this, or at least have three different Websites in different sizes.

Despite Nielsen’s credibility in the industry, his comments have been met with sheer astonishment. “Horror and bewilderment” are also terms I’ve seen banded around.

Do we really need to be building separate sites for each size of device?

Until recently, it could be argued that a dedicated Mobile site was the logical way of delivering content to smaller devices.

This approach was prohibitive to smaller organisations on financial grounds, but if you were B&Q for example, then you had the budget.

Aside from the financial implications and the prospect of having to double or triple your budget, two highly notable recent events have also put this into question:

  1. There has been an explosion in sub-sets of Smart Phones, Tablets and Laptops, which has given rise to a wide range of screen resolutions. Two sizes of Website are therefore no longer enough.
  2. Google’s much-coveted Panda algorithm update penalises duplicate content and if you have a desktop site and a mobile site on a different domain or a sub-domain, then you have duplicate content.

In practice, the only way you can make this work is to have at least three versions of a Website in the hope you can cover every screen resolution out there, and feed each version with its own content to avoid angering Google and messing up your hard earned search positions.

If you have deep pockets and an unlimited amount of time to manage this then so be it.

However, there is a more sensible approach and this is called Responsive Design.

 

The Case For Responsive Web Design

Here are 6 top reasons why you should consider Responsive for your next Web Design project:

  1. Unlike a static site, it’s not out-of-date before you even start.
  2. A Responsive Website can usually be built for 1.5 times the cost of an equivalent static site.
  3. Unlike building 3 x static sites to sort of cater for all the screen resolution options, a Responsive Website can be built to exactly cater for all the screen resolution options.
  4. Responsive Web Design is future proof – new style sheets can be added at a modest cost to cater for further changes in screen resolution trends.
  5. Having a Responsive Website shows your audience you care about their needs – this can really influence referrals and social sharing.
  6. Building Responsive Websites isn’t easy, so choosing vendors who can build complex sites in Responsive means you are working with people who really know their onions.

 

How Responsive Websites Are Built

We know we need to deliver the same essential information or, in other words, a single website - just via wildly varying device screen sizes.

To keep things organised from the very start, we need to begin with a grid.

A well-heeled designer will always design on a grid regardless but with so much to consider with responsive design, a grid will really help decision-making at the planning stage.

The most popular grids with respect to responsive design are 12 or 16 column grids.

What makes a good grid is how flexible it is and how well it divides up into ever-smaller column-groups to help us re-organise our site into the smaller device sizes we need.

A 12-column grid is particularly useful as it divides up into 2, 3, 4 & 6 column groups and hence provides a good spread of combinations to satisfy most popular design layouts.

Both the 12 & 16 column grids are based on a 960px width. This value is derived from the popular width of monitor size, which has in recent years been a common desktop monitor size but now is more readily found being used for modern laptops and larger tablets.

Below is an example of a 12 Column grid that mwa Digital use, showing the number of columns that smaller devices display.

Note that extra columns can be applied to extend the grid and cater for the very large desktop monitors that are now on the market. Yep, responsive design goes both ways.
 

Responsive Design - 12 Column, 960px Grid

Fig 2: The 960 Grid - 12 Columns

 

What Does The Grid Do?

A grid will allow us to define what the Website will look like on each device before we even go anywhere near the design process. 

I use a Rapid Prototype for this process. Rapid Prototypes have superseded static Wireframes because it’s lightening fast to build Web pages with various degrees of detail and create navigation that actually works.

I can also build a version of each page for any device so this really helps the client understand what they are getting and avoids any nasty surprises down the line.

To get a more holistic look at Responsive Design, have a look at this example of an E-commerce Website built by mwa using Drupal Commerce:
 

12 Column Grid Overlay - RTO Basket Page

Fig 3: An overlay of the 12-column grid over the RTO basket page. Note how the page is split left and right according to 8 + 4 columns. Note also how the internal elements of the left hand content are split again in 4+4. This method of design helps when we get to smaller devices so we can more easily re-organise the content into single-stacked columns – particularly for the smart phones.

 

RTO Basket Page

Fig 4: The RTO Basket page with grid hidden. The grid also helps bring discipline to the layout so we can reduce the cognitive load for first-time viewers.

 

Responsive Design - Comparison of Device Layouts/Widths

Fig 5: The RTO Basket page designed for each of the device widths from the wide desktop 1200px wide, down to the much narrower smart phone in portrait layout. See how with the smart phones layouts, we hide some of the secondary information, such as the right-hand promotional zones seen on the larger devices. These don’t have to be hidden but help create faster, shallower pages on phones to help keep the primary target a focus.

 

The View On Large Desktops (1200px)

Starting with the largest screen, this is an optional size, which not all Responsive Web Design caters for. This takes the 960, 12-Column grid and scales up, adding more columns to create a more generous layout for the increasing number of large desktop screens.

In fact, looking at W3Schools.com statistics on monitor trends, as of Jan 2012, 85% of Internet users have a higher screen resolution than 1024 x 768 (12 Column) size.

This isn’t to say a site designed at 1024 X 768 wont work on larger or higher res monitors – far from it. It will work just fine. However, the principles of Responsive Design work both ways. As well as scaling down for smaller devices, we can scale up for the larger ones.

See how the RTO product group page makes use of the extra space on a large monitor using 4 columns of product in it’s grid as apposed to the regular 3 columns for smaller desktops and laptops.
 

Responsive Design - Wide Desktop Layout

Fig 6: Responsive can also scale up on the 12 Column grid. Many monitors are becoming very large now. Take Apple’s 27” display for example. An extra responsive consideration can be employed for users who have a bit more screen real estate but this is an optional one. I could use a 15 Column grid at 1200px wide in this case.

 

The View On Desktops, Laptops & Tablets in Landscape (960px)

If we consider most websites to be 12 columns already, the task of designing for Laptops, Desktops and Tablets in Landscape is a relatively known quantity already.

This one is relatively ‘simple’ from a Responsive Design perspective and we can forge straight on to the next.
 

Responsive Design - Tablets, Laptops & Desktops in Landscape

Fig 7: Catering for the older devices but also the ever-improver smaller devices. Whilst older devices like small monitors, laptops and older tablets use the 960px (1024px wide resolution screens) layout, now the smaller devices like mini-tablets (iPad Mini) are using this resolution of screen so the 960px layout is still going strong.

 

The View On Tablets in Portrait (720px)

The next device down is Tablets in portrait. As you can see in Fig 2, above, we are now down to just 9 columns so we need to consider how the layout of our 12-column site will now fit into this more restricted space.

If you have used a tablet before, you may think your site is sitting pretty without all this responsive nonsense but take a hard long look at it.

  • Can you really browse the site as quickly and easily as the desktop site?
  • Can you do so without using inbuilt pinch and zoom gestures?
  • Can you click text links, buttons and navigation successfully, every time?

More importantly, even if you can navigate to where you are going, can you comfortably read the information without more zooming and even if you can, are you certain other users are quite so trouble-free?

Be very honest, as your audience will simply vote with their screen-tapping fingers.

If your site has not been responsively designed for tablets, it is likely that your site is getting scaled down by as much as 25%. This means everything gets scaled together including interface, text, links and images.

This can often push the usability of the site beyond the limits of comfort and could well increase the bounce rate of your site for tablet users.

When Responsive Design is employed for tablets, a typical page’s content column is reduced to a tablet-specific width.

Since the content layout we build on sites at mwa Digital is ‘fluid’, the titles, text and images can reorganise themselves automatically and hence nothing is forcibly scaled down.

All text remains at the exact size it was designed at and the device does not need to override this. 

The result is that with a narrower page and unchanged text size, the content is pushed down and creates a slightly deeper page, which is not a problem.
 

Responsive Design - Tablets, iPads, iPad Mini, Palm Tops

Fig 8: We cater for Tablets, mini-tablets and in all colours too!

The View On a Smart Phone in Landscape (480px)

A lot of smart phones now have a velocity meter built in as standard. This means they can be viewed in landscape and portrait mode – which ever the user wishes to use.

This means your Website also has to cater for both preferences and a smart phone in landscape grid is now down to just 6 columns.
 

Smart Phones - Landscape

Fig 9: The smart phone in landscape provides better width but sometimes the lack of height can be an unintuitive way to browse. It entirely depends on the content and is very much up to user preference.

Once we get down to the smart phone sizes, we start to interrogate the layouts in a more rational way.

Any secondary information, like promotional zones are removed or re-organised to the bottom of the page.

Many of the image elements also need attention at this stage as this aspect of screen is quite different from the tablets or desktops and conventional elements, such as those on the header need to exist in a more extreme space.

In Fig 9, you can even see that secondary elements of the main navigation are removed and reserved down in the footer. The target with mobile is to channel the user to the most immediate of goals.

In this example, it is to access the products’ departments, guiding them onto product groups and then basket and checkout.

Any secondary info like About Us, Contact, Testimonials etc., can still be accessed but just in alternative ways. A prominent ‘Search’ field is offered as a point to retrieve any information in compensation for the rationed navigation.

 

The View On a Smart Phone in Portrait (320px)

This is the smallest width device layout at just 320 pixels or 4 columns wide. Splitting this layout into any more columns can prove too complicated on the eye whilst also delivery images at too smaller size so wherever possible, all elements of the site are stacked into one simple column.

This does make for longer pages and more scrolling and where this would feel inappropriate on a desktop, it seems more expected on a mobile device.

You now have a full E-commerce experience on mobile in portrait so that all the usual pages that a user would see on desktop are also delivered in mobile.

This is important, as it helps the user navigate in a more ‘expected’ way.

The mobile layouts deliver homepage, content pages, product department pages, product group pages, product detail pages, basket, checkout and unique customer zone pages, truly allowing for a mobile shopping experience.
 

Responsive Design - Smart Phones in Portrait

Fig 10: Above, RTO’s home page (left) and a section of the checkout page (right). The smart phone in portrait is the most restricted view for width but is also the most natural way to browse given that it can be held and operated with one hand. Additional styling is afforded to this layout making text links more like solid larger buttons, more ergonomically suited to the thumbs and finger taps.

One consideration is quick loading pages for mobile. Often, users are connecting on w-fi or 3G services rather than a cabled Ethernet connection and so this is just one more thing to think about.

Removing any secondary information like promo boxes, adverts and background images can help keep the browsing experience on mobile speedy and targeted.

 

The Pros and Cons Of Responsive Web Design

Pros

Presence: The single most prominent reason for using Responsive Design is simply to be where your audience is. The Web’s users are evolving and you need to adapt just to break even.

Efficiency: Responsive eliminates the need for multiple websites with multiple points of administration. One Website, one CMS, one admin, one set of data, multiple layouts.

Opportunity: Many design agencies are still assessing and developing their own solutions for responsive. We predict that within just a year or two, nearly every website will be responsively designed and if your site isn’t, it will suffer and drop off the radar.

Steal a march on your competition and look into responsive design for your site as soon as you can.

Future Proof: Once your responsive solution is in place, new layouts can be added relatively cheaply so you can certainly cover any new, popular device sizes that emerge in the coming years.

Cons

Cost & Time: Considering building a new Website responsively when the cost is around 1.5 times the cost of building a static version is a bit of a no-brainer.

However, overhauling existing sites is not an attractive job – particularly where content management systems and E-commerce are in place.

Whilst the Responsive Design itself is not so much an issue, changing an older framework from non-responsive to responsive very much is and is a bit like unpicking a lot of knots in a ball of wool or applying foundations to a house that’s already standing.

Some CMS systems like Word Press for example would be a no-go if you had a custom theme in place.

If you are considering making an existing site responsive, take the opportunity to consider any other large changes into account at the same time as you may be looking at a lengthy development turnaround and incorporating other changes may be cost effective in the long run.

Related Links:
 

Responsive Web Design
http://en.wikipedia.org/wiki/Responsive_Web_Design

A Book Apart
http://www.abookapart.com/products/responsive-web-design

Ethan Marcotte
http://ethanmarcotte.com/

BBC TV Channel Homepages: Responsive Design
http://www.bbc.co.uk/blogs/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

BBC Website Article showing their use of Grid
http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html

Golden Grid System
http://goldengridsystem.com/

Screen Size Stats
http://gs.statcounter.com/#resolution-ww-monthly-200903-201203

Designers respond to Nielsen on mobile
http://www.netmagazine.com/news/designers-respond-nielsen-mobile-121892

Live Examples of Responsive Web Design:

Resize the browser down to a very small size to see how the content re-organises itself.

http://www.channel4.com/news/

http://www.barackobama.com/

http://www.clch.nhs.uk/

http://foodsense.is/

http://magazine.foxnews.com/

http://ucsd.edu/

http://www.maxim.com

http://clearairchallenge.com/

 

We’d love to know how you are dealing with reaching your audience on various devices. Are you thinking about it, researching it, busy developing a solution or not addressing it at all?

Feel free to comment.

 

Innovative HTML5 for One Page Websites

Why scroll down a web page when you can rotate, slide, fade and animate you way through the info?
 

HTML5 has brought a raft of innovative controls to help designers and developers manipulate objects on a web page. Now that modern browsers are finally getting a better grip on the fundamentals of web pages, it’s letting us creative types run free in designing a richer user experience.

One page websites are still exploring the limits of the effects they can use and often the user will be left to explore in a playful manner. Often the effects come as a surprise easing the user into a unique way of browsing a particular site so you’re never quite sure if you’ll end up navigating sideways down-ways, up-ways or slant-ways.

Sometimes the effects can be a little overpowering – almost to the point that the subject content becomes secondary but time will tell how well the better effects fair. It’s safe to say, the lions share of creativity in HTML5 is so far reserved for the promotional and information genre of website but we look forward to seeing these promising effects making the leap to powering eCommerce in a fresh new way.
 

La Moulade (Commercial)

HTML5 Effects, One Page Websites - La Moulade

http://lamoulade.com

 

Cadillac ATS Vs The World (Promotional)

HTML5 Effects, One Page Websites - Cadillac ATS Vs The World

http://ats-vs-world.cadillac.com

 

Auxiliary Design (Agency)

HTML5 Effects, One Page Websites - Auxiliary

http://www.yourauxiliary.com

 

Lead Motion (Commercial)

HTML5 Effects, One Page Websites - Lead Motion

http://www.leadmotion.mobi

 

Ballantyne (Promotional)

HTML5 Effects, One Page Websites - Ballantyne

http://www.ballantyne.it

 

How does it work?

A new framework of controls became available with the introduction of HTML5 – and modern browsers are now natively compatible with these changes. Whilst older browsers can be made to comply, to a degree, with javascript workarounds, the modern browsers, which are also designed with mobile devices in mind, really let it sing.

Designers and developers can now control elements of a web page in a much more dynamic way so that specific objects can be animated, faded, rotated, scaled, moved, zoomed and so on.

These sort of effects were previously only typically achieved with the likes of the Flash plug-in but now a lot of this capability is hard-baked into the modern HTML language. Great news for all those mobile devices that restrict the use of Flash.

Pros

Creative:  Innovative and inspiring new ways to catch user’s attention in an ever competitive and expanding Internet

Commerce:  Strong potential across the board in the way we navigate generally and even to enhance how we shop online with more intuitive shopping controls/filters as well as more slick basket & checkout processes.

Education: Fast, engaging and interactive walk-throughs for otherwise lengthy and dull information.

Standardisation: A new set of tools to help allow all developers to ensure the fancier elements of an online experience become standard – and not the exception.

Cons

Graceful Degradation:  Yep, the usual. Waiting for everybody to catch up and get themselves a browser update! Until then, developers will be tearing their hair out for workarounds and fixes for those older browsers.

Too much bling?:  Some sites, heavy in effects and creativity, can sometimes outwit their own audience by designing something that is so unexpected, that it is missed completely. Hidden navigation has always been a gamble for a designer but with so much going on in some one page websites, there’s a good chance some elements of your audience will become disorientated and even distracted by the effects themselves. Hmm, lets not blame the tools though.

 

More examples:

http://www.we-new.com

http://bobadilium.com

http://www.kiinnostus.fi/autokuume

http://timotheecottier.fr

http://glassware.krugpark.com

http://onepagelove.com

Free Updates

Stay informed on our latest news!

Subscribe to Free Updates feed

Tags

Archive

Latest tweets