The Value Of Storyboarding For Product Design

The Value Of Storyboarding For Product Design

The Value Of Storyboarding For Product Design

Joshua Bumcrot

When you think of the word “storyboarding,” you probably think about film, media, and video creation. Historically, this is what storyboards have been used for, but who says we can’t use them for product development as well?

Storyboards are an effective communication and product development tool for digital marketers, content creators, user experience specialists, and product managers. In this article, I’ll teach you why storyboarding is valuable to the product development process, as well as why it can reduce interdepartmental miscommunications as well as overhead costs.

Below is a comic of a clear and common situation experienced by most companies. Words can only go so far as to effective explanations and miscommunications are are a common occurrence in the product development world. As you read the article, keep this image in mind and notice examples where storyboarding or visual communication may be able to prevent misunderstandings.

A classic corporate communication issue
The ‘Tree Swing’ communication problem (Large preview)

I’m going to set a scene that almost all tech companies experience on a regular basis:

Marketer Mary has an idea for a new product. Mary thinks this product will be a huge winner and goes to tech to have them build it.

Developer Diane hears Mary’s idea and tells her she will start working on it. As Diane continues to build out functionality, she realizes that the product will actually be much more efficient if she combines some of the parts and cuts out others. Diane finishes building the product and sends it over to Creative Chris.

Chris meets with Mary to discuss the product’s UI, where Mary explains her ideas. Chris gets to work. He starts to incorporate Mary’s ideas but quickly realizes that he has a much better and more interesting UI concept in mind, and eventually completes the product that way.

Once the project is complete, Mary is upset. The product has neither the functionality she asked for, nor does the UI allow the user to navigate the product properly.

All three departments go back to the drawing board to redo the product, and a significant amount of time and money has been wasted.

This common situation is not one person’s fault. Mary should have explained to Diane and Chris her clear end goal of the product and let them create it with the goal in mind. Diane should have understood that Mary was asking for specific functionalities for a reason and even though her product may have been more efficient, it’s useless if it doesn’t accomplish the desired end goal. Chris should have understood that even though Mary’s UI concept may not have been the most aesthetically pleasing, she had that UI for a reason. They should have worked together to create a concept that works for everyone.

There are a few ideas out there on how to attack common product development miscommunication problems, however, many have found the most successful solution is to create storyboards throughout the product development process.

A storyboard is a collection of cells, either in a linear progression or mapped out from a central idea that tells a story. Each cell can contain an image, a title, and a description that provides specific information to the reader about certain aspects of the story. Storyboards are meant to be simple representations of a larger concept, and force both its creators and readers to break down large complex topics into simple step by step subsections.

The Journey Of Entrepreneur Erin

The fictional, but based on real events journey of an entrepreneur using storyboards to help her and her team design, build, and iterate a her product.

Erin left her job at the big company she worked for and decided to pursue her dreams and start her own company. She already had an idea — SoLoMoFoo. SoLoMoFoo is an application to alert employees when free food is available in common areas — like conference rooms, shared office kitchens, or private offices. At her old job, she had noticed far too often that free food goes to waste due to lack of awareness and employees become disgruntled after hearing about free food that they had just missed. She decided that this problem needed a solution and that she was going to build it! First, she needed to figure out who exactly her target users would be.

A useful way to discover potential target users is to create personas. Erin decided she was going to map out a few of her target users and buyers and record some of their unique characteristics.

Creating Personas

Creating personas can help you step out of yourself. It can help you to recognize that different people have different needs and expectations, and it can also help you to identify with the user you’re designing for.

— Rikke Dam, Co-Founder of Interaction Design Foundation

Buyer and User Persona Examples
Personas for SoLoMoFoo (Large preview)

Erin knows that SoLoMoFoo will solve a problem that exists (the lack of awareness about free available food) — but who does this problem exist for? Who will be using her product? Before Erin starts to create storyboards she first has to build her personas. Generally, companies will have to focus on two different types of personas — user personas and buyer personas.

1. User Personas

These are fictional depictions of quintessential users fitting a certain criteria. Most products will try to limit the number of two or a maximum of three key user personas, and then focus the majority of marketing efforts on attracting these users. In SoLoMoFoo’s case, there are two key user personas that Erin has identified:

  • Baking Ben
    Ben is often bringing free food into the workplace to share with coworkers. He feels a little weird about emailing the entire office every time he brings in cupcakes so he would love an app that alerts his coworkers for him.
  • Hangry Hank
    Hank is constantly missing free food and is upset because of it. He feels less productive when he’s hungry and would be very interested in an app that alerts him anytime food is available.

2. Buyer Personas

Often times the intended user of your product is not the same as the intended buyer. In SoLoMoFoo’s business model, an entire company will purchase the SoLoMoFoo app and have their employees download it. This way everyone in the office will both be able to send alerts when they have free food, and receive alerts when they’re looking for food. Erin has decided that the most likely purchaser of SoLoMoFoo will be the HR department.

  • HR Hailey
    Hailey is the HR manager and has purchasing power. She is constantly looking for ways to improve employees’ morale and engagement. She is incentivized by her superiors to inspire energy and teamwork amongst the employees and has a budget to spend on applications or tools that will help her do this.

Creating these personas will help you step inside the shoes of both your users, and your buyers (if they are different). It helps you take a step back from your product and see it through the eyes of the people you are designing for.

To start creating the personas you need, there are several online resources you can use. For example, you can use a persona worksheet template like one of these:

HubSpot Persona Template
HubSpot persona template (Large preview)
Xtensio persona template (Credit to Xtensio) (Large preview)

Or use a persona creation tool like this one from HubSpot.

After personas have been created, the next step is to discover how these personas would come in contact with the problem you’re solving for, your product as a solution, and how the product would ultimately benefit their lives. A great way to step into your personas’ shoes is to create journey maps.

Journey Mapping

Customer journey mapping helps you to visualize your customer’s experience from the customer’s point of view, across all the different touchpoints they have with your brand as they seek to achieve a specific goal or goals.

— Tandem Seven Experts

Now that Erin has identified SoLoMoFoo’s key user and buyer personas it’s time for her to discover how these personas may come across her product, how they would use it, and what potential obstacles they may face throughout the process. A great way to do this is to create journey maps in the form of storyboards. Creating these journey mapping storyboards forces the product designer to walk in the user or buyers shoes and experience their product in a step-by-step manner.

User Journey Map
Customer journey map for SoLoMoFoo (Large preview)

A journey map storyboard can generally be broken down in six key components:

  1. Problem Experienced
    You have decided to create your product for a reason. You believe that your target users are experiencing a problem that they want solved. What is the problem that your product solves for?
  2. Solution Search
    After your persona has experienced the problem, you believe they will go searching for a solution. What methods will they use to search? These can be potential marketing channels to consider for your go-to-market strategy.
  3. Product Discovery
    During their search, your personas will come across your product and decide to start using it. How will they know this is the product for them? How will they get started? What barriers to entry might they face?
  4. Product Experienced
    The persona will now use the product and experience the intended objective. How do they use it? Can they use it immediately or are there other steps they need to take?
  5. Problem Alleviated
    After the intended product objective is attained the users problem is alleviated. Is this the same problem you were attempting to solve for at the beginning of your storyboard? What other potential problems might stem from your solution?
  6. Beneficial Outcome
    Now that persona’s problem is alleviate, why is their life better? What benefit did solving their problem bring to them and how will this improve their situation?

Need an example? Take a look at the illustration below:

Blank Stick Figure Template for Journey Mapping
Customer journey map template (Large preview)

In the case of Entrepreneur Erin, she has to consider how the lack of access to free food would affect HR Hailey, how she would research possible solutions, how she would come across SoLoMoFoo, how the SoLoMoFoo platform would be implemented at her place of work, and the potential benefits and timeline for those benefits that the SoLoMoFoo program would bring.

Buyer Journey Mapping
Buyer journey map for SoLoMoFoo (Large preview)

Creating journey maps in the form of storyboards is a useful way to humanize your buyers. It’s essential to remember that your users are not just numbers, but real people. Having a human character and their personal journey map story associated with each persona serves as a constant reminder that your users are people, and their needs are constantly changing.

These journey maps are not only a great external product development tool, but also a great way to minimize internal miscommunications.

By developing user personas and a customer journey map storyboard, everyone is able to visualize the steps a persona would take when engaging with your product. Creating journey maps and presenting them to coworkers allows team members to view your vision in a realistic and tangible way. Once every department understands your journey maps, you can all reach consensus on what the final product will be, and the development process can continue with everyone on the same page.

Storyboarding For UX Design

Storyboarding in UX is a tool which can help you visually predict and explore a user’s experience with a product.

— Nick Babich, Editor-in-chief of UX Planet

Basic UX Storyboard Mockup
User-experience storyboard (Large preview)

Entrepreneur Erin has successfully identified who she believes her target users and buyers are and how they will come in contact and use her product. Now it’s time for her to design the SoLoMoFoo user experience.

A useful way to step back and view your product from a user’s point of view is to create UX concepts through storyboarding. Creating storyboards, cell-by-cell, forces you to walk through every step of your UX process as a user. You can easily create multiple storyboards and try out different UX approaches to find the most efficient concept.

Erin wants to design SoLoMoFoo as a simple app so she reviews the personas and journey maps with her development and marketing team so they are clear on the product vision and together they start designing a user experience.

Creating these visual, tangible storyboards points out potential flaws in your UX — maybe you are forcing your users to take a long leap in one step and is not intuitive. Or, perhaps you have a few steps in your UX that could be combined into one thus eliminating superfluous actions.

According to UX Specialist, Luca Morovian:

“The UX storyboard can help visually predict and explore the user experience with a product. It visualizes how people would interact with a service or app. A UX storyboard can also help understand users current motivations and experiences connected to a certain problem.”

The power and value of storyboarding for UX comes in the creation process, letting you experience your product as a user, which allows you to best optimize for effective design and an improved conversion rate.

UX Storyboard with aspect arrows
User-experience storyboard with detailed descriptions (Large preview)

Finally, Erin has identified her target users and buyers, journey mapped their process, and built a streamlined UX — but the product development process is never over.

Storyboarding For Product Iterations And Improvements

Your people know your products better than anyone else so as long as you ask the right questions and use appealing storyboards, you can solicit reactions from them and start a discussion on whatever it is you need to find out.

— Andre Bourque, Entrepreneur

Erin has now identified who she thinks will use and buy her SoLoMoFoo, how they will come across the product and engage with it, and how the platform user flow will be designed.

As product developers are aware, a product is never fully complete. As technology changes, users adapt and so must your product. It’s important to constantly be referring back to your customer journey maps and user personas to make sure they are still accurate to your product. As you learn more about your users and user-case scenarios, your product should adapt accordingly.

When looking into product iterations, most product development teams have a tough time isolating the scope and deciding on which aspect of the current product they want to change. Storyboards can help product designers break their product into individual segments, which then allows them to specifically work on one aspect of a product without involving others.

Here are a few questions you may want to use as a guide:

  • Do you have a homepage conversion rate issue and want to modernize UI?
  • Are users not responding to your call-to-actions? Maybe your UX is too complicated? Or maybe people just aren’t purchasing your product, so are you really solving your perceived problem?

Having a storyboard of your product allows you to clearly see which parts of your product are responsible for which users’ actions. As a result, you can focus your iteration process on one aspect of your product instead of the product as a whole allowing for faster improvements and a cleaner process.

How To Begin

Now that you have the knowledge on how to start using storyboards in your product development process, it’s time to get started.

Here are some quick steps to help you make the first step:

  1. Identify the problem your product is solving for;
  2. Identify 1-3 user personas and 1-3 buyer personas (if different);
  3. Create journey maps for your personas;
  4. Design UX flows around your target audiences’ needs;
  5. Iterate, repeat, and improve!

In conclusion, you now have tools to start incorporating storyboarding into your product development process. From the beginning in identifying your target users all the way to the end in building a UX and iterating your product for improvements.

Using storyboarding through the product design process will help prevent simple miscommunications and allow both you and your team to have a clear concept of what your product will accomplish and look like. Start storyboarding out your new product idea today!

Smashing Editorial (yk, ra, il)
Unique Ways to Integrate Social Media into Web Design

There’s something very special about social media marketing and how it compels consumers to engage with it.

The Hootsuite 2018 Social Media Barometer says there are now over 3.2 billion global consumers who are active on social media. With such a large part of the population actively involved in social media, it’s no surprise that 67% of business executives surveyed in the report said that social media marketing improves their bottom line.

As a web designer, you can take that knowledge and keep doing what everyone else does with it:

  • Add “connect” icons to the header;
  • Stick “share” icons to the scrolling blog sidebar;
  • Embed videos from YouTube.

Or you can find unique ways to infuse your web design with a dash of social media.

Unique Ways to Use Social Media in Web Design

Obviously, I’m not telling you to turn your site into a social network, or a rolling masonry grid of photos. Instead, I would encourage you to think outside the box and consider how you can apply the strengths of social media creatively to your design.

Here are some real-life examples to inspire you:

1. Add Hashtags and Handles to the Design

When you think of what makes social media so distinct from other kinds of marketing, you’ll likely think of hashtags (#) and handles (@). They’re simple symbols that we used long before social media was invented and, yet, they now have a special significance for most of us.

If it makes sense for your brand (i.e. it has a younger audience and also happens to be active on social media), hashtags and handles can add a really cool touch to your web design.

Here is an example from the Nuevos Conductores website from Chevrolet Mexico:

This website pays homage to the “new drivers” Chevy is catering to and uses real people to make its case. This whole website is an interesting case study in and of itself, that not only uses real Chevy drivers’ Twitter handles, but also includes messages, hashtags, and images from their social accounts to build out the design and message.

Hashtags can be used for strictly self-promotional purposes as well and don’t need to have such a predominant placement in the design either. Take the Caribana Festival, for example.

You’ll find a small hashtag has been added to the left side of the website. It’s really subtle, but it’s ever-presence is likely to get noticed by fans of the festival who’ve come to the site to learn more and get tickets.

Then, there’s Popular Pays’ 2017 Year in Review that actually uses hashtags as a design element.

As users scroll to a new topic on the page, the hashtag changes. Think of it the way you’d use header tags in a blog post or on a page of a website. Only, this adds a bolder touch.

2. Use Notification Tickers

Because of how ubiquitous email and social media have become in consumers’ lives, there’s no denying the lure of the pending message notification. You know the ones I’m talking about.

Twitter does it:

LinkedIn does it:

Now, websites are doing it, too:

But this is an interesting use case from a friend of mine. The recognizable notification ticker isn’t telling visitors that there are messages waiting for them (though it has the same effect in drawing their eyes there). Instead, it’s saying, “Hey, we have five jobs waiting for you to apply to!”

I think there are other ways this could be used as well and it doesn’t have to be for users logged into a SaaS platform or membership site. As we move more and more away from things like pop-ups that can intrude on the user experience, I think we’ll see websites find unique approaches to share news and promo codes and things of that nature. This notification ticker would be an interesting way to do that.

3. Design a Timeline

With most social media feeds, we’re presented with a chronological timeline of our activity as well as those we’ve connected to. There’s something very appealing about this layout, in general, as it allows us to get a sense for someone’s story.

And what is a website if not the “story” about a brand and its mission to serve its consumers?

Dr. Pepper is a brand that’s been around a long time, but I bet a lot of its drinkers don’t know much about its history. Well, if they were to visit the Dr. Pepper website, they’d definitely learn more about where this soft drink came from and even catch a glimpse at old promotional content that some may recognize still today.

If you navigate to the History page on the site, you’ll encounter a timeline that briefly tells its story (nice and succinct just like most of our own social media “stories”):

Then, as you scroll down, you’ll encounter images that support the story, even playing on the nostalgia of having drank Dr. Pepper through the decades:

When you think about it, this is really no different than why we as consumers take photos and post them online. We want to share the highlight reel of our lives, and brands are able to do a similar thing with their websites.

4. Talk to Visitors with Quizzes and Chat UIs

Let’s face it: a lot of times, a website just feels like a digital flyer. “Here is our business. Learn about us and get in touch.” I believe that’s why so many people flock to social media nowadays; to learn more about and actually engage with businesses.

There are so many ways in which you can jazz up your web design to make the experience less lackluster, of course. A well-timed pop-up or an eye-catching animation can help. Gamified elements like timers are a nice touch, too.

Aside from placing a live chat on your website—that someone then has to man—there has got to be another way in which you can make your web design really talk to its visitors. Right?

One example I like is the John Frieda website. There is a Style Match page which allows visitors to talk to the site the way they would a hair stylist:

The quiz-style format allows visitors to input answers to questions they’d get when visiting a salon. In the end, they receive a personalized response and recommendations based on what they “talked” about.

A chat UI is also possible, though AI isn’t as simple of an implementation as something like a built-in quiz. Consider what makes the most sense for your web design and apply the interactive element accordingly.


Social media plays a big part in the modern business’s marketing efforts. But when it comes to websites, why is it that we only catch minor glimpses of it in the form of social share icons or the embedded news feed?

I would argue that we should think more abstractly about the strengths of social media. Then, apply those same unique principles and elements to web design to make it even better.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Rocking California’s “I Voted” Sticker in CSS for Election Day 2018

Oh hey, so tomorrow (tomorrow!) is Election Day here in the United States. We’re not in the business of making political endorsements or anything like that at CSS-Tricks, though we do endorse that everyone exercise their right to vote.

I did exactly that two years ago and posted a CSS rendition of the “I Voted” sticker that came with my California mail-in ballot.

See the Pen I Voted Sticker by Geoff Graham (@geoffgraham) on CodePen.

Fast forward to today, and I received a new sticker in the ballot sporting a fresh design:

Credit: Los Angeles Magazine (source)

I have a little time, so I’m going to try to re-create this sticker in CSS and walk through my thought process as I do it. Feel free to follow along if you’d like!

Breaking down the elements

Anytime I’m given a design of any kind, I like to pretend that my eyes have the superpower of X-ray vision and can see through the design as if it were a skeleton. This helps me start to think through how many elements I might use in the HTML.

OK, I think I’m going to start with something like this:

<!-- Main Circle -->

I Voted

  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item

I’m also going to throw in some base styles on the <body> so I can jump right into the rest of the sticker.

See the Pen “I Voted” Sticker HTML by Geoff Graham (@geoffgraham) on CodePen.

OK, nothing fancy so far. Really just looks like an unordered list with a heading with some terrible contrast between the content and background.

Working on the main sticker container

I think I’ll set up the container, which is the main circle. I’m going to use a fixed width and height, then use border-radius to round it out and into the shape of a circle.

Oh, and I ought to take care of that dark text and also add a border while I’m at it, so I can see what I’m doing.

.sticker { border: 20px solid #fff; border-radius: 100%; color: #fff; height: 400px; width: 400px; }

See the Pen “I Voted” Sticker HTML 2 by Geoff Graham (@geoffgraham) on CodePen.

The alignment is all off. Seems like a good spot to drop in some flexbox. This will allow me to center our elements horizontally. I think going with a single-column layout will take care of the vertical alignment.

.sticker { display: flex; flex-flow: column; align-items: center; border: 20px solid #fff; border-radius: 100%; color: #fff; height: 400px; width: 400px;

Yep, that helps.

See the Pen “I Voted” Sticker HTML 3 by Geoff Graham (@geoffgraham) on CodePen.

The last thing I want to do with the sticker for now is split it up into two halves — a top and a bottom. OK, so yeah, I have explicit elements for those in the HTML (.sticker__top and .sticker__bottom). I could use background-color on each element to make the top half blue and bottom half red, but I actually like the idea of using a linear gradient instead with a hard stop at the halfway mark.

.sticker { background-image: linear-gradient( to bottom, #080968, #080968 50%, #080968 50%, #F81616 50% ); border: 20px solid #fff; border-radius: 100%; color: #fff; display: flex; flex-flow: column; align-items: center; height: 400px; width: 400px;

Hey now, looking much sharper already!

See the Pen “I Voted” Sticker HTML 4 by Geoff Graham (@geoffgraham) on CodePen.

Time to deal with the top half

The top and bottom halves both occupy 50% of the sticker’s height, so the selectors can be combined to hit them both at once. Plus, I’m using flexbox, so I can simply flex those items.

.sticker-bottom { flex: 0 50%;

The top half is super weird. The way I see it, there’s two rows: one that contains the stars and stripes and the other that contains the heading. I’m going to turn to flexbox again to draw that layout.

.sticker__top { display: flex; flex-flow: row wrap; position: relative;

That’s not really going to change much at the moment because, well, I haven’t done anything to define elements for the stars and stripes in the HTML. I’m thinking of using the ::before and ::after pseudo elements on .sticker__top to make those. Again, they can be combined since they share some common properties and values.

.sticker__top::after { content: ""; height: 45%; /* Had to play with this a bit */ margin-top: 2em; /* Move away from the top edge of the sticker */

I’m going to cheat and use SVG for the stars. I mean, I guess that’s not cheating but it sorta feels like a deviation from a “pure” CSS way of doing things. Oh well.

That said, the stripes can definitely be made in CSS, again, with the same linear gradient background technique that’s used to split the sticker up into blue and red halves.

.sticker__top::before { background-image: url("/path/to/star/image.svg"); background-size: 35px; /* Magic number, depends on the image used. */
} .sticker__top::after { background-image: linear-gradient( to bottom, #F81616, #F81616 14%, transparent 14%, transparent 28%, #F81616 28%, #F81616 42%, transparent 42%, transparent 56%, #F81616 56%, #F81616 70%, transparent 70%, transparent 84%, #F81616 84%, #F81616 98%, transparent 100% );

That’s cool but, crap, things are out of order.

See the Pen “I Voted” Sticker HTML 5 by Geoff Graham (@geoffgraham) on CodePen.

I’m so thankful flexbox has an order property. I’m going to order the stars, stripes and heading at 1, 2 and 3, respectively,

.sticker__top::before { /* Same as before... */ order: 1;
} .sticker__top::after { /* Same as before... */ order: 2;
} .sticker__top h1 { order: 3;

If I stop here, the shape of the stars and stripes would be all off and the heading font would be sloppy.

border-radius is still a good way to get the stars and stripes to follow the same circular path as the sticker. The rub is that the bottoms of them have to maintain a flat edge. Since border-radius is a shorthand property, I’m going to drop border-top-left-radius on the stars and border-top-right-radius on the stripes.

It’s also worth noting that the stripes are a little wider than the stars. Maybe a 55-45 split? I don’t know. I’ll go with that and also use relative positioning on the stripes so I can push them to the right a bit to add separation between them and the stars.

.sticker__top::before { /* Same as before... */ flex: 45%;
} .sticker__top::after { /* Same as before... */ flex: 55%; position: relative; left: 10px;

The stars and stripes should flex with the size and width of the heading. I had to play with the font family, font size, letter spacing, and text transform to get something that looks pretty nice. In case you’re wondering, I wound up using Raleway for the font. It’s not precise, but close enough… at least to my untrained typographical eye.

.sticker__top h1 { font-family: 'Raleway', sans-serif; font-size: 4em; letter-spacing: 3px; line-height: 0; text-transform: uppercase; order: 3;

See the Pen “I Voted” Sticker HTML 6 by Geoff Graham (@geoffgraham) on CodePen.

Alright, so now the bottom half is making my skin crawl. Gotta tackle that.

Style up the bottom half

So much has already been done. The element for bottom half is already there in the HTML and is sized and positioned the way it should be. I think stripping out the bullet points of the list items and removing the left padding from the unordered list will clean things up a lot.

.sticker__bottom ul { list-style: none; padding: 0; width: 100%; /* Gotta take up the all of the bottom half */

But, that’s not going to cut it completely. I want that list to run horizontally, wrap lines, and to allow the list items to occupy open space. Yep, that sounds like flexbox again.

.sticker__bottom ul { display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: flex-start; /* same as before... */
} .sticker__bottom li { flex: auto; /* Flex as much as you need, guys */ margin: .75em; /* A liiiiitle breathing room between items */

See the Pen “I Voted” Sticker HTML 7 by Geoff Graham (@geoffgraham) on CodePen.

Now I have to make a few tweaks to .sticker__bottom. Specifically, I’m going to make it a little narrower (80% of the full sticker width) to get it off the edge of the sticker and then round its edges… though it might not actually need rounded corners since content is not going to overflow.

.sticker__bottom { border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; width: 80%;

And, now center the text. I guess that can go on the parent .sticker element since nothing on the sticker is technically left-justified.

.sticker { /* same as before... */ text-align: center;

Finally, I’m going to do my best to replace the dummy content with the “I Voted” translations. Let me go look those up.

(Heads over to Google Translate.)

Meh, I couldn’t find everything I needed. I’m sure it’s my lack of patience, but I wound up using some alternatives:

<ul> <li>Yo voté</li> <li>我投票</li> <li>나는 투표했다</li> <li>Bumoto ako</li> <li>Я проголосував</li> <li>मैने मतदान किया</li> <li>أنا صوتت</li> <li>Ik stemde</li> <li>Szavaztam</li> <li>ฉันโหวตแล้ว</li> <li>Anigu waxaan codsaday</li> <li>Tôi đã bầu chọn</li>

I’m going to have to play around with the font size and to get the same sort of alignment as the IRL sticker, which has rows of: 4 items, 3 items, 3 items, 1 item, 1 item.

Here’s where I landed:

.sticker__bottom ul { display: flex; flex-flow: row wrap; font-size: .75em; align-items: flex-start; justify-content: flex-start; list-style: none; padding: 0; width: 100%;

To get the last two items off the same line, I’m going to single out the second-to-last one using :last-child() so that both of them always flex 100%:

.sticker__bottom li:nth-child(11) { flex: 100%;

See the Pen “I Voted” Sticker HTML 8 by Geoff Graham (@geoffgraham) on CodePen.

Ding, ready!

I’m going to call this one baked. I know, I know. I should cross-browser test. It would also be wise to find graceful fallbacks for older browsers that do not support flexbox. And, some responsiveness would be nice to have. Maybe someone would like to take those up and share. 😉

Is this the best way to make the sticker? Probably not. For example, I bet there are some interesting things that can be done with clip-path instead of the way I fumbled through background gradients. And, if I had to do it again, I might even consider going with a CSS Grid layout on the parent because there are clearly opportunities to work in two directions instead of one.

But that’s the beauty of CSS. There’s more than one way to accomplish something.

Happy Election Day, friends. 🇺🇸

The post Rocking California’s “I Voted” Sticker in CSS for Election Day 2018 appeared first on CSS-Tricks.

Improve Animated GIF Performance With HTML5 video

Improve Animated GIF Performance With HTML5 video

Improve Animated GIF Performance With HTML5 video

Ayo Isaiah

Animated GIFs have a lot going for them; they’re easy to make and work well enough in literally all browsers. But the GIF format was not originally intended for animation. The original design of the GIF format was to provide a way to compress multiple images inside a single file using a lossless compression algorithm (called LZW compression) which meant they could be downloaded in a reasonably short space of time, even on slow connections.

Later, basic animation capabilities were added which allowed the various images (frames) in the file to be painted with time delays. By default, the series of frames that constitute the animation was displayed only once, stopping after the last frame was shown. Netscape Navigator 2.0 was the first browser to added the ability for animated GIFs to loop, which lead to the rise of animated GIFs as we know them today.

As an animation platform, the GIF format is incredibly limited. Each frame in the animation is restricted to a palette of just 256 colors, and over the years, advances in compression technology has made leading to several improvements the way animations and video files are compressed and used. Unlike proper video formats, the GIF format does not take advantage of any of the new technology meaning that even a few seconds of content can lead to tremendously large file sizes since a lot of repetitive information is stored.

Even if you try to tweak the quality and length of a GIF with a tool like Gifsicle, it can be difficult to cut it down to a reasonable file size. This is the reason why GIF heavy websites like Giphy, Imgur and the likes do not use the actual GIF format, but rather convert it to HTML5 video and serve those to users instead. As the Pinterest Engineering team found, converting animated GIFs to video can decrease load times and improve playback smoothness leading to a more pleasant user experience.

Hence, we’re going to look at some techniques that enable us use HTML5 video as a drop in replacement for animated GIFs. We’ll learn how to convert animated GIFs to video files and examine how to properly embed these video files on the web so that they act just like a GIF would. Finally, we’ll consider a few potential drawbacks that you need to ponder before using this solution.

Convert Animated GIFs To Video

The first step is to convert GIF files to a video format. MP4 is the most widely supported format in browsers with almost 94% of all browsers enjoying support, so that’s a safe default.

Support table on showing browser support for the MP4 video format
94% of all browsers support the MP4 format (Large preview)

Another option is the WebM format which offers high quality videos, often comparable to an MP4, but usually at a reduced file size. However, at this time, browser support is not as widespread so you can’t just go replacing MP4 files with their WebM equivalents.

Support table on showing browser support for the WebM video format
Internet Explorer and Safari are notable browsers without WebM support (Large preview)

However, because the <video> tag supports multiple <source> files, we can serve WebM videos to browsers that support them while falling back to MP4 everywhere else.

Let’s go ahead and convert an animated GIF to both MP4 and WebM. There are several online tools that can help you do this, but many of them use ffmpeg under the hood so we’ll skip the middle man and just use that instead. ffmpeg is a free and open source command line tool that is designed for the processing of video and audio files. It can also be used to convert an animated GIF to video formats.

To find out if you have ffmpeg on your machine, fire up a terminal and run the ffmpeg command. This should display some diagnostic information, otherwise, you’ll need to install it. Installation instructions for Windows, macOS and Linux can be found on this page. Since we’ll be converting to is WebM, you need to make sure that whatever ffmpeg build you install is compiled with libvpx.

To follow along with the commands that are included in this article, you can use any animated GIF file lying around on your computer or grab this one which is just over 28MB. Let’s begin by converting a GIF to MP4 in the next section.

Convert GIF To MP4

Open up a terminal instance and navigate to the directory where the test gif is located then run the command below to convert it to an MP4 video file:

ffmpeg -i animated.gif video.mp4

This should output a new video file in the current directory after a few seconds depending on the size of the GIF file you’re converting. The -i flag specifies the path to the input GIF file and the output file is specified afterwards (video.mp4 in this instance). Running this command on my 28MB GIF produces an MP4 file that is just 536KB in size, a 98% reduction in file size with roughly the same visual quality.

But we can go even further than that. ffmpeg has so many options that you can use to regulate the video output even further. One way is to employ an encoding method known as Constant Rate Factor (CRF) to trim the size of the MP4 output even further. Here’s the command you need to run:

ffmpeg -i animated.gif -b:v 0 -crf 25 video.mp4

As you can see, there are a couple of new flags in above command compared to the previous one. -b:v is normally used to limit the output bitrate, but when using CRF mode, it must be set to 0. The -crf flag controls the quality of the video output. It accepts a value between 0 and 51; the lower the value, the higher the video quality and file size.

Running the above command on the test GIF, trims down the video output to just 386KB with no discernable difference in quality. If you want to trim the size even further, you could increase the CRF value. Just keep in mind that higher values will lower the quality of the video file.

Convert GIF To WebM

You can convert your GIF file to WebM by running the command below in the terminal:

ffmpeg -i animated.gif -c vp9 -b:v 0 -crf 41 video.webm

This command is almost the same as the previous one, with the exception of a new -c flag which is used to specify the codec that should be used for this conversion. We are using the vp9 codec which succeeds the vp8 codec.

In addition, I’ve adjusted the CRF value to 41 in this case since CRF values don’t necessarily yield the same quality across video formats. This particular value results in a WebM file that is 16KB smaller than the MP4 with roughly the same visual quality.

Now that we know how to convert animated GIFs to video files, let’s look at how we can imitate their behavior in the browser with the HTML5 <video> tag.

Replace Animated GIFs With Video In The Browser

Making a video act like a GIF on a webpage is not as easy as dropping the file in an <img> tag, but it’s not so difficult either. The major qualities of animated GIFs to keep in mind are as follows:

  • They play automatically
  • They loop continuously
  • They are silent

While you get these qualities by default with GIF files, we can cause a video file to act the exact same way using a handful of attributes. Here’s how you’ll embed a video file to behave like a GIF:

<video autoplay loop muted playsinline src="video.mp4"></video>

This markup instructs the browser to automatically start the video, loop it continuously, play no sound, and play inline without displaying any video controls. This gives the same experience as an animated GIF but with better performance.

To specify more that once source for a video, you can use the <source> element within the <video> tag like this:

<video autoplay loop muted playsinline> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4">

This tells the browser to choose from the provided video files depending on format support. In this case, the WebM video will be downloaded and played if it’s supported, otherwise the MP4 file is used instead.

To make this more robust for older browsers which do not support HTML5 video, you could add some HTML content linking to the original GIF file as a fallback.

<video autoplay loop muted playsinline> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> Your browser does not support HTML5 video. <a href="/animated.gif">Click here to view original GIF</a>

Or you could just add the GIF file directly in an <img> tag:

<video autoplay loop muted playsinline> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> <img src="animated.gif">

Now that we’ve examined how to emulate animated GIFs in the browser with HTML5 video, let’s consider a few potential drawbacks to doing so in the next section.

Potential Drawbacks

There are a couple of drawbacks you need to consider before adopting HTML5 video as a GIF replacement. It’s clearly not as convenient as simply uploading a GIF to a page and watch is just work everywhere. You need to encode it first, and it may be difficult to implement an automated solution that works well in all scenarios.

The safest thing would be to convert each GIF manually and check the result of the output to ensure a good balance between visual quality and file size. But on large projects, this may not be practical. In that case, it may be better to look to a service like Cloudinary to do the heavy lifting for you.

Another problem is that unlike images, browsers do not preload video content. Because video files can be of any length, they’re often skipped until the main thread is ready to parse their content. This could delay the loading of a video file by several hundreds of milliseconds.

Additionally, there are quite a few restrictions on autoplaying videos especially on mobile. The muted attribute is actually required for videos to autoplay in Chrome for Android and iOS Safari even if the video does not contain an audio track, and where autoplay is disallowed, the user will only see a blank space where the video should have been. An example is Data Saver mode in Chrome for Android where autoplaying videos will not work even if you set up everything correctly.

To account for any of these scenarios, you should consider setting a placeholder image for the video using the poster attribute so that the video area is still populated with meaningful content if the video does not autoplay for some reason. Also consider using the controls attribute which allows the user to initiate playback even if video autoplay is disallowed.

Wrap Up

By replacing animated GIFs with HTML5 video, we can provide awesome GIF-like experiences without the performance and quality drawbacks associated with GIF files. Doing away with animated GIFs is worth serious consideration especially if your site is GIF-heavy.

There are websites already doing this:

Taking the time to convert the GIF files on your site to video can lead to a massive improvement in page load times. Provided your website is not too complex, it is fairly easy to implement and you can be up and running within a very short amount of time.

Smashing Editorial (ra,dm)
7 Secrets for Building Great Client Relationships

A colleague recently said to me, “I’ve heard that you’re a client relations guru. Are there any tips or tricks that you have for starting to build up those relationships?”

I always love a question like this—something that makes me stop and reflect. It’s true. Working with people and developing new (or existing) relationships is something I have a knack for. Even though I self-identify as an introvert, I love doing it because genuinely connecting with other people, hearing about their experiences, challenges, wins, quirky-cool talents, what winds their clock (and sharing in return)…well, it actually means something to me.

Was that the big secret? Or was there more?

Could I summarize everything I do to establish a client relationship—things I do without even thinking— and distill it into a list of best practices anyone can apply?

Short answer? Yes.

The next seven tips sum up my advice for building great client relationships within the context of project management.

Tip 1. Face Time is the Best Time

I know there are people who successfully work 100% remotely. I get that. But at some point, if you want to build and maintain great, deep, lasting connections with your clients, you need that human relationship phenomenon that only happens when you’re in person. It’s different. Good different.

I like to meet in person…when I just “feel” like we haven’t met in person in a while

As a general rule, I like to meet in person for an initial conversation, key deliverables, or when I just “feel” like we haven’t met in person in a while. It’s a gut thing, which you’ll need to develop with each new client relationship you cultivate.

Tip 2. Pick Up the Phone

Don’t hide behind email. In today’s day and age, depending on your personality, your workload, and that of those you’re in contact with, it can feel easier to just send an email.

Often email is a good choice, but be aware of the fact that live human-voice connection is like wholesome, all-natural medicine. Your job as a project manager is to nurture your relationships with the right dose of it. There’s no one-size-fits-all approach. It depends on how active the project is, your client’s personality, and the kind of work you’re doing. The important takeaway here is, make sure it’s part of your approach.

Tip 3. Money Always Needs to be a Verbal Conversation

At least the initial presentation of it does. That way you hear any concerns, questions, or confusion right away and nothing is left to fester if there’s a misunderstanding.

Money is a hot button for everyone so it’s best to treat it firmly, respectfully, bravely, and humanly

When delivering an initial quote/proposal to a client (or an estimate of new scope for a project I’m already working on), I schedule a call or an in-person meeting to walk them through things together. I tell them: we may only need 5 or 8 minutes ,but let’s reserve 45 minutes on our calendars in case we need to cover anything in more detail. Then I send my email, quote, proposal a few minutes beforehand.

Money is a hot button for everyone so it’s best to treat it firmly, respectfully, bravely, and humanly.

Tip 4. If a Client Asks You the Status of Something, You Dropped the Ball

As PMs, we should be anticipating what our clients might be wondering or worrying about in advance. The client should never have to ask, “What’s the status on <insert milestone, question, deliverable, etc.> anyway?”

Again, there’s no standard approach to use for all projects and clients. You’ll have to find the right balance, since you don’t want to over-communicate either. But here’s a couple of practical takeaways that might help:

  • a) Set expectations regarding when and how a client can expect to hear from you next. When you do this, underpromise and over-deliver. Will you be able to get them that document by Wednesday? Tell them Friday. Then when you deliver earlier, everyone’s happy. Tell them a reasonable (safe) time frame. Deliver on it, beat it, or own it and communicate in advance if circumstances have arisen to justify it coming later.
  • b) When in the thick of a big project, weekly (or even twice a week) check-ins are great for batching items to cover. This creates a structure for everyone and builds in accountability to ensure details don’t get missed.

Corollary to the regular check-in: Batching communication is great except when it’s time-sensitive or potentially impactful bad news. What’s bad news? Anything that will cost more, take longer, or be “less good” than the client was expecting. Depending on timing, it may still be OK to wait for your next scheduled check in (if it’s tomorrow). Otherwise, barring a reasonable effort/assessment of whether you can fix said situation so as to circumvent the delivery of any bad news, don’t wait.

Tip 5. Take Responsibility, but Don’t Panic or Beat Yourself Up

Mistakes will happen. When they do, own them. But, don’t emotionally collapse and beat yourself up. Every challenging situation, every bump is an opportunity to strengthen the relationship, build trust, and collaboratively solve a situation.

take responsibility for everything you…need to own, plus a little bit more

Listen to the client if they have a gripe. Thank them for their honesty. Convey that you will be talking to your team to gain further understanding and perspective on what’s happened and that you’re committed to resolving a situation in a way that’s okay for everyone. Remember that you have permission to be fair to yourself and the company you represent (as in, don’t completely fold and give away the store).

That said, take responsibility for everything you and your company really need to own, plus a little bit more. Be honest, transparent, respectful, firm, human, compassionate, and be smart about it.

Tip 6. Make it Personal

Become Friends. Be genuinely interested in the person. The best working relationships go beyond the work and have personal connection on a variety of levels. At an appropriate level and pace (that you have to figure out), allow that to happen. Don’t pry. Don’t force. Don’t be creepy. Just be genuine and human.

At some point, you should know your client’s favorite color, that they love dogs, or that they’re both happy and sad because their first-born is going off to college. And remember, it’s a two way street, so you’ll be sharing things about yourself too.

Tip 7. Manage Expectations

Back in the mid-90s, when my husband and I first founded Gravity Switch, a fellow consultant (named Ed) gave us some unsolicited advice. He said, “The secret to a successful project is managing client expectations.”

We laughed at this advice. Heartily. But not to his face.

Expectations? C’mon… What about great design? What about solid programming? What about projects coming in on budget and on time? You know, all the important stuff that PMs have to think about.

But duh!

What context defines that great design and the solid programming? What context defines whether something is on budget or on time?

I had this aha moment when I realized that Ed was totally right. By the way, I called him up (it was 15 years later) and told him of our folly, admitted laughing (heartily) at his advice, thanked him for sharing it, and apologized for being a little slow on the uptake.

Key takeaway: if you’re managing expectations, what’s interpreted as “great work” and “a great working experience” will follow.


Featured image via DepositPhotos.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Popular Design News of the Week: October 29, 2018 – November 4, 2018

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Is Front-end Development Having an Identity Crisis?


Celebrate Halloween with Ghoul-gle


Designers: ‘Stop Making Crap!’


Why do all Websites Look the Same?


There’s Always More Work to Do—but You Still Don’t Need to Work Long Hours


The Secret Dots that Printers Leave on your Prints


Project Management for Designers: Tips and Tools


Best Tools for Code Collaboration


2018 UX Tools Survey


Haska – A Codeless Back-end Services Platform


This is WordPress 5.0’s Default Theme (Twenty Nineteen)


Uilicious Snippets


Redesigning a Canadian Lifestyle App – A UX Case Study


Systemizing Color for Change


DNA of a Designer


Sketchnoting for UX Designers: WebExpo Conference Captured by Sketchnotes


The Little-Known Reason Pencils are Yellow


Google Wants to Hear from SEOs on the Search Result Listings


Accessibility in UX: How to Make Mobile App Design Work for Everyone


Build your own Horror Atmosphere


Don’t Have a Halloween Costume? Let an AI Pick One for You


Site Design: Justin Jackson


Design Portfolio Bingo


The Pitfalls of Running A/B Tests


The Future of Creativity at Adobe MAX


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

SmashingConf New York 2018: That’s What It Was Like

SmashingConf New York 2018: That’s What It Was Like

SmashingConf New York 2018: That’s What It Was Like

Bruce Lawson

As you may know, Smashing Magazine runs a conference — four a year, in fact. Last week saw me, Vitaly, Amanda and Mariona from the Smashing Team in New York, joined by our friend from Beyond Tellerand Marc Thiele, our amazing DJ, Tobi Lessnow, who wowed the crowd with his ‘sketchnotes to music’. And, of course, there was a full house of our Smashing Family from around the world: the Arctic and Antarctic were the only continents unrepresented.

We set up a world map against the wall where attendees could put a pin into it to show from which part of the world they were traveling from
Pins show where Smashing Conf attendees come from.

Although I’ve spoken at many Smashing Conferences, and attended even more, this was the first time as a member of the team. So I worked the Smashing booth with our amazing volunteer Scott Whitehead so I could meet attendees, and find out what they do, what they’re interested in and what drives them.

I didn’t attend all the talks, as there were many conversations to be had at the booth — but as usual, the audience collaborated on note-taking; here are the notes from Day 1 and notes from Day 2. And, of course, the videos are all online. Smashing Members got early access (as well as other benefits, such as a free monthly webinar and access to e-books, from USD $3 a month).

A view onto the Smashing audience taken from the stage
Our lovely Smashing audience enjoying the talks.

I was struck by how friendly the audience were, to conference staff, speakers and each other. I overheard strangers forming little huddles at our booth and giving each other career and technical advice, and during the breaks people were lining up to ask questions or simply chat with the speakers.

At Smashing Conferences, we don’t big up speakers to be Idols On A Pedestal — they’re developers just like the audience, who happen to have solved a problem that we think others face, so share that knowledge. We even managed an impromptu book signing session, as one of the speakers, Chiara Aliotta, designed the cover and illustrations for Smashing Book 6.

Cover designer Chiara Aliotta holding Smashing Book 6 in her hand in front of the Smashing books stand at SmashingConf NY
Chiara shows off her work for the cover of Smashing Book 6

It was great fun to meet so many passionate web professionals from all around the globe, some old hands and many just beginning their careers. Thank you for being there, thanks for supporting us, and thanks for buying all our books so I didn’t have to carry them home!

Conference Sketchnotes

We were blessed with having Gary Shroeder make live sketchnotes during the conference, and here are some of them:

A live-sketchnote from Dan Mall’s talk on collaboration between designers and developers, and how to overcome the dead drops by doing really brief design and prototpying cycles
Sketchnotes from Dan Mall’s talk. Image credit: Gary Schroeder
A live-sketchnote from Debbie Millman’s talk on branding and brands experience
Sketchnotes from Debbie Millman’s talk. Image credit: Gary Schroeder
A live-sketchnote from Josh Clark’s talk on how to use AI as design material in your everyday work.
Sketchnotes from Josh Clark’s talk. Image credit: Gary Schroeder
A live-sketchnote from Paul Boag’s talk on how to Encourage Action Without Alienating People
Sketchnotes from Paul Boag’s talk. Image credit: Gary Schroeder

You can also find a lot more sketchnotes on Twitter.

Conference Videos

Linked below are some of the videos recorded at Smashing Conf NY. If you’d like to be in the room with speakers like these next year, take a look at what we have planned for 2019!

Our Upcoming Conferences in 2019

Smashing Conferences are friendly, inclusive events for people who care about their work. No fluff, no fillers, no multi-track experience — just actionable insights applicable to your work right away. With live interactive sessions, showing how we all can better design and build for the web. Here’s the schedule for the next year:

🇺🇸 San Francisco, USA (Apr 16–17)
Better estimates and pricing, applying psychology to UX, design workflow, refactoring, moving to a static site setup, CSS Grid techniques, performance and deployment patterns for HTTP/2.
Explore all speakers and topics ↬

🇨🇦 Toronto, Canada (Jun 25–26)
Better contracts, naming conventions, security audit, responsive art direction, front-end architecture, rendering performance, CSS Grid Layout, PWA, Vue.js, Webpack.
Explore all speakers and topics ↬

🇩🇪 Freiburg, Germany (Sep 9–10)
Design process, better conversion, performance, privacy, JavaScript architecture, PWA, scalability, Webpack, multi-cultural design, AI.
Super early birds are now available ↬

🇺🇸 New York City, USA (Oct 15-16)
CSS Grid, Accessibility, Front-end Performance, Progressive Web Apps, HTTP/2, Vue.js, design workflow, branding, machine learning.
Super early birds are now available ↬

Smashing Editorial (ra)
9 Fictional Websites Reviewed

There’s a moment that every tech nerd in every corner of the tech industry knows all too well. It’s that moment when you see that some movie or TV show has decided that your area of tech is relevant to the story, and by golly they plan to butcher it in the cheapest and most simplified way possible.

(This is your yearly reminder that CSI: Cyber was a thing, and that NCIS once had two people type on the same keyboard to “hack faster”.)

Oh dear God…why?

Thankfully, the representation of web design hasn’t been nearly as ham-fisted as that of information security. Sure, there are plenty of badly designed websites in movies and TV, but it’s getting better. Some may hate to hear this, but we probably have pre-made templates and frameworks to thank for that, because it now requires less effort to create a passable-looking prop site.

For the heck of it, I went down memory lane (and did some Googling, if you must know) to list some of the best and worst web design that our fictional universes have to offer. Some of them exist only in fleeting screenshots of shows, while others have real, live builds up right now. Some exist in both worlds.

Here they are, for your enjoyment. (Note: Some of these are old, and not all have working HTTPS. Just sayin’.)

1. Chumhum

Ah, The Good Wife. Was it a bit soap-ish? Yes. Was it also littered with stunning performances by amazing actors? Was the sometimes-over-the-top drama balanced by interesting characters, and genuinely hilarious moments? Yes to all of that.

Protagonist Alicia Florrick represents a tech company or two in the show, and many plot points revolve around web technology and the information age. One of the most notorious examples is that of Chumhum, a Google stand-in that copies the dead-simple aesthetic, but adds a cuddly mascot. The screenshot featured here is of a live mockup that is integrated with DuckDuckGo, a search engine with a mascot of its own.

My ranking: I can’t fault the UX or aesthetics for much beyond maybe the small height of the text box. I mean, how complicated do you want your search?

2. Trask Industries

In X-Men: Days of Future Past, Trask Industries is a corporation dedicated to dealing with “the mutant menace”. For all that, their website looks like a fairly standard corporate presentation-style site with a heavy emphasis on background video and simple animation.

My ranking: It’s a bit JavaScript-heavy for my personal taste, but the aesthetic itself feels understated in a clam and professional way. I am gonna give it extra points just for the photos/video of Peter Dinklage, and say this is one of the better ones.

3. Masrani Global Corporation

The Masrani Global Corporation site (from Jurassic World) has a sort of low-key corporate feel like Trask Industries, and much less in the way of fancy flourishes. It feels a lot like a premade template.

My ranking: It’s rather middle-of-the-road. While perfectly serviceable, it feels like they spent about as much money refining the details of their site as they did on not letting dinosaurs eat people. It loses a couple more points for having a splash video. Seriously, who does that? People who are bad with dinosaur security, that’s who.

4. Pawnee

The City of Pawnee’s website (Parks and Recreation) is what you get when you use a government budget on the cheapest, oldest HTML 4 template you can find. It’s got illustrations, very small photos, very little in the way of typography, and even less in the way of layout.

My ranking: As a website, it’s terrible. And because it’s terrible, it’s the perfect prop. It’s exactly what you’d expect a small-town website originally built in the ‘90s (probably) to look like.

5. Pied Piper

Let’s bring it to the tech sector with Silicon Valley. This is Pied Piper’s website. It’s simple, it’s corporate, and it all looks exactly like it was designed by a developer who has a general idea of how modern websites look, but hasn’t practiced a lot.

My ranking: As a website, it gets the job done. What really sells that “designed by a developer” feel for me is the typography. It has all the basic elements of a good website without the polish you get with experience.

6. War of 1996

Ah Independence Day 2. It’s a perfectly mediocre movie with a website to match. The design is presentational and modern, but kind of stuck in the ‘90s. I feel like that’s appropriate, though, since web design and many other aesthetic disciplines might stagnate with interstellar war on the horizon.

My ranking: It loses points for auto-playing audio, even if it’s epic music and that fantastic Independence Day speech from the first movie. It’s alright, otherwise.

7. Save Walter White

The Save Walter White website (Breaking Bad) looks like it was built with GeoCities in mind. Since it’s supposed to have been built by Walter’s son, who is most decidedly not a professional. He just wants to save his dad. I think we can let this one slide.

My ranking: It’s awful. It’s ugly. That’s appropriate.

8. John Watson’s Blog

John Watson’s Blog was created to market the BBC’s Sherlock. While it certainly wasn’t a perfect show, they did pay great attention to detail in crafting the world. This would include what appears to be a standard blog theme that could run on any platform.

My ranking: It’s one more of those sites that I couldn’t call “pretty”, but it doesn’t need to be. It needs to hold words and make them readable.

9. Grade my Teacher

Last, and definitely least, we come to Grade my Teacher from How I Met Your Mother. This one doesn’t even warrant a ranking. It’s abominable. It’s an image mockup on a repeating background. Approximately half an hour of Photoshop work went into this, and then they called it a day.

Look, if it was just going to be a static prop (nothing wrong with that), why would they bother making it live? This low-effort “website” should have stayed purely fictional.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

5 Ways to Design for a Local Audience

In a recent post, I discussed how caution needs to be taken when designing websites for a global audience. Different cultures perceive things like color quite differently from one another. Devices that might be popular in one region of the world might not be used in another. And the customs each country has—even for something as seemingly insignificant as filling out a contact form—can vary greatly.

Needless to say, global web design needs to be greatly simplified and neutralized in order to appeal to a broader audience.

Now, local design techniques, on the other hand, require much more attention to detail and personalization. In this article, I want to discuss 5 ways in which web design can be more aptly handled for a local audience, be it within a single city, or nation.

How to Design for a Local Audience

When it comes to designing locally, your goal is to tap into a very targeted audience in a highly distinguished geographic area.

1. Prioritize Intent

In many cases, a website that targets local users is one that has a brick-and-mortar component. This means that you not only have to think about why your visitors have come to the site, but also how they intend on using it to complement the in-person experience (if at all).

As such, many websites designed for a local audience place all the essentials in the header and above-the-fold. This ensures that, if there’s no time to waste, your website isn’t responsible for it.

Let’s use Fusion Fitness Center as an example:

The header alone gives local members of the gym most of the information they’d likely come to the website for. This is part of the whole Google Micro-Moments proposition. The navigation is the next piece users see. Again, it doesn’t waste time with About Us pages, Team bios, and so on. While that information may exist somewhere on the site, the focus is on what this local business can do to facilitate the in-person experience for its local members.

And, if that’s not enough, the hero image at the top of the home page continues speaking to the local user. Never once does it falter and put the attention back on Fusion Fitness. It all remains on helping that user attain their goals.

2. Add a Map to the Home Page

For businesses that aim to drive virtual traffic to their website and physical traffic to their local property, a map is an essential piece to include within the design of your website. Feel free to get creative with it, too, so that it blends with the style of your site.

Here is an example from Foxwoods Resort Casino:

As you can see, it’s not the traditional Google Map you’ll find on websites. Instead, they’ve included a static greyscale image of their mapped location. The links within it then drive users to the relevant information they need.

3. Localize Content

Local consumers tend to have emotional connections to the area in which they live.

The nice thing about this is you don’t have to betray your brand’s color palette or sense of style in order to pull this off. Based on the kind of business you’re designing the website for, utilizing images or colors that are reminiscent of the local cityscape or landscape, home team, and so on isn’t too difficult.

Cervera Real Estate is a company in Miami that helps local consumers find a new home:

Take a look at that hero image. It’s beautiful, right? And it’s definitely one that is taken from the scenic Miami cityscape. But look a little closer. Notice how the orange hues within the sky—and even the animal sculpture on the deck on the right—play off of the orange in the logo? That wasn’t an accidental choice.

This image was selected (or custom-photographed) because of what it would do in terms of appealing to Miami residents as well as establishing a stronger brand identity that’s tied to the city.

Also, don’t forget that it’s not just visual content that needs to be localized. If you’re targeting an area with a specific dialect or jargon, make sure your writers account for that when developing content for your beautiful and local-friendly designs.

4. Create Local Pages

Businesses with multiple locations and unique teams and identities at each should have dedicated pages for them.

Slalom is a consulting firm with locations scattered all around the U.S. Each location has its own custom-designed and localized subdomain as this example from the Atlanta office demonstrates:

In addition to including an address for the location, this page includes:

  • An image of the Atlanta cityscape;
  • An introduction to the team;
  • Local customer case studies;
  • Job openings;
  • And more…

These local pages give you a chance to establish a unique identity for each location, helping prospects in those regions to develop stronger connections to the people and not just the brand.

5. Use Recognizable Trust Marks

Trust marks are an important part of convincing online shoppers, in general, to trust a website. But when it comes to convincing local users to believe in your brand, it’s not enough to include a Norton security seal or logos from big corporate partners on your site.

To impress a local audience, you need to use names and logos that mean something to them.

  • Local companies as advertising sponsors;
  • Case studies from other local businesses or residents;
  • Logos from local events your brand participates in;
  • And so on…

Lyons Group doesn’t commit its home page—or even most of its site—to talking at great length about how they’re a successful restaurant group in Boston.

Instead, it highlights dining establishments that exist within its family of restaurants. Boston residents know these establishments quite well, so leveraging these known “trust marks” is a smart move by the Lyons Group.

Designing with More Detail

While a local website might not have the ability to generate sales around the globe, this niche market does open up other opportunities you wouldn’t otherwise have. In fact, it allows you to do much more powerful and personalized things with design as you now have a clear audience to target and you can appeal directly to things like user intent and emotions.

The key here is to do your research, so that you can aptly impress visitors with design alone.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Symbolic Links for Easier Multi-Folder Local Development

You know how you open a “project” in a local code editor? I guess different editors have different terminology for it, but essentially what you are doing is opening a folder/directory and it shows you a sidebar full of files and folders you can navigate through and such.

Typically there is one parent folder, and everything else is within that folder. Right? Well, it doesn’t have to be! That’s where symbolic links come in.

Otherwise known as symlinks, they are like pointers to another place. While you don’t have to actually move the folder you are referencing, you can create a pointer to it that behaves as if you did.

You can create them right from the command line:

ln -s /path/to/original/ /path/to/link

You’ll get a link that looks like an “alias” on macOS. Ya know, the things you can make by right-clicking an item or going File > Make Alias. But they are different. In my experience, aliases tend not to work in code editors, but symlinks do.

Looks like an alias, but it’s really a symlink.

I was actually lazy (hey, I prefer GUIs for just about everything) and used Nick Zitzmann’s symboliclinker context menu plugin to help make the link I wanted (and allow me to make other ones super easy).

Why bother? I’ve had a handful of occasions over the years, but here’s one that just came up for me. I’m working on a WordPress theme, and there is a WordPress Functionality Plugin that goes with it. Ideally, I’d have just my theme folder open in my code editor (no need to have the entire WordPress root there, that would just slow my editor and make searching a mess). But I’d also like to have that plugin open at the same time, so in case I’m calling functions and such that the plugin controls, I can see both. But these folders are in totally different places…

No matter, I can put a symlink to the plugin in the theme. (You may want to .gitignore it, depending on your deployment setup and such.) Now I can search and find things in both places like I want:

I know that some editors have their own concept of this, like VS Code’s Multi-root Workspaces and how you can Project > Add Folder to Project in Sublime. But symlinks are a way to do the same thing but in a cross-editor and cross-system way that everyone can use!

The post Symbolic Links for Easier Multi-Folder Local Development appeared first on CSS-Tricks.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Consent to display content from Youtube
Consent to display content from Vimeo
Google Maps
Consent to display content from Google