Tag Archives: copyright

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