Useful Web Usability Testing Tools

Usability testing — also known as “user testing” — is a popular methodology for user experience researchers. It’s a critical part of the design process since it helps designers and/or developers understand how users interact with their design or product. In turn, it improves the user experience of the product.

Since it helps to identify and fix design problems, it helps users better use your product or service, which helps increase conversions too. However, it’s a long process that includes multiple tasks. That is why we need usability testing tools, which help you test the design and get relevant feedback from your users.

That said, let me introduce you to the best usability testing tools in the market. Though they have their pros and cons, they solve a common problem: they help you understand and speak the language of the users of your app or website.

A/B Test Results and Case Studies for UX Design

A/B Test Results and Case Studies for UX Design

The process of split testing is not as complicated as you may think. You contrive a specific goal,… Read more

Hotjar

Hotjar

Hotjar is one of the popular behavior analytics and usability testing services. It primarily provides four sub-products: Heatmaps, Visitor Recordings, Surveys, and Incoming Feedback. These four products combinedly help you to perform usability testing on your app or website, providing useful behavior analytics.

Heatmaps help to visualize user behavior while interacting with your design. It can track and show clicks, moves, and scrolls. Visitor Recordings help you see the exact behavior of users by replaying recordings. Surveys help you get written feedback while Incoming Feedback helps get visual feedback from real users.

Pros
  • Supports desktop, tablet, and mobile devices.
  • Powerful targeting via attributes and triggers.
  • Features unlimited responses for each feature.
  • Free plan to get you started and $ 39/month for Plus.
Cons
  • No support for remote usability testing, like other tools.

Crazy Egg

Crazy Egg

Crazy Egg is a popular usability testing and website optimization platform that boasts features similar to Hotjar. Unlike the other, it offers five sub-products: Snapshots, Heatmaps, Recordings, A/B Testing, and Crazy Egg Editor.

Crazy Egg helps you understand your users’ journey on your product, thanks to Snapshots and Recordings. You get visual reports and session recordings that help you understand a user’s interaction with your product. What’s unique is its Crazy Egg Editor that lets you directly change the basic design of your website.

Pros
  • Add any number of team members for free.
  • Allows tracking ad campaign traffic, unlike many.
  • Its basic plan starts at just $ 24/month billed annually.
  • Offers 30-day trials on all its plans, more than some tools.
Cons
  • No free plan to get you started with Crazy Egg, unlike Hotjar.

Loop11

Loop11

Loop11 is another popular usability testing or user testing platform. It’s different from some other tools on this list (including Hotjar). The reason being you can employ test users to provide feedback on your design using Loop11 rather than simply getting feedback from your site visitors, as supported by Hotjar.

Among its many features, Online Usability Testing and A/B Usability Testing help at analyzing the usability of your website along with multiple designs. Prototype Testing helps to test prototypes and wireframes, unlike some tools on this list. Benchmarking is its unique feature, letting you analyze usability over time.

Pros
  • Features heatmaps, clickstream analysis, and more.
  • Supports desktop, mobile, and tablet devices.
  • Avails 14-day trial uses for all its plans, like others.
Cons
  • A bit pricey compared to Hotjar and Crazy Egg.
  • Starts with $ 69/month for the Rapid Insights plan.

Lookback

Lookback

Lookback is another handsome usability testing service. It primarily offers two features: LiveShare and SelfTest. LiveShare is a moderated testing service, which lets you interview users from around the world. It allows you to collaborate with clients and team members in the review, check tests, and make notes.

LiveShare also works in-person, i.e., you can use it to record tests of designers or in-house testers. On the contrary, SelfTest is an unmoderated testing service that allows testers to flexibly test your design and/or app or website.

Pros
  • Supports desktop and mobile devices, like most tools.
  • Invite in-house or third-party testers using just a link.
  • Offers 14-day trials on all its plans, unlike Crazy Egg.
Cons
  • Starts with $ 99/month annually, i.e., pricier than others.

Qualaroo

Qualaroo

Qualaroo integrates directly with your website to provide behavioral analytics about your users, like Hotjar. It allows you to get insights from real users by nudging them with customized sets of questions. You can brand and design the questions, add logic for the next questions, and direct to mockups or beta sites.

What’s interesting is, Qualaroo offers many types of insights analysis including sentiment analysis and word cloud to help you understand the test results. Also, it offers integrations for taking the analysis to the next level, say Salesforce or Tableau, or merge it with other analyses or data, say Hubspot or Optimizely.

Pros
  • Features powerful targeting per identity and geography.
  • Offers integrations for popular products and services.
  • Free plan to get you started, unlike Loop11 and Lookback.
  • Its Essentials plan starts with just $ 25/month, unlike many.
Cons
  • Flexible billing per tracked pageview can be costly for large sites.
  • No support for analytics or integrations in the free plan, sadly.

TryMyUI

TryMyUI

TryMyUI is a remote usability testing service that just works! It helps you get valuable insights from real testers per your research requirements. However, the option to bring in-team testers is only available in its Enterprise plan.

TryMyUI brings targeted volunteer testers to test your app or website. You only need to create a design test, select the ideal testers, and TryMyUI will get your mobile app or website tested by them. Then, you can check the results in video form, watching the testers engage with your app or website in the remote.

Pros
  • Offers 14-day trials on all its plans, unlike Crazy Egg.
  • Records tester engagements to view later or repeatedly as required.
Cons
  • No free plan and its Personal plan starts with $ 99/month.
  • Personal plan, i.e., its first plan is very limited, unlike some others.
  • No support for interviewing testers in real-time, unlike some others.
  • No support for unlimited team members, unlike some on this list.

Userlytics

Userlytics

Userlytics is another full-featured usability testing service, like Loop11. I found Userlytics is significantly powerful compared to a few tools on this list. Along with Usability Testing and Prototype Testing, it offers Live Conversations, Multichannel User Experience, System Usability Scale, and more features.

You can create and run a variety of usability tests with Userlytics — online (remote) as well as in-person or live-interview tests. It allows you to customize questions, include branching logic to them, and review the tests as videos.

Pros
  • Supports usability testing on desktop and mobile devices.
  • Allows live-conversation or moderated sessions, unlike TryMyUI.
  • Offers advanced video features like annotations and transcriptions.
Cons
  • Starts with $ 49 per participant, unlike others’ flat-priced plans.
  • Flexible pricing per participant, making it costlier than many.

Userbrain

Userbrain

Userbrain is another remote usability testing platform packed with features. You can test anything with a link, create questions for testers, and get their feedback as videos with audio commentary. You can also annotate videos, tag them for organizing them, and quickly share them with your team using a link.

What is unique about Userbrain is its recurring tests feature, which allows you to schedule repeat tests. I find it helpful to automate usability tests on a monthly or fortnightly basis and get regular feedback on your prototype or website.

Pros
  • Avails a clean and intuitive user interface.
  • Starts with flexible pricing of $ 29 per user test.
Cons
  • Missing live, face-to-face test sessions, unlike Userlytics.
  • Asks for $ 49/month for adding in-team testers, which comes free in some tools on this list.

UserZoom

UserZoom

UserZoom is an enterprise-level user experience research and testing platform. It boasts of a 537% return on your investment using UserZoom, which is backed by Forrester Research. It’s feature-packed: you can test prototypes and websites, record remote testers engagements, perform market research, and more.

What’s interesting is that UserZoom allows you to add lots of additional features in your plan per your requirements. The list includes advanced capabilities, professional services, additional integrations, and many more add-ons.

Pros
  • Features a database of 120 million testers around the world.
  • Provides an advanced dashboard with analytics and reports.
Cons
  • No pricing information is available, i.e., you must get a quote.
  • No trial plans or at least its information is not available to us.
  • Not suited for individuals or small businesses, unlike others.

UserTesting

UserTesting

UserTesting is one of the popular names among usability testing tools. It mostly features three products: Insight Core, Product Insight, and Marketing Insight. These three products combinedly help with most types of research including development, market, and user experience, unlike most other tools here.

Some of its interesting features include a highlights reel of the interesting video clips, online/offline customer journeys, and schedule 1:1 interviews with testers. Surprisingly, it allows testing almost anything — from concept and prototype to content and website usability to marketing campaign and message, unlike many.

Pros
  • Supports testing on desktop, mobile, and tablet devices.
  • Allows chatting with testers while they’re engaging with your site.
  • Has powerful analytics features to discover insights from the tests.
Cons
  • No pricing information is available, so you should get a quote.
  • A trial plan is available but asks for too much information, unlike many.

I know these are varied tools with varied sets of features, hence I tried listing out the base features along with their pros and cons to help you get started with usability testing per your budget and requirements. Did I miss one of your favorite tools? Write a comment below or tweet to me at @iamashks.

The post Useful Web Usability Testing Tools appeared first on Hongkiat.

Hongkiat

Posted in Website Development

Latest website development News

web design hacks

Image credit

Having a functional, usable, and super fast website doesn’t have to cost an arm and a leg.

As a web designer, you can use a few pieces of code or some minor tweaks to ensure a much faster and better appealing web design.

Without having to fork out thousands of dollars to a designer, and without having to change the underlying infrastructure of your website, here are four simple web design hacks that can enhance your website today:

  1. Use HTML5 DOM Storage (Instead of Cookies) to Ensure a Faster Website 

local storage

Image Credit

Depending on how big a website/web page is, it “costs” quite a bit of data and bandwidth to load that website when you rely only on cookies. When this website is loaded repeatedly for a lot of users, depending on the server it is hosted on, the result can be a slower website (due to increased strain on available server resources) and increased hosting costs.

Often, this is because of how cookies are used: cookies are generally only necessary when there is a need for client-server communication between a user’s browser and your server.

If there’s no need for a user’s browser to interact with your server before the user experience is fulfilled, you should consider using DOM storage instead of cookies.

DOM Storage can take the following forms:

  • sessionStorage in which data is stored in a user’s browser for the current session
  • localStorage in which data is stored in a user’s browser without an expiration date

You generally want to focus on localStorage. With this, data is stored in the user’s browser and won’t be deleted even if they close their current browsing session. This will reduce server connection requests and make your website a lot faster for the user.

So how does this work? Assuming you want to store the “name” value in a user’s browser, for example, you will have:

// Store 
localStorage.name = “Firstname Lastname”; 

To retrieve the value:

// Retrieve 
document.getElementById(“result”).innerHTML = localStorage.name;

To remove the value:

localStorage.removeItem(“lastname”);

What if you want to check if localStorage is available? You can use:

function supports_html5_storage() {
try {
return ‘localStorage’ in window && window[‘localStorage’] !== null;
} catch (e) {
return false;
}
}

  1. Achieve Better Image Styling by Using the <Picture> Element

Image credit

In a world that is heavily reliant on images — research shows that our brains process images a lot faster than text — being able to effectively manipulate images is one of the key advantages you can have as a web designer; and this goes beyond looking for the best photo editing app out there today.

Being able to properly style images is a web design super power for a few key reasons:

  • It makes your web design a lot faster since you’re able to control when and how images should load.
  • It gives you a lot of flexibility when it comes to which image/version of your design users should see depending on their device.
  • It allows you to serve different images/image formats for different browser types.
  • It allows you to save money you’d have otherwise spent creating different design versions with different image elements.

So how do you go about achieving this? By effectively leveraging the HTML <picture> tag.

Here’s an example code:

<picture>
<source media=”(min-width: 600px)” srcset=”img001.jpg”>
<source media=”(min-width: 250px)” srcset=”img123.jpg”>
<img src=”img234.jpg” alt=”Header” style=”width:auto;”>
</picture>

In essence, the above code involves three images; the original “img234.jpg” which is displayed. Under certain conditions, however, other images could be served. For example, the code says “img001.jpg” should be served for devices with a minimum width of 600px, “img123.jpg” should be served for devices with a minimum width of 250px. You could add more lines of code to specify more possibilities.

Some sub-elements and attributes that can be used for this tag include:

  • The <source> subelement to specify media resources.
  • The <img> subelement to define an image.
  • The srcset attribute that is used to specify different images that could be loaded depending on the size of the viewport; you use this when dealing with a set of images as opposed to just one image (in which case you use the src attribute).
  • The media attribute that the user agent evaluates for every source element.
  1. Enable GZIP Compression via .htaccess to Boost Site Speed

Image credit

No matter how well-designed a website is, it won’t make much of a difference if the website is slow.

This is why it is important to make sure you enable proper compression to minimize the number of files that have to be loaded and as a result get a website speed boost. The best way to do this is via GZIP compression.

You can enable GZIP compression by adding the following code to a web server’s .htaccess file:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes

mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*

mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

If your web server doesn’t have .htaccess, there are also instrunctions for NGINXApache, and Litespeed.

  1. Combine Fonts to Spice Up Your Design

Typography is generally believed to be the most important part of a design, so the fonts you use will go a long way to influence how your design is perceived.

So much has been written about selecting fonts, so I won’t be covering that again in this article. One hack I’d like to recommend you give a shot, however, is combining multiple fonts.

You can combine two, three, or more fonts to make your web design look a lot more appealing. Fonts can be combined in a logo, layout, or the actual web design itself, combining fonts can go a long way to make your website look different.

That said, there are a few rules you might want to stick to if you want to get results from combining fonts. These include:

  • Choosing fonts from the same superfamily. This is especially important if you’re a beginner designer or not familiar with how to pair fonts.
  • If you’re not sure where to start, you might want to start by pairing a serif font with sans serif and see how that looks.
  • Consider the flow of content on your web design when combining fonts — since fonts influence content readability, you want to make sure that the fonts you use match the attribute of the message that will be displayed and as a result flows.
  • You also want to make sure that the fonts you pair contrast with each other — this is one of the reasons why pairing serif and sans serif might be a good place to start. Contrast can be achieved through size, style, spacing, and weight.

Read More at 4 Web Design Hacks You Can Use to Enhance Your Website on a Budget

Web Design Ledger

Posted in Website Dev

IKEA’s New Ads Just Slayed The Game

There’s nothing like killing the time, walking around the many isles of Ikea and seeing different home design ideas.

And in the end, eating something delish from their little food corner.

I could literally go there all day, every day.

It’s always so relaxing to go, but you know what is almost even more relaxing?

Ikea’s New Sleep Ads

We’ve all seen the plethora of influencers talking about skin routines, night time routines, serums, and vitamins that are allegedly supposed to help you sleep better at night.

But you know what’s better than all of those supplements?

Ikea’s new sleep products.

The design team in charge of this campaign absolutely nailed it on the head by making a mock up of fad sleep products.

So many people nowadays claim that their supplements or energy drinks will help you feel more energized, but nothing quite slaps like a good night’s sleep.

Ikea’s new sheets and pillows will definitely give you a good night’s rest, and these photos and posters by Amy Currell and Andy Knight Ltd, are all a part of IKEA’s Tomorrow Starts Tonight campaign.

I haven’t seen this good of a design in what seems like ages, and it was super refreshing to see something this creative.

What’s one of the best ad campaigns you’ve ever seen?

Drop them down in the comments below so I can check them out and review them in the future.

And of course, until next time,

Stay creative, folks!

Read More at IKEA’s New Ads Just Slayed The Game

Web Design Ledger

Find more website development articles here

Posted in Website Dev

30 Beautiful Google Fonts for Your Website

Finding attractive, user-friendly, legible fonts for your website isn’t always easy, but Google Fonts, launched in 2010, helps solve that problem. Having started small, the directory now includes more…

The post 30 Beautiful Google Fonts for Your Website appeared first on Onextrapixel.


Onextrapixel

Check here for more wordpress development posts

Posted in Wordpress Development

Exciting New Tools for Designers, October 2020

This month’s collection of new tools, resources, and freebies for designers is a smorgasbord of sorts. You’ll find everything from useful APIs to icons to tutorials to fonts.

Let’s get right into it, here’s what new for designers this month:

Tooltip Sequence

Now that your app or website is ready, you might need to help users engage with it. Tooltip Sequence is a simple JavaScript package that helps you create a series of small tooltips that will guide users through product features with a small description of what they need to know. It looks great and the best part is this tool saves you from having to create each tooltip description manually on each page and link them together.

Serenade

Serenade allows you to free up your hands with voice coding technology. Use natural speech and stay productive with this tool that allows you to code without typing. It works across multiple coding languages and platforms. It’s as easy as “add function hello” and the tool knows what syntax to use.

Gazepass

Gazepass, which is still in beta, is a nifty API that allows for passwordless multi-factor authentication for any website or mobile app. It uses biometrics on any device or platform to make getting into apps or websites easier for users.

Filters.css

Filters.css is a CSS-only library to apply color filters to website images. Installation only takes three steps and includes a variety of filers, such as blur, grayscale, brightness, contrast, invert, saturate, sepia, and opacity.

Sidebar Webring

Sidebar Webring is a collection of blogs and websites that are focused on web design. The curated list is handpicked for superb content for designers and developers. But, what’s a webring? It’s a collection of linked websites in a circular structure that are organized around a theme. The term is a throwback to the early days of the web in the 1990s and 2000s.

Wicked Templates

Wicked Templates is a set of responsive HTML templates made with Bulma and Tailwind CSS that you can style and use as you wish. Use these templates to jumpstart projects. Free and paid options available.

WP Umbrella

WP Umbrella will help you keep sites running in a healthy and safe manner on WordPress. Monitor uptime and performance, PHP errors, and keep up with hundreds of websites from one dashboard.

Servicebot

Servicebot helps you create customer-facing embeddable billing pages that work with Stripe payments. This premium tool is quite user-friendly and works with websites or SaaS.

Custom, Accessible Checkboxes with Perfect Alignment

Create custom, accessible checkboxes with perfect alignment every time. This walkthrough shows you how to use CSS to align elements and labels.

Sombras.app

Sombras.app is a nifty tool that creates 3D object shadows. Use the easy on-screen controls to get just the right orientation and shape.

urlcat

Urlcat is a tiny JavaScript library that helps you build URLs with dynamic parameters and without mistakes. The friendly API has no dependencies, includes TypeScript types, and is just 0.8KB minified and gzipped.

Reacher

Reacher is a real-time email verification API that lets you check the validity of an address before you send the email. Reduce bounce rates in an instant. (The personal version is free.)

Swell

Swell is a most powerful headless ecommerce platform for modern brands, startups, and agencies. Create fast and flexible shopping experiences with the API and headless storefront themes. This is a premium tool but does have a free trial.

No Code Founders 2.0

No Code Founders 2.0 is a platform for discovering the latest startups built with no-code and the tools used to build them. Browse startups, tools, perks, interviews, jobs, meetups, posts, and more as part of the no-code movement. The community engages on Slack and requires an email to sign up.

How to Pick More Beautiful Colors for Your Data Visualizations

Beautiful color choices will make your data visualizations that much more impactful. This tutorial by Lisa Charlotte Rost will help you make better color choices on the way to better infographics and charts. Plus, it’s well developed, designed, and packed with useful information.

IconPark

IconPark is a collection of more than 1,200 high-quality icons with an interface that allows you to customize them. It uses a single SVG source file that can be transformed into multiple themes. The library includes cross-platform components and is free to use.

Mono Icons

Mono Icons is a simple and consistent open-source icon set that uses mono spacing. The collection includes 136 icons.

BGJar

BGJar is a free SVG background generator for digital projects. Pick a category and customize the result to fit your project or needs.

HitCount

HitCount is almost too simple to be true. This tiny tool lets you add a hit counter to your website that’s as easy as adding an image. Copy the code and make any customizations you want. Then paste it to your design. That’s it!

Blacklight

Blacklight is a real-time website privacy inspector. The tool by Surya Mattu scans any website you enter in the scan bar and shows what user-tracking technologies are used on the website. This allows you to see who might be gathering data about your visit.

Alter

Alter is a customizable – and experimental – three-dimensional typeface that you can experiment with. It’s as fun to play with as use.

Autobus Omnibus

Autobus Omnibus is a simple all capitals font with new wave styling. The character set has 96 glyphs that are perfect for display use.

Deathmatch

Deathmatch is a seasonal blackletter font that’s ideal for the upcoming Halloween holiday. The character set includes plenty of options and there’s a full version (paid) for commercial use.

Futura Now

Futura Now is a premium typeface and update to a font you may already know and love. The new version has 107 styles in a massive family.

Pumpkin Soup

Pumpkin Soup is a fun almost handwriting style typeface with a cartoonish vibe. It includes a regular and italic style and is most appropriate in limited use.

Source


Webdesigner Depot

Posted in Wordpress

How to Start a Blog: a Step-by-step Guide

These days it seems like nearly everyone has a blog. Blogs can be a great way to document your hobbies or interests, keep a record of your daily activities,…

The post How to Start a Blog: a Step-by-step Guide appeared first on Onextrapixel.


Onextrapixel

Posted in Wordpress Development

Latest wordpress web design News

Using a button is, so far, the preferred way to interact with an electronic stuff; such as the radio, TV, music player, and even a smartphone that has a voice command feature still needs at least one or two physical buttons.

Furthermore, in this digital age, the button has evolved in its digital form as well, which makes it more interactive, dynamic and real easy to make, compared to the physical button.

So, this time, we are going to create a slick and interactive button which is based on this excellent design over at Dribbble using only CSS.

Well, let’s just get started.

HTML

We will start off the button by placing the following markup on our HTML document. It’s really simple, the button would be based on an anchor tag, we also have a span next to it to create the indicator light, and then they are wrapped together within an HTML5 section tag.

 <section>  <a href="#button" id="button">&#xF011;</a>  <span></span> </section> 

Here is how our button initially looks like.

button initial look

Basic Styling

In this section, we will start working on the Styles.

We firstly apply this dark background from Subtle Pattern on the body’s document, and center the section. Then, we will also remove the dotted outline upon the :focus and :active link.

 body {  background: url('images/micro_carbon.png'); } section {  margin: 150px auto 0;  width: 75px;  height: 95px;  position: relative;  text-align: center; } :active, :focus {  outline: 0; } 
Using Custom Font

For the button’s icon, we will be using a custom font from Font Awesome rather than an image. That way the icon will be easily style-able and scale-able through the stylesheet.

Download the font, store the font files (eot, woff, ttf and svg) in the fonts folder, and then place the following code on your stylesheet to define a new font family.

 @font-face {  font-family: "FontAwesome";  src: url("fonts/fontawesome-webfont.eot");  src: url("fonts/fontawesome-webfont.eot?#iefix") format('eot'),   url("fonts/fontawesome-webfont.woff") format('woff'),   url("fonts/fontawesome-webfont.ttf") format('truetype'),   url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');  font-weight: normal;  font-style: normal; } 
powericon

The power icon that we need for this button is represented in Unicode number F011; if you look closely at the HTML markup above, we have put this numeric character &#xF011; within the anchor tag, but since we haven’t defined the custom font-family in the button style, the icon is yet to be rendered correctly.

Further reading: Unicode and HTML: Document Characters

Styling the Button

First of all, we need to define the custom font-family for the button.

Our button will be a circle, we can achieve the circle effect using the border-radius property and set the value at, at least, half of the button’s width.

Since, we are using a font for the icon, we can easily set the color and add text-shadow for the icon in the stylesheet as well.

Next, we will also create a beveled effect for the button. This effect is quite tricky. First, we need to apply background-color: rgb(83,87,93); for the button’s color base, then we add up to four layers of box-shadows.

css3 on/off button
 a {  font-family: "FontAwesome";  color: rgb(37,37,37);  text-shadow: 0px 1px 1px rgba(250,250,250,0.1);  font-size: 32pt;  display: block;  position: relative;  text-decoration: none;  background-color: rgb(83,87,93);  box-shadow: 0px 3px 0px 0px rgb(34,34,34), /* 1st Shadow */   0px 7px 10px 0px rgb(17,17,17), /* 1nd Shadow */   inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */    inset 0px -12px 35px 0px rgba(0, 0, 0, .5); /* 4th Shadow */  width: 70px;  height: 70px;  border: 0;  border-radius: 35px;  text-align: center;  line-height: 79px; } 

There is also a larger circle in the outside of the button and we will be using the :before pseudo-element for it rather than adding extra markup.

before pseudo
 a:before {  content: "";  width: 80px;  height: 80px;  display: block;  z-index: -2;  position: absolute;  background-color: rgb(26,27,29);  left: -5px;  top: -2px;  border-radius: 40px;  box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),   inset 0px 1px 2px rgba(0, 0, 0, 0.5); } 

Further reading: CSS :before and :after pseudo-elements (Hongkiat.com)

Indicator Light

Under the button, there is a tiny light to designate the Power On and Off status. Below, we apply red for the light’s color because the power is initially OFF, we also add box-shadow to imitate the gleam effect of the light.

indicator
 a + span {  display: block;  width: 8px;  height: 8px;  background-color: rgb(226,0,0);  box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  0px 0px 3px 2px rgba(226,0,0,0.5);  border-radius: 4px;  clear: both;  position: absolute;  bottom: 0;  left: 42%; } 

The Effect

At this point our button starts looking good and we only need to add some effects on it, for instance, when the button is ‘being’ clicked on, we want the button to look like it’s being pressed and held down.

To achieve the effect, the first box-shadow in the button will be zeroed and the position will be lowered a bit. We also need to adjust the other three shadows’ intensities a little to match the button position.

button pressed
 a:active {  box-shadow: 0px 0px 0px 0px rgb(34,34,34), /* 1st Shadow */   0px 3px 7px 0px rgb(17,17,17), /* 2nd Shadow */   inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */    inset 0px -10px 35px 5px rgba(0, 0, 0, .5); /* 4th Shadow */  background-color: rgb(83,87,93);  top: 3px; } 

Furthermore, once the button has been clicked, it should remain pressed down and the icon should ‘shine’ to indicate that the power is ON.

To achieve such an effect we will target the button using the :target pseudo-class, then change the icon’s color to white and add a text-shadow with white color as well.

button power-on
 a:target {  box-shadow: 0px 0px 0px 0px rgb(34,34,34),   0px 3px 7px 0px rgb(17,17,17),    inset 0px 1px 1px 0px rgba(250, 250, 250, .2),    inset 0px -10px 35px 5px rgba(0, 0, 0, .5);  background-color: rgb(83,87,93);  top: 3px;  color: #fff;  text-shadow: 0px 0px 3px rgb(250,250,250); } 

Further reading: Using :target pseudo-class

We also need to adjust the box-shadow in the circle outside the button, as follows.

 a:active:before, a:target:before {  top: -5px;  background-color: rgb(26,27,29);  box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),   inset 0px 1px 2px rgba(0, 0, 0, 0.5); } 

The light indicator will turn from the default red to green color to emphasize that the power is ON already.

button turn green
 a:target + span {  box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  0px 0px 3px 2px rgba(135,187,83,0.5);  background-color: rgb(135,187,83); } 
Transition Effect

Lastly, to make the button’s effect run smoothly, we will also apply the following transition effect.

This snippet below will specifically add the transition to the color property and the text-shadow for 350ms in the anchor element.

 a { transition: color 350ms, text-shadow 350ms;  -o-transition: color 350ms, text-shadow 350ms;  -moz-transition: color 350ms, text-shadow 350ms;  -webkit-transition: color 350ms, text-shadow 350ms; } 

This second snippet below will add the transition for the background-color and box-shadow property in the light indicator.

 a:target + span { transition: background-color 350ms, box-shadow 700ms;  -o-transition: background-color 350ms, box-shadow 700ms;  -moz-transition: background-color 350ms, box-shadow 700ms;  -webkit-transition: background-color 350ms, box-shadow 700ms; } 

Final Result

We have come through all the styles we need, now you can see the final result live as well as download the source file from the links below.

Bonus: How to turn it off

Here comes the bonus. If you have tried the button from the above demo, you’ve noticed that the button can only be clicked once, an that’s to turn it on, so how do we turn it off?.

Unfortunately, we have to do it with the jQuery, but it is really simple as well. Below is the all the jQuery code we need.

 $  (document).ready(function(){  $  ('#button').click(function(){  $  (this).toggleClass('on');  }); }); 

The snippet above will add the class ON in the anchor, and we used the toggleClass function from jQuery to add it. So, when the #button is clicked on, the jQuery will check whether the class ON has been added or not: when it is not, the jQuery will add the class, and if it has been added, the jQuery will remove the class.

Note: Don’t forget to include the jQuery library.

Now we have to change the Style a little bit. Simply replace all the :target pseudo-element with the .on class selector, as follows:

 a.on {  box-shadow: 0px 0px 0px 0px rgb(34,34,34),   0px 3px 7px 0px rgb(17,17,17),    inset 0px 1px 1px 0px rgba(250, 250, 250, .2),    inset 0px -10px 35px 5px rgba(0, 0, 0, .5);  background-color: rgb(83,87,93);  top: 3px;  color: #fff;  text-shadow: 0px 0px 3px rgb(250,250,250); } a:active:before, a.on:before {  top: -5px;  background-color: rgb(26,27,29);  box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),   inset 0px 1px 2px rgba(0, 0, 0, 0.5); } a.on + span {  box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  0px 0px 3px 2px rgba(135,187,83,0.5);  background-color: rgb(135,187,83); } 

Finally, let’s try it in the browser.

The post Creating Sleek On/Off Button with CSS3 appeared first on Hongkiat.

Hongkiat

Find more wordpress web design articles here

Posted in Website Development

Latest website development News

If you are encountering problems finding photos for your website, there’s a simple solution you might consider. Use illustrations. The examples in this post will show you various ways to go about doing so

Sound reasonable? If you believe that to be true, when you start building your next website you’re going to have to ask yourself this:  

What kind of visual style do you want to use? 

You don’t have to reject photographs out of hand. That’s not the point. Other options are readily available should you want or need to take advantage of them.

You might choose to take a more abstract, creative, and illustrative approach. That’s one of the approaches we’ve taken when creating our huge selection of pre-built websites for BeTheme; a selection you’ll find to be both informative and inspirational.

Today, we’re going to present a selection of them along with a number of great websites that have creatively used illustrations as we explore seven good reasons to use illustrations to spice up your websites.

  1. When a photograph is unable to fully capture a complicated subject

You may have already discovered that for some brandsit can be terribly difficult if not impossible to find a photo that fully conveys a message as to what that brand is all about or what it does.Taking a photo of you at your keyboard doesn’t necessarily convey the fact that you are a great copywriter (or even a decent typist).

The BeCopywriter 2 pre-built site shows why an illustrative style can be a much better way to tell your story: 

The design is definitely worth a second look while the text conveys a simple, yet powerful, message.

How about looking for a photo that accurately describes what a recycling services company does? Not an easy task.

Check out WeRecycle

Clean air, clean water, clean neighborhoods thanks to everyone’s use of blue recycle bags or bins. This image gives a website visitor important insight as to what the company does. 

  1. When a brand has a unique look that requires a similarly unique website design approach

When discussing brands, you’re essentially talking about styles and personalities. One of the challenges owners of a given brand often have lies in finding out how to differentiate it from a competing brand that features a similar style.

A brand with a far-out style can be easier to work with, especially for a web designer who enjoys taking on far out design approach. One such a design approach is one that cleverly blends photographs with images, which is how BeTheme’s BeFoodTruck pre-built site handles it: 

As you might expect, the illustrations used are a unique choice for this type of industry, yet a food industry websitewould have a difficult time engaging customers without real photos of food.

Handwrytten uses a similar balance between real photos and attention-getting illustrations:

Here, the use of animated illustrations gives the homepage an added twist. It is a good example of a unique concept with a website to match.

  1. When a company wants to stand out by breaking with tradition; in this case, photo-strewn sites

Businesses in a given industry can be expected to have websites that are similar in style to other businesses in that industry. A business selling in-person experiences such as travel and hospitality businesses, rely heavily on photos to get their messages across.

This is to be expected. If you want your website to stand out among the lookalikes in a given industry, the use of illustrations is a good way to do it.

BeJourney 2 is a case in point: 

This site isn’tcompletely devoid of photos. There are just enough to tell a story that helps to get the message across.

The Bateau Mon Paris boat rental company’s site takes a comparable approach:

You can plainly see why this website’s main use of illustrations with its peekaboo photo caneasily engage its visitors.

  1. When a new company wants to leverage the style of a brand that consumers already trust

This approach can be somewhat challenging but can also be very effective. If you have a brand-new company your objective would be to create a website style that reminds visitors of a popular established brand.

This approach can help to erase any doubts a visitor may have as to whether your product or service is really up to the task. Stripe’s website style became a standard that many other software companies entering the same space have sought to emulate:

It’s not hard to see why this illustrative style, with its ingenious use of gradients has been copied for years.

Our BePay 2 site also emulates the trust-building Stripe style; with a unique spin.

The blue color is symbolic of trust and stability, and the site design makes a good use of illustrations and mobile application images.

  1. When a creator has an interesting story and work worth sharing

Showing photos of themselves or their teams is a practice some web developers and design agencies use to give their sites a personal touch.  While it can be nice to see who you might be working with, it’s even nicer to see what they are capable of doing for you.

Illustrations tend to be much better at showing what a business can do for its clientsand do so in a more exciting way that a photo can do.

The BeBand 5 pre-built siteuses illustrations and animations to give its site a 1980slook: 

Photos can’t always convey the style of music the band plays. Illustrations on the other hand, can make it relatively easy to do.

Artist Polly Kole took this unique approach to building their illustrative website:

Besides exhibiting a dramatic look, the site is also interactive. It gives the viewer a sense of actually being there and able to examine works of art up close and personal.

  1. When a company is selling a smart app or tool

What a smart app does can’t always be captured in a photo. The experience inside the smart app, tool, or resource is what counts.

This experience typically involves a solution to a problem which can in turn require managing a good amount of data. This is where illustrations tend to shine.

BeApp 6 cleverly uses data visualizations to get its point across:

Swiggy Labs builds products that solve big problems for consumers. Its site uses illustrations rather than a series of screenshots to show how these problems are solved: 

Drag the “Swiggy It” toggle to the right and you’re sure to agree that this is much more than photos or screenshots.

  1. When a brand’s target audience is children or, in many cases, their parents

Employing an illustrative style is a no-brainer since that children love cartoons and games (parents do too for that matter).

Add the fact that illustrations can be used to simplify an otherwise complex subject, like learning a language, and it’s not hard to see why their use can be so effective.

BeLanguage 3 is a language learning website:

You don’t need to understand Italian or Japanese to understand what this site is all about.

See Make Play is another site that effectively uses illustrations to strengthen its sales pitch is

The illustrations on this section of the home page are static images, but animated graphics elsewhere on the page combine to give the site a youthful quality and a lighthearted touch.

Will you use illustrations to style your website?

If you’re finding it’s a real challenge to use photos to tell your brand’s story and are open to considering a little less conventional design style, illustrations might be the right fit.

As you can see in the websites from BeTheme and the other examples given, illustrated websites are relatively common. Still, when you come across one, it tends to have a unique look that can draw you in. 

If you want to make your website really cause a stir and even bring smiles to people’s faces, try experimenting with an illustrated website style.

Admit it. You love cartoons as much as the next person.

Read More at 7 Reasons to Use Illustrations on Your Website – And Examples of How to Do It

Web Design Ledger

Posted in Website Dev

Latest website development News

Instagram is getting ready for National Voter Registration Day and so are we.

Tomorrow is September 22nd, which means that it’ll be National Voter Registration Day and Instagram has been coming out with some amazing stickers in celebration of that.

instagram voting stickers

One thing that I love about Instagram is that they’ve been encouraging people to get out there to vote, and they even have an election info and voting resource center.

instagram voting center

During this time, they’ve teamed up with six different amazing designers and artists who have been creating amazing voting registration stickers that users can add to their stories.

instagram voting stickers

D’Ara NazaryanReyna NoriegaHank WashingtonJing WeiBarry Lee, and Iliana Galvez all brought something a little different to the table and creating some amazing stickers. Some in English, some in Spanish, and all unique and vibrant in their own way.

instagram voting stickers

Of course, everyone is encouraged to use these stickers on their stories, no matter the size of their platform, to remind everyone to get out their and vote this year!

instagram voting stickers

If you go on your Instagram story, slide up on your screen and click on the sticker icons, you’ll see all these different voting registration stickers and you can choose the one that best fits your style.

instagram voting stickers

Voting is super important, and if you have time to scroll on Instagram, then you definitely have the time to register to vote!

instagram voting stickers

Make it a priority, go register to vote, and then share on your story some of these cool stickers to encourage your friends and family to get out there and do the same!

Let us know what you guys think about the stickers in the comments below and which one you’ll be using in your upcoming stories.

And of course, until next time,

Stay creative, folks!

Read More at Instagram Creates Voting Registration Stickers and Now I’m Officially Ready To Vote

Web Design Ledger

See more related website development posts here

Posted in Website Dev

Latest wordpress web design News

There are so many programming languages we can learn to develop many things such as the website, mobile application, and operating or embedded system.

Regardless of the language you learn, however, you will start it from the basic with the “Hello World”. “Hello World” has been commonly used to show the most basic syntax in a programming language. Let’s see how basic syntax are written in different languages like C, C++, C#, as well as in some modern languages like Kotlin and Swift.

30 CSS Puns That Prove Designers Have a Great Sense of Humor

30 CSS Puns That Prove Designers Have a Great Sense of Humor

The job of a web designer can be a real pain and frustrating one, but it is also… Read more

Rust
rust
Python
python
Kotlin
kotlin
Swift
swift
Elixir Lang
elixir
Go
go
C#
csharp
JavaScript
javascript
Dart
dart
F#
fsharp
Bash
bash
Scala
scala
Java
java
C++
cpp
R
r
Ruby
ruby
Erlang
erlang
PHP
php
C
c
Crystal
crystal

The post “Hello World” in 20 Programming Languages appeared first on Hongkiat.

Hongkiat

Find more wordpress web design articles here

Posted in Website Development