Tag Archives: copyright

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

Copyright Law Essentials All Designers Should Know

As software designers or developers, you have the important task of ensuring that a program works the way it is supposed to while being efficient, user-friendly, and unique. After all the creativity that is poured into making a program work just right, it’s fair to say that a well-designed software program is a work of art.
From a legal perspective, a software program is a complex work that includes both functional and artistic elements.

Continue reading:

Copyright Law Essentials All Designers Should Know

Copy If You Can: Improving Your UI Design Skills With Copywork

There’s a technique for improving one’s user interface design skills that is the most efficient way I know of expanding one’s visual vocabulary but that I’ve rarely heard mentioned by digital designers.
What’s going on here?
I’m talking about copywork. Copywork is a technique that writers and painters have been using for centuries. It is the process of recreating an existing work as closely as possible in order to improve one’s skill.

Link:  

Copy If You Can: Improving Your UI Design Skills With Copywork

Thumbnail

How to Customize Your VWO On-Page Surveys For Maximum Response

Surveys help you uncover the intentions, motivation and apprehensions of your visitors through pop-up surveys on your website.

There are various factors that determine the response rates. Appearance is one of them. A survey should be attractive enough to draw a visitors attention. But having a survey that doesn’t match the theme of your website creates a bad user experience. Hence it is imperative that a survey should match the theme of your website.

VWO On-page Surveys has 10 in-built themes which you can use. It also allows a user to customize the appearance of a survey entirely to match the website’s design language. Today, we’ll be creating a customized survey design to match a website as a case study in survey customization.

We’ll be taking the example of Coach, the provider of luxury product for women and men as an example website and create a survey and customize it to match Coach’s website.

Coach Homepage

Attention!

Since a theme is composed of styling for all the elements in a survey, it is recommended that before you create a custom theme on an actual survey, you create a sample survey with questions of each question type, welcome screen, thank you screen and “Ask your visitor for their email address” screen. This will enable you to test and verify any customization to the appearance of the survey.

I’ve created a sample survey with the 8 following questions, Welcome Screen, Thank you Screen and “Ask your visitor for their email address” screen:

Welcome Message:

<p>Welcome to this survey!</p>
<p>Complete this survey to get a $50 Amazon gift card.</p>

Displaying the welcome screen

Questions:

      1. How did you find out about Coach? – Single Line Text Box
      2. What do you expect from the maker of luxury goods? – Multiline Text Box
      3. You are looking to buy products for? – Radio Button
        • Women
        • Men
        • Other
      4. What kind of products are you looking to purchase? – Checkbox
        • Bags
        • Shoes
        • Wallets/Purses
        • Other
      5. How much are you willing to spend today? – Dropdown
        • Less than $1000
        • $1,000 – $4,999
        • $5,000 – $9,999
        • Other
      6. Which of the following luxury brands do you like? – Multi-select List
        • Coach
        • Louis Vuitton
        • Gucci
        • Other
      7. How would you rate the products of Coach? – Rating
      8. How likely are you to recommend Coach to a friend or colleague? – Net Promoter Score

Thank you message:

<p>Thank you for taking this survey!</p> 
<p>Your gift card would be emailed to you on your email</p>

“Ask your visitor for their email address” option has been enabled.

You’ll notice, I’ve created a question of each question type, viz. single line text box, dropdown, radio button, etc. This will help me verify once I customize the styling for all those elements.

Now in the options screen, select “Position” as “Right”. Now select the “Theme” as “New Theme”. This will open two code boxes with the CSS for the Dark theme loaded. The top code box (Container CSS) has the CSS code for the survey window. The bottom code box (Content CSS) has the CSS code for all the elements inside the survey. We will now start customizing this theme.

The “Dark” theme has a dark and solid background. Coach is a maker of luxury goods and the survey should communicate the idea of luxury. So let’s replace the dark solid background with a classic pattern. You can download patterns for use from here.  Look for the following lines of code in the top code box (Container CSS):

#vwo-frame-wrapper iframe, #vwo-frame-wrapper .minimized-survey 
  /* To edit styling of survey container and its minimized state */
  border-color: #c3cad3;  
  background-color: #393939; 


If you want to simply change the background color, you can change the background color property to whichever color you like. But since we want to display a classic pattern in the background, we’ll comment out the background-color property and add the following line of code.

background-image: url('//example.com/resources/images/symphony.png');  

Attention

The image link in the CSS line above has to be an absolute link and not a relative link and should include the original domain. So..

background-image: url('//resources/images/symphony.png');                  
is wrong (  )
background-image: url('//example.com/resources/images/symphony.png');      
is correct ( ✔︎ )

We’ll also change the border color to match the dark color of the website.

So the new CSS code will be:

#vwo-frame-wrapper iframe, #vwo-frame-wrapper .minimized-survey 
  /* To edit styling of survey container and its minimized state */
  border-color: #dddddd;                                /* #c3cad3 */
  background-image: url('//example.com/resources/images/symphony.png'); /*  New CSS added */
  /*  background-color: #393939;  */  



Tip

It’s always a good idea to keep the original values as commented code. This will help you in case you need to revert any changes to the original values.

After adding the background pattern, you’ll notice that the text is not visible. So let’s change the color of the text to make it more visible. Look for the following lines of code in the bottom code box (Content CSS):

/* To edit styling of survey header and 'main' question box */
#main, #header 
  color: #eeeeee; 


Let’s change the color property to something more dark and close to gold color. After editing, the code would look like.

/* To edit styling of survey header and 'main' question box */
#main, #header 
  color: #A59984;                                   /* #eeeeee */ 


Attention!

After every change, don’t forget to save the changes by clicking on “Update Theme” and then clicking on “Update”.

Now let’s change the color of the “Next’ button. Since the “Next” button is part of the content inside the survey just like the text was, we would need to edit in the bottom code box (Content CSS). Look for the following lines of code in the bottom code box (Content CSS).

/* To edit styling of button inputs in content and footer */
#main input[type="button"], #footer input 
  -webkit-box-shadow: 0 3px 0 #737b85;
  -moz-box-shadow: 0 3px 0 #737b85;
  -ms-box-shadow: 0 3px 0 #737b85;
  -o-box-shadow: 0 3px 0 #737b85;
  box-shadow: 0 3px 0 #737b85;
  background: #ababab; 


Let’s change the background color of the button to a slightly darker color. Since the button has an even darker shadow, even this needs to be changed. If you don’t want the shadows, simply comment the code.

We will keep the shadow, but reduce it slightly to make it less prominent. Remember that the shadow color has to be darker than the button background color. So the new code would be as follows:

/* To edit styling of button inputs in content and footer */
#main input[type="button"], #footer input 
  -webkit-box-shadow: 0 2px 0 #897C65;                  /* 0 3px 0 #737b85 */
  -moz-box-shadow: 0 2px 0 #897C65;                 /* 0 3px 0 #737b85 */
  -ms-box-shadow: 0 2px 0 #897C65;                  /* 0 3px 0 #737b85 */
  -o-box-shadow: 0 2px 0 #897C65;                       /* 0 3px 0 #737b85 */
  box-shadow: 0 2px 0 #897C65;                      /* 0 3px 0 #737b85 */
  background: #A59984;                          /* #ababab */ 


Now in the preview, just click on the “Next” button. This will display the first question. You’ll notice that the single line text box needs to be made more visible. This can be done by adding a dark border. Look for the following lines of code in the bottom code box (Content CSS).

#main input, #main textarea, #main #dropdown-select-box, #main li.nps-choice 
  /* To edit border and background of textarea, input, dropdown-select-box and nps-choice options */
  border: none;
  background: #fafafa; 


The border is not visible since the border property has been set to none. Let’s change that to the following:

#main input, #main textarea, #main #dropdown-select-box, #main li.nps-choice 
  /* To edit border and background of textarea, input, dropdown-select-box and nps-choice options */
  border: 2px solid #dddddd;                            /* none */
  background: #fafafa; 


Now all questions in a survey are mandatory. If a mandatory question is not filled and a visitor tries to go to the next question, the survey will display a validation error. We now need to customize the color of this error message as well. So look for the following lines of code in the bottom code box (Content CSS).

/* To edit styling of error message shown in case of any error */
#error-msg 
  padding: 0 15px;
  font-size: 12px;
  color: #f2784b;
  margin-top: -5px; 


After changing the color property, the code will be as follows:

/* To edit styling of error message shown in case of any error */
#error-msg 
  padding: 0 15px;
  font-size: 12px;
  color: #A59984;                               /* #f2784b */
  margin-top: -5px; 


We also need to change the color of the text a visitor will be entering in the single line text box. So look for the following lines of code in the bottom code box (Content CSS).

  #main textarea, #main input 
    /* To edit the styling of text input element */
    width: 100%;
    cursor: text;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    padding: 6px 8px;
    outline: 0;
    font-size: 13px;
    color: #4a4a4a; 


Change the color property to #897C65. The updated code will look as follows:

#main textarea, #main input 
    /* To edit the styling of text input element */
    width: 100%;
    cursor: text;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    padding: 6px 8px;
    outline: 0;
    font-size: 13px;
    color: #897C65;                             /* #4a4a4a */ 


Inserting the text box

Now click on the “Next” button to see the second question. Since a multi-line text box is simply a larger version of the single line text box, any styling changes made to the single line text box will also apply to the multi-line text box, except for the following properties:

  #main textarea 
    /* To edit styling of multiline text box */
    font-family: Lato, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif; 
    height: 75px;
    resize: none; 

Displaying the multiline text box

Since we don’t need to change the height of the multi-line text box nor do we want the visitor to be able to resize the multi-line text box, we‘ll keep the default values as is and not make any changes. Click on “Next” to see the 3rd question. The 3rd question is a radio button type question. Look for the following lines of code in the bottom code box (Content CSS).

    #main .question input[type="radio"], #main .question input[type="checkbox"] 
      /* To edit styling the radio and checkbox type inputs */
      height: auto;
      width: auto;
      float: left;
      visibility: hidden; 


The default styling for radio buttons and checkboxes is combined as shown in the following code. To be able to style radio-buttons and checkboxes, we need to separate the following CSS into CSS classes specific to radio-buttons and checkboxes.

#main .question input[type="radio"] + label.choice:before, #main .question input[type="checkbox"] + label.choice:before 
        margin-left: -25px;
        margin-right: 10px;
        font-size: 15px;
        position: relative;
        top: 2px;
        -webkit-transition: 0.3s ease;
        -moz-transition: 0.3s ease;
        -ms-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none; 

#main .question input[type="radio"]:checked + label.choice, #main .question input[type="checkbox"]:checked + label.choice 
        font-weight: bold; 

#main .question label 
      cursor: pointer;
      font-size: 13px; 


The classes specific to radio buttons are as follows:

#main .question input[type="radio"] + label.choice:before
        margin-left: -25px;
        margin-right: 10px;
        font-size: 15px;
        position: relative;
        top: 2px;
        -webkit-transition: 0.3s ease;
        -moz-transition: 0.3s ease;
        -ms-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none; 
}
#main .question input[type="radio"]:checked + label.choice 
        font-weight: bold; 

We now need to introduce another class for the checked state of the radio button. You can use the following CSS code.

#main .question input[type="radio"]:checked + label.choice:before  
    content: "2022"; /* Bullet */
    color:white;
        font-size:20px;
    text-align:center;
vertical-align: middle;
        line-height:14px;


After editing the unchecked state CSS of the radio buttons, the CSS specific to both states (unchecked and checked) of the radio button is as follows:

#main .question input[type="radio"] + label.choice:before
        content: "";                        /* New CSS */
        display: inline-block;                  /* New CSS */
        width: 20px;                        /* New CSS */
        height: 20px;                       /* New CSS */
        vertical-align:middle;                  /* New CSS */
        text-align: center;                 /* New CSS */
        background-color: #A59984;              /* New CSS */
        border-radius: 15px;                    /* New CSS */
        margin-left: -25px;
        margin-right: 10px;
        font-size: 20px;                        /*  15px  */
        line-height:16px;                       /* New CSS */
        position: relative;
        top: 0px;                           /*  2px  */
        -webkit-transition: 0.3s ease;
        -moz-transition: 0.3s ease;
        -ms-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none; 
}
#main .question input[type="radio"]:checked + label.choice 
        font-weight: bold; 

#main .question input[type="radio"]:checked + label.choice:before  
    content: "25CF"; /* Bullet */
    color:white;
    font-size:16px;
    text-align:center;
    vertical-align: middle;
    line-height:16px;


Creating radio buttons

Clicking on the “Next” button will take you to the 4th question. The 4th question is a checkbox type question. We now need to introduce another class for the checked state of the checkbox. You can use the following CSS code. The classes specific to checkboxes are as follows:

#main .question input[type="checkbox"] + label.choice:before 
        margin-left: -25px;
        margin-right: 10px;
        font-size: 15px;
        position: relative;
        top: 2px;
        -webkit-transition: 0.3s ease;
        -moz-transition: 0.3s ease;
        -ms-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;

#main .question input[type="checkbox"]:checked + label.choice 
        font-weight: bold; 



#main .question input[type="checkbox"]:checked + label.choice:before  
        content: "2714";                    /* Tick */
        color:white;
        font-size:20px;
        text-align:center;
        vertical-align: middle;
        line-height:16px;


After editing the unchecked state CSS of the checkboxes, the CSS specific to both states (unchecked and checked) of the checkboxes is as follows:

#main .question input[type="checkbox"] + label.choice:before
        content: "";                        /* New CSS */
        display: inline-block;                  /* New CSS */
        width: 20px;                        /* New CSS */
        height: 20px;                       /* New CSS */
        vertical-align:middle;                  /* New CSS */
        text-align: center;                 /* New CSS */
        background-color: #A59984;              /* New CSS */
        border-radius: 3px;                 /* New CSS */
        margin-left: -25px;
        margin-right: 10px;
        font-size: 15px;
        line-height:16px;                       /* New CSS */
        position: relative;
        top: 0px;                           /*  2px  */
        -webkit-transition: 0.3s ease;
        -moz-transition: 0.3s ease;
        -ms-transition: 0.3s ease;
        -o-transition: 0.3s ease;
        transition: 0.3s ease;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none; 
}
#main .question input[type="checkbox"]:checked + label.choice 
        font-weight: bold; 

#main .question input[type="checkbox"]:checked + label.choice:before  
        content: "2714"; /* Tick */
        color:white;
        font-size:14px;
        text-align:center;
        vertical-align: middle;
        line-height:18px;


Inserting checkboxes in a survey

Clicking on the “Next” button will take you to the 5th question. The 5th question is a dropdown type question. Look for the following lines of code in the bottom code box (Content CSS).

#main #dropdown-select-box 
    /* To edit the styling of 'dropdown-select-box' input */
    cursor: pointer;
    color: #4a4a4a;
    font-size: 13px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    max-height: 75px;
    overflow-y: auto; 


Change the color property to better match the text color to the rest of the survey colors. The updated code is as follows:

#main #dropdown-select-box 
    /* To edit the styling of 'dropdown-select-box' input */
    cursor: pointer;
    color:#897C65;                      /*  #4a4a4a  */
    font-size: 13px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    max-height: 75px;
    overflow-y: auto; 

Creating a dropdown list

Click on the “Next” button to see the 6th question. The 6th question is a multi-sect list type of question. Since the styling for dropdowns and multi-select list boxes is exactly the same, there is no additional code or changes required here.

Inserting multi-select list

Now clicking on the “Next” button will display the 7th question. The 7th question is a Rating type of questions. Look for the following lines of code in the bottom code box (Content CSS).

#main .rating > span 
      display: inline-block;
      width: 22px;
      height: 22px;
      background: url('//dev.visualwebsiteoptimizer.com/static/0.2/survey/images/blankstar-c5eb369f3dabf5cb9ba451a32e789134.png') center no-repeat; 

#main .rating > span.selected, #main .rating > span.selected ~ span, #main .rating > span:hover, #main .rating > span:hover ~ span 
        background-image: url('//dev.visualwebsiteoptimizer.com/static/0.2/survey/images/filledstar-eb277ac60abd394a67b9a04ad767ec6d.png'); 


To change the default star icons, change the background property. Put the links to your own custom icons for the background property.

Attention

The image link in the CSS line above has to be an absolute link and not a relative link and should include the original domain. So..

background-image: url('//resources/images/empty.png');                  
is wrong (  )
background-image: url('//example.com/resources/images/empty.png');      
is correct ( ✔︎ )

So the new CSS would be as follows:

#main .rating > span 
      display: inline-block;
      width: 22px;
      height: 22px;
      background: url('//example.com/resources/images/empty.png') center no-repeat; 

#main .rating > span.selected, #main .rating > span.selected ~ span, #main .rating > span:hover, #main .rating > span:hover ~ span 
        background-image: url('//example.com/resources/images/filled.png'); 


Inserting a rating system

Click on the “Next” button to see the 8th question. The 8th question is a Net Promoter Score (NPS) type question. Look for the following lines of code in the bottom code box (Content CSS).

#main li.nps-choice 
    /* To edit styling of nps-based question options */
    float: left;
    height: 22px;
    width: 22px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    margin: 2px 7px 2px 0;
    position: relative; 
    #main li.nps-choice:last-child 
      margin-right: 0; 
    #main li.nps-choice input[type="radio"] 
      height: inherit;
      width: inherit;
      position: absolute;
      left: -3px;
      top: -3px; 
      #main li.nps-choice input[type="radio"] + label.nps-choice 
        color: #737b85;
        font-size: 10px;
        top: 5px;
        position: absolute;
        z-index: 0;
        left: 0;
        right: 0;
        text-align: center; 
      #main li.nps-choice input[type="radio"]:checked + label.nps-choice 
        color: #ffffff;
        font-weight: bold; 
        #main li.nps-choice input[type="radio"]:checked + label.nps-choice:before 
          position: absolute;
          border: 3px solid #ffd700;
          padding: 10px;
          content: '';
          top: -7px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          border-radius: 50%;
          left: -2px;
          background-color: #666666;
          z-index: -1; 

Some changes are required to keep the colors in line with the overall color scheme. The edited code is as follows.

#main li.nps-choice 
    /* To edit styling of nps-based question options */
    float: left;
    height: 18px;                       /* 22px */
    width: 18px;                            /* 22px */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    margin: 2px 7px 2px 0;
    position: relative; 
    #main li.nps-choice:last-child 
      margin-right: 0; 
    #main li.nps-choice input[type="radio"] 
      height: inherit;
      width: inherit;
      position: absolute;
      left: -3px;
      top: -3px; 
      #main li.nps-choice input[type="radio"] + label.nps-choice 
        color: #737b85;
        font-size: 10px;
        top: 3px;                               /*  5px  */
        position: absolute;
        z-index: 0;
        left: 0;
        right: 0;
        text-align: center; 
      #main li.nps-choice input[type="radio"]:checked + label.nps-choice 
        color: #dddddd;                         /*  #ffffff  */
        font-weight: bold; 
        #main li.nps-choice input[type="radio"]:checked + label.nps-choice:before 
          position: absolute;
          border: 3px solid #A59984;                    /*  #ffd700  */
          padding: 10px;
          content: '';
          top: -7px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          border-radius: 50%;
          left: -4px;                           /*  -2px  */
          background-color: #A59984;                    /*  #666666  */
          z-index: -1; 

Recommending through the Net Promoter Score

Form for fetching email address Provide Email

Creating a Thank you screen

Since this is the last question, clicking on the “Submit” button will take you to the Thank you screen. Finally, to remove the VWO logo, you need to enable the “Remove VWO branding” checkbox. This will remove the VWO branding from your surveys. Optionally, you can choose to display your own branding. Simply upload a 320px wide and 100px high image (ideally PNG/SVG with transparent background) and your survey would display your custom branding.

Maximized view of survey box

Minimized view of survey box

After you have customized the theme and saved the changes, save the campaign. It is a good idea to test how the survey looks on your test page before you start the survey campaign. To do that, just click on “Preview Campaign and Start Later” button next to the “Start Now” button once the campaign has been created.

Preview a Survey before starting the campaign

Or alternatively, click on the “Preview Now” button under the “Previews” tab to test how the survey would look like on your test URL before making the survey campaign live.

Preview a Survey before starting the campaign

The post How to Customize Your VWO On-Page Surveys For Maximum Response appeared first on VWO Blog.

Source: 

How to Customize Your VWO On-Page Surveys For Maximum Response

The History Of Usability: From Simplicity To Complexity

The story of usability is a perverse journey from simplicity to complexity. That’s right, from simplicity to complexity—not the other way around.
If you expect a “user-friendly” introduction to usability and that the history of usability is full of well-defined concepts and lean methods, you’re in for a surprise. Usability is a messy, ill-defined, and downright confusing concept. The more you think about it—or practice it—the more confusing it becomes.

Read the article:

The History Of Usability: From Simplicity To Complexity

18 Credit Card, Debit Card and Payment Icons [Freebie]

Today we are glad to release a Payment Icon Set, a set with 18 payment icons in PNG format, in the resolutions 32×32px — 128×128px. This set was designed by Phil Matthews and released especially for Smashing Magazine and its readers. [Last updated: Dec/24/2016]

The icons are inteded to be used on e-commerce websites where you can show what types of payment the shop accepts. Each icon comes in curved and straight edge variations.

Source: 

18 Credit Card, Debit Card and Payment Icons [Freebie]

The Effective Strategy For Choosing Right Domain Names

Naming is linguistic design, and a good domain name is an important part of the overall design of a website. A name plays a prominent role when people discover, remember, think about, talk about, search for, or navigate to a website. It establishes a theme for the branding of a website before people even visit it for the first time.
Coming up with a good domain name requires a combination of strategy, imagination and good linguistic design practice.

View original: 

The Effective Strategy For Choosing Right Domain Names

Powerful CSS-Techniques For Effective Coding

Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. Reason: with a number of incompatibility issues and quite creative rendering engines it sometimes takes too much time to find a workaround for some problem without addressing browsers with quirky hacks. And that’s where ready-to-use solutions developed by other designers come in handy.

This article is from: 

Powerful CSS-Techniques For Effective Coding