Web Design

Parallax Web Design for Engagement, Storytelling and Online Branding

Leave a comment

We are all more aware than ever that web design styles are shifting  towards user experience as opposed user tasks and usability. Users demand to be engaged, entertained, educated and enticed into absorbing content online. Parallax web design, used in the right context, has the ability to deliver a really strong connection to an online brand experience, based on the interactivity of the website, the journey and the focus, realism and context given to the content or product.

Often, examples of Parallax web design focus on product examples, such as Google’s Nexus 7 page, but I hope to show in this post that there are opportunities for other types of organisations such as B2B businesses or charities to use Parallax design for deeper engagement. The examples show that Parallax design can offer a more interactive version of infographics, better suited to communicating your core brand messages.

As Robert Yardy explains in his review of 2013, it’s an approach we’re seeing more often:

Parallax web design is a technique of using CSS to make different layers on the web page move at different rates. When a user scrolls down a page they will be presented with content, such as photos, videos, text etc coming in from different angles and not just all moving down the screen together.

Advantages of Parallax sites

Bring your brand to life

Parallex websites have a certain advantage over traditional websites in that they can provide a richness to a brand or product, difficult to execute via more traditional web design and build techniques. Branding online is less now about an identity and tone of voice, it’s about engagement with content and the appeal and connection to the specific audience groups.  Thisrunning shoe site from Puma for example creates a rich experience that delivers depth, realism, 360 degree product views and more for its shoe. More than that though it delivers a brand experience to users that Puma are innovative, have great content to share and are giving users the empowerment to discover their branded product in an interesting way.



Parallax design example 1

Can Make Complex Information Engaging and Accessible

The web should make life simpler for people, not more complex. Parallax, done well can make complex information, through it’s presentation, engaging and informative in bite size chunks. This website for the Council for Economic Education in the USA aims to inform students and stakeholders of the reality, risks, dangers and options available to them. There is lots of data on this website, related around key themes, and if presented in a more standard way, would probably not engage the user or ensure they take in the relevant information.

Parallax design example 2

Tells a Story

Another great execution that Parallax scrolling offers, is the ideal setting to tell your story in an engaging and interactive way. Let your visitors take control and let them walk through your story at their own pace. The different layers that respond differently to the scrolling behaviour can create a sense of depth and even allow for multiple story lines. This clever example, Every Last Drop creates a highly relatable narrative, allowing room scenery to assemble and disassemble around the protagonist. Timed to perfection, the embedded facts are easy to read and digest, and are supported by the dynamic environment created by the multiple layers.  

Parallax design example 3

Disadvantages of Parallax

Slow Page Load Times

Patience is not a virtue that too many people have in today’s online space. High saturation of broadband and quick to load optimised websites offer for many, a quick on-demand web experience. The bulk of images, css and JavaScript loading on one page can take a longer than ideal time to load, especially for that important “un-cached” first visit.

It’s Simply Bad for SEO

Parallax website design simply, is not SEO-friendly. Due to the nature of parallax websites, all or in some cases most of your site content exists on one single page. This means that you can miss the opportunity to define important meta data and title tags within the site, which are one of the most important factors in determining page rankings in your favourite search engine.

Traditional websites of course offer the opportunity to target keywords by using meta tags on individual pages which communicate with search engines to establish your page ranking and thus increase the page specific relevance to the user’s tailored search terms.

Additionally, in a parallax environment, we tend of see a trend for multiple H1 headings on the page, which compete with each other for the search engine crawler’s attention because they are on the same page. This does not help clearly establish what your site or page is about and ultimately hurts your page ranking.

It’s Not Ideal for a Responsive Experience

Parallax scrolling websites are difficult to design responsively. Normally, separate mobile specific website that offer a completely different experience to the user are created for mobile, due to software, hardware , browser and connectivity issues hindering the similar parallax experience being deployed. This may not necessarily be a bad thing, for the more task centric  mobile – user, but for brand consistency it is often a bit of a let down for the client and the customer! Not to mention this if you are in the client services industry, your client may not be happy with the added expense and administration requirements of creating a second “mobile only” version of their website.

What’s best for your brand?

It’s such a difficult question and the correct answer really does depend on the context and what role or roles your website plays in the brand journey for your customer, importantly in the marketplace and amongst the competitors you face.

To expand, if you are a new brand in the marketplace, that does not offer e-commerce or a specific online – centric function. nor has any immediate plans to; for your brand, awareness and emotional connection to the brand and what you stand for, is of utmost importance. With this in mind the storytelling, impactful and illustrative nature of parallax might just be right for you. It can be a head turner, an attention grabber and a brand – awareness vehicle well worth the investment.

In contrast if you are a company that needs a website to deliver high volume search traffic, online sales, requiring an intuitive, quick, responsive and highly accessible web experience for your user, then perhaps Parallax isn’t for you.

There is though room for Parallax to be a “part” of your digital media mix at some point in the customer communication journey with your brand. For instance, if you do not wish to use the website style for your main customer or consumer website, you may still have a strong wish or rationale to deliver a campaign, event, or specific product mini – site in this format; it may just be right for that niche purpose.

The key thing to bear in mind when it comes to using this style of website design and user experience, is to weight up the pro’s and con’s and decide if it’s right for you, most importantly in relation to your own sector, marketplace and amongst the competition. Perhaps most importantly and to conclude, do not try to find a place for parallax, simply because you like it. Start with your own business goals, the impact you may or may not have to make online and the specific online goals of your users before considering the most appropriate web experience.

Please… NO MORE Lorem Ipsum.

2 Comments

Good old “Lorem – Ipsum”; the poly-filler or generic padding of web design. It’s a big part of what makes some web designers and web owners often skim over and ignore what a piece of design is trying to communicate, focussing instead on whether their logo is big enough, how lovely the button styles are, or how #amazeballs the parallax scrolling on the website is. As an advocate of the importance of appropriately and contextually used content, it says something different to to me. It says:

‘The content doesn’t matter very much. I’ll just use this space to represent some sample content. Those that see this right now or when it’s lively likely don’t care. I have no real idea how much content ,or in what format the company wishes to present this for their audiences.

A great design is only great if it delivers the content that matters in a clear and accessible way.  Designers need to consistently design their digital products centered on the content and facilitating the most interaction and engagement with that content. For me, content IS the heart of successful web and digital application design.

How can a digital designer get a feel for page design, user experience or interactivity without a sense of its purpose, the audience needs and what it is all attempting to communicate? Writing from my experience of working on web projects over the past  decade, I have seen many examples of the projects that end up getting the best results for my clients; they are the ones that are designed around the message, and not those that are designed first, before real content and focussed messaging becomes an afterthought; something to fill a gap, that might be ill – defined.

For many it is a different way of working, but through working at Mammoth and realising beforehand the importance of branding through content – it is now the first aspect of “design” we consider. It does demand that clients think harder about what users want from the website or service, and how their content can deliver it. It’s more effort, but that can only be a good thing.

So this is a plea for the end of Lorem Ipsum and why we all need to say no…

 Why using Lorem Ipsum will make your project fail.

  1. It shows a disrespect and lack of understanding of your audience and how they want to engage with your brand.
  2. Lorem Ipsum shows you are approaching the project the wrong way round. Always think content first.
  3. Designing the site around real content that answers genuine questions is what will get results for your site.
  4. It shows a lack of collaboration between designers and content creators – the best projects see copy, imagery, video and design working iteratively, hand in hand.
  5. It often shows you don’t have the central message clear from the start. If you don’t already have brand driver and the main story established then don’t design. You essentially have nothing clear and established to start with.
  6. Designing around the content helps refine the thinking about the best way to communicate it; not how “nice” the page looks. The project is stronger for it.
  7. The words on a page and the design of the page are inextricably linked. You can’t do either of them properly in isolation.
  8. Valuable content is everything to a successful strategy at any level; large or small – one dimensional or multi-dimensional. If you treat content as an afterthought, you will fail in a content rich, time short online user landscape.

Content is key, and before design starts it is important to create or streamline the content that needs to be communicated. The… what, why, how, for whom, by whom, when, where, how often, what next?” Once this thinking is done, streamlined, tested and is matched to the brand – content creation and online design can work iteratively and with cohesion. All for the good of the users and the business.

No more Lorem Ipsum.

The Importance of a “Digital Centric” Approach to Your Brand

Leave a comment

This post is a summary of a recent blog I wrote for Smart Insights on how a brand strategy must consider and ensure a “Digital Centric” approach to the brand creation and ongoing activities.

In 2013, more than any other year; website(s), search marketing, mobile content, social media, rich media, e-commerce, email marketing and their interaction, all have to be carefully considered in a brand building process.

Key Brand Factors

1. Customer

In a branding process it all starts with the customer; considering a number of factors from age to gender to disposable income, through to their estimated frequency of purchase.

The demographics will have a digital footprint, It is vital to determine what these customers will search for, what devices they will be using and when and which social networks, websites and apps they engage with, how often, and when.

Offline, a brand’s connection with customers will deliver an experience good or bad. For example in retail, a customer can call to get a location and opening hours, drive to the location, walk into a store or warehouse, access the checkout, purchase effectively and leave safely and securely.

Online branding should deliver the same experience that you wish to deliver for your customers; including accessibility. There is though a long way to go for this to be taken as the norm.

In a recent survey only 18% of brands surveyed admitted to being “seriously” committed to delivering the best possible online user experience (UX). More reading on this statistic via a recent Feb 2013 report is available via e-consultancy.

2. Identity

For some, this is their understanding of where branding starts and finishes. Of course, we know there is much more, but it is true that it is what instantly connects customers with brands. It can create interest, curiosity, affinity and connections.

A hugely important factor to consider when it comes to identity is naming. In Digital Marketing this impacts most on search.

Another key factor is how the brand stands out in a multi – platform crowded experience. Our bookmarks, web apps on our browser, image results for search and also our mobile app icons and more, should make everyone think about how the identity performs and connects with the audience.

Facebook is a great example of how it’s distinctive “Blue F” and like “thumbs up” icon works well alongside or in isolation to the Facebook logo making it perfect for a multi – platform approach.

fACEBOOK THUMBS UP Facebook logo Facebook

 3. Competitors

From searching online, to sampling apps, to experiencing website UX and subscribing to their emails, competitor analysis is more open and accessible than ever before.

More than ever before, insight can be gained to learn what they offer, how they communicate, what experiences they have and where they focus customer and product attention.

All brands have to be aware that they are being watched, Prices are being matched, tweets are being scanned, and websites are being trawled through so as brands can  begin to gain a competitive advantage.

4. Messaging

Key messages to support the product, service or customer value are essentially what add weight to an identity and enable consumers to “get it” in a few seconds.

Tesco’s key ‘brand driver’ is simple; “Every Little Helps”. This means different things to different people, but Tesco strive through digital, to make shopping easier, more helpful, and personalised and more rewarding through its content, features, rewards, mobile apps, personalised offers and multi – channel shopping experiences.

“Every Little Helps”, suits perfectly.tescoonline

Sky’s key message is “Believe in Better”. Sky do, over all the home entertainment and connectivity providers, have best in class solutions and the user experience it always seems is largely ahead than their competitors. Sky online products just feel right. I believe their products and user interface is “better” and I also have noticed  their belief in being better has led to them being first for key innovations such as their “Sky Go” app.

5. Location

When developing a brand project, location is a key factor. With online, location becomes important because the business is not in total control of its audience and their location.

A key element to online branding with regards to location is the fact that if a business is selling online across various countries then it MUST invest in a commitment to at least consider the impact of language, culture – centric online advertising and importantly also be able to deliver on shipping timelines which customers expect.

Location, as part of brand awareness and engagement has also become much more of a factor with the use of smartphones. Location based apps to help customers on the go find a business, buy using their mobile, share etc are adding value to the brand. A great example of a brand investing successfully in digital brand strategies per location is Starbucks.  Read More about Starbucks’ digitally aligned strategy here

6. Product

In branding processes, products are considered in terms of their key messaging and top level display in line with the brand image and positioning of the company. If a brand is positioned as having unique or ‘competitor busting’ attributes then what digital media allows is the opportunity to show this like never before with features such as:

  • Video content
  • Interactive personalisation
  • Sharing facilities
  • Augmented reality
  • Real time configuration

A great personalised online brand product experience comes courtesy of Nike. Nike ID  This fits Nike’s highly personalised and user -connected brand experience which offers personal and complementary products such as Nike + and Nike Fuel.

v

7. People

How people in an organisation understand and deliver the brand are central to making the brand work. Online, people still remain an important element to the brand on a number of levels. Customers may see, hear and read about key members of the team; customers may wish to check the history or find out more about a person they met to ‘suss them out’ further.

People are responsible for the online brand delivery because a digital brand communication strategy is nothing without content. Businesses must ask these people related questions:

  • Do I have the resource to communicate online?
  • Does my online content style match my messaging and tone of voice?
  • What channels do I use to enable efficient customer service?
  • I have a team of content writers online how do I ensure consistency?
  • Will my staff’s personal and business related online activity strengthen or harm my brand?

In Conclusion…

Branding and brands simply are not successful in 2013 without ensuring digital is central to how they are communicated, advertised, consumed and shared. By taking into account the key factors mentioned in this article and ensuring there is a strategy that considers the right digital mix in support of the brand position, businesses can strengthen their online position in the marketplace and thrive in the digital world.

View the full article on Online branding: a digital-centric approach to developing brands here.