Tag Archives: story

Thumbnail

Landing The Concept: Movie High-Concept Theory And UX Design




Landing The Concept: Movie High-Concept Theory And UX Design

Andy Duke



Steven Spielberg once famously said, “If a person can tell me the idea in 25 words or less, it’s going to make a pretty good movie.” He was referring to the notion that the best mass-appeal ‘blockbuster’ movies are able to succinctly state their concept or premise in a single short sentence, such as Jaws (“It’s about a shark terrorizing a small town”) and Toy Story (“It’s about some toys that come to life when nobody’s looking”).

What if the same were true for websites? Do sites that explain their ‘concept’ in a simple way have a better shot at mass-appeal with users? If we look at the super simple layout of Google’s homepage, for example, it gives users a single clear message about its concept equally as well as the Jaws movie poster:


Google homepage


Google homepage: “It’s about letting you search for stuff.” (Large preview)

Being aware of the importance of ‘high-concept’ allows us — as designers — to really focus on user’s initial impressions. Taking the time to actually define what you want your simple ‘high-concept’ to be before you even begin designing can really help steer you towards the right user experience.

What Does High-Concept Theory Mean For UX Design?

So let’s take this seriously and look at it from a UX Design standpoint. It stands to reason that if you can explain the ‘concept’ or purpose of your site in a simple way you are lowering the cognitive load on new users when they try and understand it and in doing so, you’re drastically increasing your chances of them engaging.

The parallels between ‘High-Concept’ theory and UX Design best practice are clear. Blockbuster audiences prefer simple easy to relate concepts presented in an uncomplicated way. Web users often prefer simpler, easy to digest, UI (User Interface) design, clean layouts, and no clutter.

Regardless of what your message is, presenting it in a simple way is critical to the success of your site’s user experience. But, what about the message itself? Understanding if your message is ‘high-concept’ enough might also be critical to the site’s success.

What Is The Concept Of ‘High-Concept’ In The Online World?

What do we mean when we say ‘high-concept’? For movies it’s simple — it’s what the film is about, the basic storyline that can be easy to put into a single sentence, e.g. Jurassic Park is “about a theme park where dinosaurs are brought back to life.”

When we look at ‘high-concept’ on a website, however, it can really apply to anything: a mission statement, a service offering, or even a new product line. It’s simply the primary message you want to share through your site. If we apply the theory of ‘high-concept’, it tells us that we need to ensure that we convey that message in a simple and succinct style.

What Happens If You Get It Right?

Why is ‘high-concept’ so important? What are the benefits of presenting a ‘high-concept’ UX Design? One of the mistakes we often fall foul of in UX Design is focussing in on the specifics of user tasks and forgetting about the critical importance of initial opinions. In other words, we focus on how users will interact with a site once they’ve chosen to engage with it and miss the decision-making process that comes before everything. Considering ‘high-concept’ allows us to focus on this initial stage.

The basic premise to consider is that we engage better with things we understand and things we feel comfortable with. Ensuring your site presents its message in a simple ‘high-concept’ way will aid initial user engagement. That initial engagement is the critical precursor to all the good stuff that follows: sales, interaction, and a better conversion rate.

How Much Concept Is Too Much Concept?

The real trick is figuring out how much complexity your users can comfortably handle when it comes to positioning your message. You need to focus initially on presenting only high-level information rather than bombarding users with everything upfront. Give users only the level of understanding they need to engage initially with your site and drive them deeper into the journey disclosing more detail as you go.

Netflix does a great job at this. The initial view new users are presented with on the homepage screen is upfront with its super high-concept — ‘we do video content’ once users have engaged with this premise they are taken further into the proposition — more information is disclosed, prices, process, and so on.


Netflix


Netflix: “It lets you watch shows and movies anywhere.” (Large preview)

When To Land Your High-Concept?

As you decide how to layout the site, another critical factor to consider is when you choose to introduce your initial ‘high-concept’ to your users. It’s key to remember how rare it is that users follow a nice simple linear journey through your site starting at the homepage. The reality is that organic user journeys sometimes start with search results. As a result, the actual interaction with your site begins on the page that’s most relevant to the user’s query. With this in mind, it’s critical to consider how the premise of your site appears to users on key entry pages for your site wherever they appear in the overall hierarchy.

Another key point to consider when introducing the message of your site is that in many scenarios users will be judging whether to engage with you way before they even reach your site. If the first time you present your concept to users is via a Facebook ad or an email campaign, then implementation is drastically different. However, the theory should be the same, i.e. to ensure you present your message in that single sentence ‘high-concept’ style way with potential users.

How To Communicate Your High-Concept

Thus far, we’ve talked about how aiming for ‘high-concept’ messages can increase engagement — but how do we do this? Firstly, let’s focus on the obvious methods such as the wording you use (or don’t use).

Before you even begin designing, sit down and focus in on what you want the premise of your site to be. From there, draw out your straplines or headings to reflect that premise. Make sure you rely on content hierarchy though, use your headings to land the concept, and don’t bury messages that are critical to understanding deep in your body copy.

Here’s a nice example from Spotify. They achieve a ‘high-concept’ way of positioning their service through a simple, uncluttered combination of imagery and wording:


Spotify


Spotify: “It lets you listen to loads of music.” (Large preview)

Single Sentence Wording

It’s key to be as succinct as possible: the shorter your message is, the more readable it becomes. The true balancing act comes in deciding where to draw the line between too little to give enough understanding and too much to make it easily readable.

If we take the example of Google Drive — it’s a relatively complex service, but it’s presented in a very basic high-concept way — initially a single sentence that suggests security and simplicity:


Google Drive

Then the next level of site lands just a little more of the concept of the service but still keeping in a simple single sentence under 25 words (Spielberg would be pleased):


Google Drive


Google Drive: “A place where you can safely store your files online.” (Large preview)

Explainer Videos

It doesn’t just stop with your wording as there is a myriad of other elements on the page that you can leverage to land your concept. The explainer video is used to great effect by Amazon to introduce users to the concept of Amazon Go. In reality, it’s a highly complex technical trial of machine learning, computer visual recognition, and AI (artificial intelligence) to reimagine the shopping experience. As it’s simply framed on the site, it can be explained in a ‘high-concept’ way.

Amazon gives users a single sentence and also, crucially, makes the whole header section a simple explainer video about the service.




Amazon Go: “A real life shop with no checkouts.” (Large preview)

Imagery

The imagery you use can be used to quickly and simply convey powerful messages about your concept without the need to complicate your UI with other elements. Save the Children use imagery to great effect to quickly show the users the critical importance of their work arguably better than they ever could with wording.




Save the children… “They’re a charity that helps children.” (Large preview)

Font And Color

It’s key to consider every element of your site as a potential mechanism for helping you communicate your purpose to your users, through the font or the color choices. For example, rather than having to explicitly tell users that your site is aimed at academics or children you can craft your UI to help show that.

Users have existing mental models that you can appeal to. For example, bright colors and childlike fonts suggest the site is aimed at children, serif fonts and limited color use often suggest a much more serious or academic subject matter. Therefore, when it comes to landing the concept of your site, consider these as important allies to communicate with your users without having to complicate your message.




Legoland: “A big Lego theme park for kids.” (Large preview)

Design Affordance

So far, we’ve focused primarily on using messaging to communicate the concept to users. Still, what if the primary goal of your page is just to get users to interact with a specific element? For example, if you offer some kind of tool? If that’s the case, then showing the interface of this tool itself is often the best way to communicate its purpose to users.

This ties in with the concept of ‘Design Affordance’ — the idea that the form of a design should communicate its purpose. It stands to reason that sometimes the best way to tell users about your simple tool with an easy to use interface — is to show them that interface.

If we look at Airbnb, a large part of the Airbnb concept is the online tool that allows the searching and viewing of results; they use this to great effect on this landing page design by showing the data entry view for that search. Showing users how easy it is to search while also presenting them the with simple messaging about the Airbnb concept.


Airbnb


Airbnb: “It let’s you rent people’s homes for trips.” (Large preview)

How To Test You’ve Landed It

Now that you’ve designed your site and you’re happy that it pitches its concept almost as well as an 80s blockbuster — but how can you validate that? It would be lovely to check things over with a few rounds of in-depth lab-based user research, but in reality, you’ll seldom have the opportunity, and you’ll find yourself relying on more ‘guerilla’ methods.

One of the simplest and most effective methodologies to check how ‘high-concept’ your site is is the ‘5 second’ or ‘glance’ test. The simple test involves showing someone the site for 5 seconds and then hiding it from view. Then, users can then be asked questions about what they can recall about the site. The idea being that in 5 seconds they only have the opportunity to view what is immediately obvious.

Here are some examples of questions to ask to get a sense of how well the concept of your site comes across:

  • Can you remember the name of the site you just saw?
  • What do you think is the purpose of the page you just saw?
  • Was it obvious what the site you just saw offers?
  • Do you think you would use the site you just saw?

Using this test with a decent number of people who match your target users should give some really valuable insight into how well your design conveys the purpose of your site and if indeed you’ve managed to achieve ‘high-concept’.

Putting It All Into Practice

Let’s try implementing all this knowledge in the real world? In terms of taking this and turning it into a practical approach, I try and follow these simple steps for every project:

  1. Aim For High-Concept
    When you’re establishing the purpose of any new site (or page or ad) try and boil it down to a single, simple, overarching ‘High-Concept.’
  2. Write It Down
    Document what you want that key concept to be in 25 words or less.
  3. Refer Back
    Constantly refer back to that concept throughout the design process. From picking your fonts and colors to crafting your headline content — ensure that it all supports that High-Concept you wrote down.
  4. Test It
    Once complete use the 5-second test on your design with a number of users and compare their initial thoughts to your initial High-Concept. If they correlate, then great, if not head back to step 3 and try again.

In this article, we have discussed the simple rule of making blockbuster movies, and we have applied that wisdom to web design. No ‘shock plot twist’ — just some common sense. The first time someone comes into contact with your website, it’s vital to think about what you want the initial message to be. If you want mass market appeal, then craft it into a ‘high-concept’ message that Spielberg himself would be proud of!

Smashing Editorial
(ah, ra, yk, il)


Visit site:

Landing The Concept: Movie High-Concept Theory And UX Design

Art Directing For The Web With CSS Grid Template Areas




Art Directing For The Web With CSS Grid Template Areas

Andrew Clarke



(This article is kindly sponsored by CoffeeCup Software.) Alright, I’m going to get straight to the point. CSS Grid is important, really important, too important to be one of those “I’ll use it when all browsers support it” properties. That’s because, with CSS Grid, we can now be as creative with layout on the web as we can in print, without compromising accessibility, responsiveness, or usability.

If you’re at all serious about web design or development, you need to be serious about learning and using CSS Grid too. In this article I’m going to explain how to use one aspect, grid-template areas, a way of arranging elements that even a big, dumb mug like me can understand, and one that doesn’t get enough attention.

Now, you want to see some action and some code, I know that, but hold on one Goddam minute. Before you learn “how,” I want to teach you “why” it’s important to make the kind of layouts we’ve seen in other media for decades, but have mostly been absent from the web.

Feeling Frustrated

I guess you’ve seen those “which one of these two layouts are you designing today?” tweets, lamenting the current state of design on the web. Even I’ve spoken about how web design’s lost its “soul.” I bet you’ve also seen people use CSS Grid to recreate posters or pages from magazines. These technical demonstrations are cool, and they show how easy implementing complex layouts with CSS Grid can be when compared to other methods, but they don’t get to the bottom of why doing this stuff matters.

So what’s the reason? Why’s layout such an important part of design? Well, it all boils down to one thing, and that’s communication.

For what seems like forever, web designers have created templates, then filled them, with little consideration of the relationship between content and layout. I suppose that’s inevitable, given considerations for content management systems, our need to make designs responsive, and the limitations of the CSS properties we’ve used until now. Sure, we’ve made designs that are flexible, usable, but we’ve been missing a key piece of the puzzle, the role that layout plays in delivering a message.

If you’ve been around the block a few times, you’ll know the role color plays in setting the right tone for a design. I don’t need to tell you that type plays its part too. Pick the wrong typeface, and you run the risk of communicating ineffectively and leaving people feeling differently to how you intended.

Layout — closely linked to aspects of typography like the ’measure’ — plays an equally important role. Symmetry and asymmetry, harmony and tension. These principles draw people to your content, guide them, and help them understand it more easily. That’s why crafting the right layout is as important as choosing the most appropriate typeface. Print designers have known this for years.

Telling Stories Through Art Direction

Art direction matters as much on the web as it does in other media, including print, and what I’m going to cover applies as much to promoting digital products as it does to telling stories.

What do you think of when you hear the term ’art direction?’ Do you think about responsive images, presenting alternative crops, sizes or orientations to several screen sizes using the <picture> element or ’sizes’ in HTML? They’ve become useful responsive design and art direction tools, but there’s more to web design than tools.

Do you think of those designers like Jason Santa Maria and Trent Walton who sometimes art direct their writing by giving an entry its own, distinctive image, layout and typography. This gets us closer to understanding art direction, but images, layout, and typography are only the result of art direction, not the meaning of it.

So if art direction isn’t exactly those things, what exactly is it? In a sentence, it’s the art of distilling an essential, precise meaning or purpose from a piece of content — be that magazine article or a list of reasons why to use the coolest app from the hottest start-up — and conveying that meaning or purpose better by using design. We don’t hear much about art direction on the web, but it’s well established in another medium, perhaps the most memorable being magazines and to some extent newspapers.

I’m not old enough to remember first hand Alexey Brodovitch’s work on Harpers Bazaar magazine from 1934 to 1958.


designs by Brodovitch


Fig.1. What I love about these designs — particularly his pencil sketches — is how Brodovitch placed his content to perfectly reflect the image that accompanies it.

I do remember Neville Brody’s artistic art direction for the Face magazine and I’m still inspired by it every day.


Brody’s pages from The Face magazine


Fig.2. Even twenty five years after he created them, Brody’s pages from The Face magazine are still remarkable designs.

Art direction is so rarely discussed in relation to the web that you could be forgiven for thinking that it’s not relevant. Perhaps you see art direction as an activity that’s more suited to the print world than it is to the web? Some people might think of art direction as elitist in some way.

I don’t think that any of that’s true. Stories are stories, no matter where they’re told or through what medium. They may be thought-provoking like the ones published on ProPublica, or they might be the story of your company and why people should do business with you. There’s the story of how your charity supports a good cause and why people should donate to it. Then there’s the story of your start-up’s new app and why someone should download it. With all of these stories, there’s a deeper message beyond just telling the facts about what you do or sell.

Art direction is about understanding those messages and deciding how best to communicate them through the organization and presentation of words and visuals. Is art direction relevant for the web? Of course. Art directors use design to help people better understand the significance of a piece of content, and that’s as important on the web as it is in print. In fact, the basic principles of art direction haven’t changed between print and digital.

I’d go further, by saying that art direction is essential to creating cohesive experiences across multiple channels, so that the meaning of a story isn’t lost in the gaps between devices and screen sizes.

David Hillman, formerly of The Guardian and New Statesman and designer of many other publications said:

“In its best form, (art direction) involves the art director having a full and in-depth understanding of what the magazine says, and through design, influencing how it is said.”

My friend Mark Porter, coincidentally the former Creative Director at The Guardian also said:

“Design is being in charge of the distribution of elements in space.”

CSS Grid makes being in charge of the distribution of elements more possible than ever before.

Art Directing A Hardboiled Story

I guess now is the time to get down to it, so I’m going to tell you how to put some of this to work in a series of Hardboiled examples. I’ll shine a flashlight on layout and how it helps storytelling and then give you the low down on how to develop one of these designs using CSS Grid.


several ’shots’ of a story in a Hardboiled book


Fig.3. When I conceived the covers for my Hardboiled books, I wanted the story to continue across several ’shots.’ (Left: Cover illustrations by Kevin Cornell. Right: Cover illustrations by Natalie Smith.) (Copyright: Stuff & Nonsense)

First, the backstory. On the cover of my 2010 edition of Hardboiled Web Design (1), a mystery woman in a red dress (there’s always a woman in a red dress) is pointing a gun at our private dick. (Sheesh, I know that feeling.) By the Fifth Anniversary Edition in 2015 (2), the story’s moved on and a shadow moves ominously across the door of our detective’s office. The door flies open, two villains burst in (3), and a fist fight ensues (4). Our mystery woman sure knows how to throw a punch and before you can say “kiss me, deadly” one villain’s tied to a chair and ready to spill the beans (5).

Chapter Three

I’ll start telling that story at the explosive moment when those two villains bust open the door. Now, if you’ve read Scott McCloud’s book ‘Understanding Comics’ you’ll know that panel size affects how long people spend looking at an area, so I want to make the image of our bad guys as large as possible to maximise its impact (1). What the hoods don’t know is that our woman is waiting for them. I use layout to add tension by connecting their eye lines, (2) at the same time drawing a reader’s eyes to where the content starts.


Adding tension by connecting eye lines and maximise impact through large images.


Fig.4. Add tension by connecting eye lines and maximise impact through large images. (View project files on CodePen) (Copyright: Stuff & Nonsense)

Chapter Four

As the first villain bursts onto the scene, I use the left edge of the page, without margins, to represent the open door (1). As most of the action takes place on the right, I create a large spacial zone using the majority of the height and width of the page (2).

Now, when fists fly in all directions, our layout needs to do the same, so my content comes from the top — where whitespace draws the eye down to the bold paragraph (3) — and from the left with the enormous headline (4). You might be wondering why I haven’t mentioned that smaller image in the top-right, but I’ll get to that in a minute.


When fists fly, a layout needs to do the same.


Fig.5. When fists fly, a layout needs to do the same. (View project files on CodePen) (Copyright: Stuff & Nonsense)

Chapter Five

The fight’s over, and our detective is back in control, so on this final page I use a more structured layout to reflect the order that’s returned. Solid columns of justified text (1) with plenty of whitespace around them add to the feeling of calm. At the same time, the right aligned caption (2) feels edgy and uncomfortable, like the gunpoint interrogation that’s taking place.


using layout to create order as well as disorder


Fig.6. We can use layout to create order as well as disorder. (View project files on CodePen) (Copyright: Stuff & Nonsense)

Getting My Dands Dirty

It’s time for a confession. I’m not going to teach you everything you need to know about developing layouts using CSS Grid as there are plenty of smarter people who’ve done that before:

Instead, I’ll show you the inspiration for one grid, how I translated it into a (large screen) layout using columns and rows in CSS Grid, and then placed elements into the spacial zones created using the grid-template areas property. Finally, I’ll deconstruct and alter the design for smaller screen sizes.

The Perfect Beat

My inspiration for the layout I use came from this 1983 design by Neville Brody for The Face Magazine. I was drawn to how Brody cleverly created both horizontal and vertical axis and the large space occupied by the main image.


layout by Neville Brody for The Face Magazine


Fig.7. This layout by Neville Brody for The Face Magazine felt like the perfect starting point for my design. Look closely at Brody’s grid, and you should spot that he used five columns of equal width.

I did the same by applying the following CSS Grid properties to the margin-less <body> element of my page, where columns one fraction unit wide repeat five times with a 2vw gap between them:

body  
margin: 0;
padding : 0;
display: grid;
grid-column-gap : 2vw;
grid-template-columns: repeat(5, 1fr); 

combining five equal width columns


Fig.8. I combine five equal width columns in different ways to create spacial zones.

In CSS Grid we define a grid module by giving it a name, then we place an element into either a single module or multiple adjacent modules — known as spacial zones — with the grid-template-areas property. Sounds complicated huh? No, not really. It’s one of the easiest and most obvious ways of using CSS Grid, so let’s get to work.

First things, first. I have five elements to position, and they are my “Kiss Me, Deadly” title, the largest ’banner’ image, main content, aside paragraph and two images, fig-1 and fig-2. My HTML looks like this:

<body>
<picture role="banner">…</picture>
<h1 class="title">…</h1>
<main>…</main>
<aside>…</aside>
<img class="fig-1">
<img class="fig-2">
</body>

I wrote that markup in the order that makes most sense, just as I would when constructing a narrative. It reads like a dream on small screens and even without styles. I give each element a grid-area value that in a moment I’ll use to place it on my grid:

[role="banner"]  grid-area: banner; 
.title  grid-area: title; 
main  grid-area: main; 
aside  grid-area: aside; 
.fig-1  grid-area: fig-1; 
.fig-2  grid-area: fig-2; 

Your grid area values don’t necessarily need to reflect your element types. In fact, you can use any values, even single letters like a, b, c, or d.

Back with the grid, I add three rows to the columns I created earlier. The height of each row is automatically defined by the height of the content inside it:

body 
grid-template-rows: repeat(3, auto); 

Here’s where the magic happens. I literally draw the grid in CSS using the grid-template-areas property, where each period (.) represents one empty module:

body 
grid-template-areas:
".  .  .  .  ."
".  .  .  .  ."
".  .  .  .  ."; 

Now it’s time to position elements on that grid using the grid-area values I created earlier. I place each elements’ value into a module on the grid and if I repeat that value across multiple adjacent modules — either across columns or row, that element will expand across them to create a spacial zone. Leaving a period (.) will create an empty space:

body 
grid-template-areas:
".  aside  .  fig-2  fig-2"
"title  title  banner  banner  banner"
"fig-2  main  banner  banner  banner"; 

One more small detail before I finish the layout CSS. I want the content of the aside element to sit at the bottom — close to the title and leaving ample white space above it to draw someone’s eye down — so I use an align-self property that might be familiar from learning Flexbox, but with a new value of ’end.‘

aside  
align-self: end; 

CSS Grid layout for larger screens


Fig.9. That’s it, my CSS Grid layout for larger screens is done. (Copyright: Stuff & Nonsense)

All that remains is to add a few other styles to bring the design to life, including a striking inverse color scheme and a bright, red accent that ties the word “Deadly” in the title to the color of our woman’s dress:

<h1 class="title">Kiss Me, <em>Deadly</em></h1>

.title em 
font-style: normal;
color : #fe3d6b; 

Going Up In Smoke

Now, I know you’ve been wondering about that smaller fight image, and I need to admit something. Natalie Smith made only one finished fists flying illustration for my Hardboiled Shot covers, but her sketches were too good to waste. I used CSS Grid to position an inverted version of one pencil sketch above the gun and rotated it with a CSS transform to form a cloud of smoke.


CSS Grid and transforms turn this sketch into a cloud of smoke.


Fig.10. CSS Grid and transforms turn this sketch into a cloud of smoke. (Copyright: Stuff & Nonsense)

Breaking It Down

In this article, I’ve shown how to create a layout for large screens, but in reality, I start with a small one and then work up, using breakpoints to add or change styles. With CSS Grid, adapting a layout to various screen sizes is as easy as positioning elements into different grid-template areas. There are two ways that I can do this, first by changing the grid itself:

body  
grid-template-columns: 50px repeat(2, 1fr); 

@media screen and (min-width : 48em) 
body  
grid-template-columns: repeat(5, 1fr); 
}

The second, by positioning elements into different grid-template areas on the same grid:

body  
grid-template-areas:
"fig-1  aside  aside  aside  aside"
"fig-1  title  title  title  title"
"banner  banner  banner  banner  banner"
"....  main  main  main  main"; 

@media screen and (min-width : 64em) 
body 
grid-template-areas:
"....  aside  ....  fig-2  fig-2"
"title  title  banner  banner  banner"
"fig-1  main  banner  banner  banner"; 
}

adapting layout to various screen sizes


Fig.11. Adapting my layout to various screen sizes is as easy as positioning elements into different grid-template areas. Small screen (left) Medium screen (right). (Copyright: Stuff & Nonsense)

Using CSS Grid Builder

Grid template areas make developing art directed layouts so easy that even a flat-foot like me can do it, but if you’re the type that likes tools to do the dirty work, CSS Grid Builder from CoffeeCup Software might be just the thing for you. You may have used WYSIWYG editors before, so you might be remembering how lousy the code they spat out was. Let me stop you there. CSS Grid Builder outputs clean CSS and accessible markup. Maybe not as clean as you write yourself, but pretty damn close, and the small team who developed it plan to make it even better. My handwritten HTML looks like this:

<picture role="banner">
    <source srcset="banner.png" media="(min-width: 64em)">
    <img src="banner-small.png" alt="Kiss Me, Deadly">
</picture>

The CSS Grid Builder <picture> element comes wrapped in an extra division, with a few other elements thrown in for good measure:

<div class="responsive-picture banner" role="banner">
    <picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="banner.png" media="(min-width: 64em)">
    <!--[if IE 9]></video><![endif]-->
    <img alt="Kiss Me, Deadly" src="banner-small.png">
    </picture>
</div>

Like I said, close enough, and if you don’t believe me, download a set of exported files from my Hardboiled example. Maybe that’ll convince you.

Browsers’ developer tools are getting better at inspecting grids, but CSS Grid Builder helps you build them. Obviously. At its core, CSS Grid Builder is a Chromium-based browser wrapped in a user-interface, and it runs on macOS and Windows. That means that if the browser can render it, the UI tools can write it, with one or two notable exceptions including CSS Shapes.

In fact, CSS Grid Builder builds more than grids, and you can use it to create styles for backgrounds — including gradients, which is very handy — borders, and typography. It even handles Flexbox and multi-column layouts, but you’re here because you want to learn about CSS Grid.

Looking Around The Interface

The interface in CSS Grid Builder, is pretty much as you’d expect it, with a wide area for the design you’re making on the left and controls over on the right. Those controls include common elements; text, images, interactive buttons and form controls, and layout containers. If you need one of those elements, drag and drop it into your work area.


Drag and drop common elements including text, images, and layout containers.


Drag and drop common elements including text, images, and layout containers.

Press to reveal the Styles tab, and you’ll find controls for naming class and ID attributes, applying styles at specific breakpoints and in particular states. All very useful, but it’s the layout section — somewhat inconveniently tucked away at the bottom of the pane — that’s the most interesting.


Styles layout section contains grid controls.


Styles layout section contains grid controls.

In this section you can design a grid. Setting up columns and rows to form a layout without visual representation can be one of the hardest parts of learning how ‘grid’ works. The app’s ability to visually define the grid structure is a handy feature, especially when you’re new to CSS Grid. This is the section I’m going to explain.


The Grid Editor contains tools for building a grid visually.


The Grid Editor contains tools for building a grid visually.

Using CSS Grid Builder I added a container division. When selecting that in the work area, I get access to the Grid Editor. Activate that, and all the tools needed to visually build a grid are there:

  • Add columns and rows
  • Align and justify content and items within each module
  • Size columns and rows using every type of unit including fr and minmax
  • Specify gaps
  • Name grid-template-areas
  • Specify breakpoints

When I’m happy with those settings, “OK” the changes and they’re applied to the design in the work area. Back there, use sliders to preview the results at various breakpoints, and if you’re one of those people who’s worried about the shrinking percentage of people using incapable browsers, CSS Grid Builder also offers settings where you can figure fallbacks. Then just copy and paste CSS styles to somewhere else in your project or export the whole kit and caboodle.


preview results at various breakpoints


Preview results at various breakpoints, save the project to edit later or export the files.

CSS Grid Builder is currently free while CoffeeCup develops it and if you like what they’re doing, you can throw a few dollars their way to help fund its development.

Cleaning Up

I’m finding it hard to contain my excitement about CSS Grid. Yes, I know I should get out more, but I really do think that it offers us the best chance yet of learning lessons from other media to make the websites we create better at communicating what we aim to convey to our audiences. Whether we make websites for businesses who want to sell more, charities who need to raise more money through donations to good causes, or news outlets who want to tell stories more effectively, CSS Grid plus thoughtful, art directed content makes that all possible.

Now that’s Hardboiled.

I hope you enjoyed this article, now view the project files on CodePen or download the example files.

Art Direction for the Web‘Art Direction for the Web’ by Andy Clarke, the first Hardboiled Web Design ‘shot.’ Shots are a series of short books on ‘Art Directing for the web, ’ ‘Designing with a Browser,’ and ‘Selling Creative Ideas’ to be published throughout 2018.

Smashing Editorial
(ms, ra, il)


From: 

Art Directing For The Web With CSS Grid Template Areas

How to Generate Email Signups Using Instagram

instagram email

An email list is one of the best assets that you can build for your business. No change in the Google Algorithm or advertising account ban can take your email list away from you. Whatever happens in the online marketing world, your email list will always be able to give you a direct line of communication with people who want to hear from you — and will be interested in buying from you. 80% of retail professionals suggest that email is their greatest driver of customer retention, and 59% of B2B marketers say that email is their most effective revenue…

The post How to Generate Email Signups Using Instagram appeared first on The Daily Egg.

Read this article:  

How to Generate Email Signups Using Instagram

Using CSS Grid: Supporting Browsers Without Grid

When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.
In this article, I explore approaches to dealing with browser support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?

Excerpt from:

Using CSS Grid: Supporting Browsers Without Grid

Infographic: Your Brain On Visualization

I’m not going to lie – visual communication is incredibly more effective than just using plain old text. I’ll prove it to you. Which set of instructions is quicker to understand and more effective overall? This: Or this: Obtain a pair of scissors. Hold the bag out in front of you. Locate the perforated seam at the top of the bag. Using your scissors, carefully cut along the perforated line. Discard any excess trimmings. The bag is resealable – so close after using to preserve freshness. Which set of instructions is going to help you get the job of opening…

The post Infographic: Your Brain On Visualization appeared first on The Daily Egg.

Source: 

Infographic: Your Brain On Visualization

Infographic: Typography In Emails – The Divine Story of Modified Typeface

If you have ever had to hand-code an email, then you know how insanely difficult it can be to get your email looking just right. I would say it’s more tedious and tricky than regular web development. This infographic does a good job of showing you how to get your typography licked for your email campaigns. If you’re going to be serious about keeping your brand styling consistent across all marketing channels, then this is one area not to overlook. Take a look at the infographic below to know all the tiny details of lassoing your typography for your future…

The post Infographic: Typography In Emails – The Divine Story of Modified Typeface appeared first on The Daily Egg.

Follow this link: 

Infographic: Typography In Emails – The Divine Story of Modified Typeface

From Idea To Development: How To Write Mobile Application Requirements That Work

Why write requirements? Well, let’s imagine you want to produce a mobile app, but you don’t have the programming skills. So, you find a developer who can build the app for you, and you describe the idea to him. Surprisingly, when he showcases the app for the first time, you see that it is not exactly what you want. Why? Because you didn’t provide enough detail when describing the idea.

Read the article:

From Idea To Development: How To Write Mobile Application Requirements That Work

Building a next-level optimization program with Heifer International

Reading Time: 5 minutes

A little over a year ago, Harper Grubbs, Director of Digital Marketing at Heifer International, began his search for a conversion optimization partner.

As luck would have it, one of Heifer’s partners pointed Harper in the direction of WiderFunnel. Harper did some research and decided to reach out…and so began a very exciting partnership.

This is the tale of how an international charity organization and a growth agency joined forces to the benefit of all: client, agency, donors, and so many in need.

Heifer’s Director of Digital Marketing, Harper Grubbs, tells his side of the story.

Who is Heifer International?

Founded in 1944, Heifer International is a charity organization working to end hunger and poverty around the world by providing livestock and training to struggling communities.

Based in the “teach a man to fish” philosophy, Heifer International provides livestock and environmentally sound agricultural training to help farmers around the world who are struggling for reliable sources of food and income.

client spotlight teach a man to fish
Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for a lifetime.

Their holistic approach is designed to help communities become drivers of their own change by cultivating income and nutrition, improving the environment, empowering women around the world, helping communities create social capital, and encouraging families that receive support from Heifer to “Pass on the Gift®” to others in their communities.

Of course, to do what they do, Heifer relies heavily on donations made on their website.

Harper Grubbs

We receive a significant percentage of our donations as an organization through the website. So, it’s very important that our website be effective, that it work as well as possible and provide our visitors with an optimal experience. And that’s where WiderFunnel has come in for us.

– Harper Grubbs

Searching for the right partner

Harper and his team had been doing conversion optimization in-house and with the help of external digital marketing consultants for a number of years, but they just weren’t seeing the desired effect.

They found that they were running a lot of experiments, but were not getting significant, projectable results that would actually impact Heifer’s bottom line.

Harper wanted to take Heifer’s conversion optimization efforts to the next level. So, he began the search for an external partner: a new team and new resources that he could rely on to supplement his existing team.

Harper Grubbs

We realized we needed a more structured approach to our optimization efforts, and we needed more resources to do it. We were really taxing the resources we had and weren’t devoting as much time into conversion optimization as it needed.

– Harper Grubbs

When Harper heard about WiderFunnel, he did his due diligence and discovered our LIFT Model framework and structured approach to optimization: “We were really impressed with the strategic approach [WiderFunnel] brings to optimization,” says Harper.

WiderFunnel's LIFT Model details the 6 conversion factors.
WiderFunnel’s LIFT Model details the 6 conversion factors.

Harper reached out, and before long, we were LIFT-ing Heifer’s website, together.

Getting in the donor’s head

With Heifer, the WiderFunnel strategy team really wanted to dig into donor motivations and develop experiments that would help answer questions like:

  1. What fundamentally motivates someone to feel charitable?
  2. Are donors sensitive to how others site visitors are donating? Do they respond to social proof?
  3. How many product choices is too many?
  4. Does positive versus negative messaging/imagery have an effect on donations?

Some of the experiments we have run tap into psychological principles, such as Robert Cialdini’s Rule of Consistency, which states that people want to be consistent in all areas of life; once someone takes an action, no matter how small, they strive to make future behavior match that past behavior.

We put this principle to the test in one experiment, asking Heifer users to self-identify as a donor type when they land on the site.

client spotlight psychological persuasion
What kind of donor are you?

We found that once someone starts thinking of themselves as a “donor”, their need to remain consistent kicks in, resulting in more donors for Heifer! This is just one of the many psychology-inspired tests we have run and are running with Heifer.

“WiderFunnel has incorporated some really interesting psychological and behavioral principles into the strategy of our optimization efforts. This has given us the ability to learn things we never would have understood on our own, it has given us better insights into how people are thinking and what they’re doing and why they do what they do on our website.

This has given us the ability to apply these aspects to other parts of our work so that when we are developing new features and functionality, we can consider ‘How do these principles apply to what we are doing currently?‘” explains Harper.

Harper emphasizes that the psychological testing we have done has yielded some of the clearest test results he’s ever seen, which has led to better overall website results.

The science of partnership

Several months into the engagement, the partnership had really begun to gel.

WiderFunnel Optimization Strategist, Michael St Laurent, and Optimization Coordinator, Ervin Cho work closely with Harper and his team to continue to transform Heifer’s conversion optimization program and overall user experience.

“We aren’t just optimizing their digital experiences, we are optimizing the relationship,” explains Ervin. The two teams need to be properly integrated to ensure that all of the valuable ideas from each side are being heard and tested.

We credit several of WiderFunnel’s consistent process requirements for the partnership’s success.

client spotlight partnership
A good partnership has many touchpoints.

Weekly meetings

Each week, Mike and Ervin meet with Harper and his team. Together, they review the experiment pipeline: What’s in the pipe right now? What are the new ideas each of us have? After some discussion, they prioritize what to tackle next and funnel each test idea into their shared pipeline.

Mike also recently went on-site with Heifer and some of their partners to brainstorm ideas and determine the best ways to share WiderFunnel’s learnings among partners (and the best ways to learn from what Heifer’s partners are doing).

One key decision-maker

Rather than going through multiple contacts for experiment approval, Mike and Harper are able to determine next steps together.

Open communication

Transparency is a necessity. Both the WiderFunnel strategy team and Heifer’s team are open and communicative about what is working and what isn’t working. We don’t hide anything from them and they don’t hide anything from us.

Collaboration and fresh ideas

Harper Grubbs

The team that we’ve worked with has been really impressive in terms of their level of knowledge and their sophistication with how they approach testing. They have brought a lot of insights to the team that we would not have had ourselves through their experience with other companies they have worked with.

They have just really exceeded our expectations in terms of delivering good strategy and delivering a sound project management approach, and having a good structure for how our website is optimized.

– Harper Grubbs

Harper and his team know their mission and their donors, but, at WiderFunnel, we have run thousands of tests. We have seen what works over and over again, and we have seen what fails over and over again. When Heifer approaches us with upcoming changes, we are able to give their team expert advice on how to improve the experience.

“Behavioral research drives a lot of what we do with Heifer,” explains Mike. “It’s not necessarily about knowing the specific industry, it’s about understanding what fundamentally motivates people to feel charitable, and looking at ways we can leverage that across the site.”

Harper explained that he is really excited about the level of partnership his team is achieving with the WiderFunnel team. “We’re really working to integrate the WiderFunnel team with our own team and are working more collaboratively, to integrate the strategy, approach, and ideas that they have.”

Harper’s goal for the future of Heifer’s partnership with WiderFunnel: “Every piece of work that we do informs the next, and we have one, single, combined approach to our website strategy.”

The post Building a next-level optimization program with Heifer International appeared first on WiderFunnel Conversion Optimization.

Visit link:  

Building a next-level optimization program with Heifer International

Are You Marketing Kryptonite? Then Stop Trying to Persuade Without Telling a Story

Paul Smith had his work cut out for him. The associate director of Proctor Gamble’s market research department had just 20 minutes to make a successful pitch to upper management. He needed to secure additional funding for new research techniques. To that end, Smith spent the last three weeks fine-tuning his speech and perfecting his PowerPoint presentation. He couldn’t have done a better job at preparation. On the day of the meeting, company CEO A.G. Lafley entered the room, greeted everybody, and sat down to hear Smith’s speech. But Lafley didn’t look once at the screen displaying Smith’s PowerPoint slides….

The post Are You Marketing Kryptonite? Then Stop Trying to Persuade Without Telling a Story appeared first on The Daily Egg.

Link to article: 

Are You Marketing Kryptonite? Then Stop Trying to Persuade Without Telling a Story

How Agency RevUnit Used Unbounce to Turn Up Conversions for School of Rock

How Agency RevUnit Turned Up Conversions
Digital Marketing Agency RevUnit rocked the house for their client by turning a deceptively simple idea into a 400% lift in PPC conversions.

When I first met Seth Waite over a Google Hangout a few weeks ago, he mentioned that his agency, RevUnit, had done some “pretty fun things with Unbounce” for clients.

It took a little while for me to understand what Seth really meant by “fun;” he meant innovative, experimental digital marketing that actually moves the needle on results. I’ll admit, fun isn’t the first word I’d use to describe Seth’s story.

It’s genius.

It’s also deceptively simple.

Based out of Las Vegas, Seth is the CMO at RevUnit, a full-scale digital agency that takes pride in their ability to “Build Small. Learn Fast. Iterate Often.”

This is the story of how Seth’s team at RevUnit used Unbounce to iterate a PPC — and it all started with a simple audit.

A little bit of background

RevUnit’s newest client, School of Rock, had a little bit of an Adwords addiction. Their PPC spending was on overdrive. But the ROI? Well, there was room for improvement.

School of Rock is a music school with more than 160 franchise locations worldwide. They came to RevUnit after experiencing poor-performing Adwords campaigns with a specialized PPC agency. Lead acquisition via PPC for new enrolments was slow and lagging.

School of Rock’s main goal was to drive new student enrolment to individual franchises.  In other words, they needed to get more students signed up for music classes at one of the more than 160 locations worldwide.

The question was, how could they increase enrolments and lower the cost of acquisition at the same time?

It all started with a simple audit

Before digging in and building new campaigns from scratch, RevUnit performed a full audit of School of Rock’s Adwords account concentrating on keywords, ads and landing pages.

The AdWords account consisted of 160+ campaigns, 800,000+ keywords and 160+ landing pages. It’s important to note that each campaign represents a franchise location (for instance, “School of Rock Scottsdale” is a single campaign) and each of those franchises locations had their own dedicated landing page.

During the audit Seth’s team found some pretty common mistakes, particularly with the landing pages associated with each campaign. Here’s what they were working with in the beginning:

Problems with the “before” landing pages:

  • Pages were very slow to load. Search engines like Google see this as a poor experience for users, and as a result, penalize pages with a lower quality score.
  • The lead forms embedded into each landing page were pretty long. Too many form fields can cause visitors friction, meaning they’re less likely to complete the form (and more likely to bounce).
  • There were some general design and copy issues, the biggest being that content was not designed for easy reading. While there was a lot of information on the pages, it not tell a compelling story.
  • The pages did not mirror their upstream ads. Without a strong message match, visitors are more likely to bounce, again resulting in a lower quality score from Google.
  • Campaigns weren’t enabled with click-to-call tracking so it was impossible to measure how many phone calls were generated from Adwords activities.

Seth’s team hypothesized that if they tackled each of the problems above, School of Rock would yield better results from their AdWords campaigns.

But (and this was a pretty big ‘but’), they couldn’t really afford to tackle 160 different landing pages without knowing for sure.

Here’s the good part

Instead of jumping in willy nilly, Seth’s team decided to use Unbounce to create a template for just one of the franchise locations. Basically, he created a single landing page to test out his hypothesis. The idea was that if the template actually increased enrollment for one of the franchise locations it could be replicated for others.

Sidnee Schaefer, RevUnit’s Senior Marketing Strategist, then went to the whiteboard with Seth and other members of the team to design the new strategic landing pages. After creating a mockup of the new page’s layout, Sidnee jumped into the Unbounce builder to implement the design.

The newly designed landing page template aimed to follow a story that is easy-to-digest and comprehend while presenting a clean and well-structured format. The page was built to create the shortest path to conversion without sacrificing need-to-know information.

According to Seth,

Every brand has a very different story and we knew how important it was to tell the story of how School of Rock is different than the average music school. We designed the page to reflect this brand positioning.

For the new School of Rock landing pages, content was strategically placed into sections covering who, what, where and why (including reviews). “We kept the copy clear and strong to avoid burdening people with too much information,” says Seth.

RevUnit also used Zapier to bridge a connection between Unbounce and School of Rock’s CRM system, so new leads go directly to franchises once submitted.

The result of RevUnit’s pilot was pretty convincing: a 75% increase in average weekly conversions and a 50% decrease in cost per conversion. And, all these new leads were acquired using half the budget.

Whew.

But that’s not all.

Seth didn’t stop with “good enough” – that’s just not his kind of fun.

Here’s the even *better* good part

The cherry on top of this masterminded plan is how RevUnit implemented Dynamic Text Replacement (DTR) to really match Google search queries with the landing page’s headline.

DTR is an Unbounce feature that lets you tailor the text on your landing page to match keyboard parameters, pay-per-click (PPC) campaigns, and other sources, using external variables you can attach to the URL.

DTR automatically updates specified content on your page (like a word in your headline) based on a visitor’s search query. RevUnit used DTR on their client’s landing page to ensure each visitor was served up the most relevant copy possible.

Seth explains:
DTR_!

We used dynamic content on the landing page which allowed us to show personalized content to different site visitors based on keywords and locations from the ads. This helped us match the perfect ad with the perfect landing page.

In other words, when a searcher types in “drum lessons, Scottsdale, AZ” dynamic text replacement (DTR) is used to match the landing page headline with the Google search query. As a result, when the visitor clicks through to the School of Rock landing page, the headline would look something like this, “Scottsdale Drum Lessons.”

A strong message match between the traffic source (PPC ad, social media, dedicated email or otherwise) and the landing page headline helps visitors understand that they are in the right place (and prompts thoughts like “yes, this is exactly what I was looking for!”).

According to Seth, here’s why DTR was a game changer for this campaign, “because our PPC keyword strategy was very focused on instrument lessons (guitar, piano, etc), we’d need five landing pages (a different landing page for each instrument type) for each franchise location.”

This would have normally been a painful and timely undertaking but, as Seth put it, “Unbounce had a solution.”

Here’s how they used DTR:

We strategically designed the pages with DTR in mind, so that instrument keywords could be placed throughout the page. Instead of having to create 750+ landing pages, we only had to create one for each franchise location.

The results

After the pilot’s stellar performance, Seth knew with confidence that it was time to roll it out to the rest of the 160+ School of Rock franchise locations.

Again, the results were incredible:

The number of monthly conversions improved 5x, by 250%, and the cost per conversion decreased by 82%. School of Rock has seen a huge improvement to their ROI on AdWords and their lead volume is stabilized.

What did the mean for School of Rock? Well, according to Seth, the “average value of improvements made based on customer lifetime value is potentially a 400% increase in yearly revenue based on new leads.”

The numbers are impressive but the best part of this story is that it’s easy for data-driven marketers to replicate. Start with a guess – a hunch, a hypothesis, an idea – and test it out. In other words, “Build Small. Learn Fast. Iterate Often.

Continue reading here:

How Agency RevUnit Used Unbounce to Turn Up Conversions for School of Rock