Great Expectations: Using Story Principles To Anticipate What Your User Expects

Great Expectations: Using Story Principles To Anticipate What Your User Expects

Great Expectations: Using Story Principles To Anticipate What Your User Expects

John Rhea

Whether it’s in a novel, the latest box office smash, or when Uncle Elmer mistook a potted cactus for a stress ball, we all love stories. There are stories we love, stories we hate, and stories we wish we’d never experienced. Most of the good stories share structure and principles that can help us create consistent website experiences. Experiences that speak to user expectations and guide them to engage with our sites in a way that benefits both of us.

In this article, we’ll pull out and discuss just a few examples of how thinking about your users’ stories can increase user engagement and satisfaction. We’ll look at deus ex machina, ensemble stories, consistency, and cognitive dissonance, all of which center on audience expectations and how your site is meeting those expectations or not.

We can define a story as the process of solving a problem. Heroes have an issue, and they set out on a quest to solve it. Sometimes that’s epic and expansive like the Lord of the Rings or Star Wars and sometimes it’s small and intimate such as Driving Miss Daisy or Rear Window. At its core, every story is about heroes who have a problem and what they do to solve it. So too are visits to a website.

The user is the hero, coming to your site because they have a problem. They need to buy a tchotchke, hire an agency or find the video game news they like. Your site can solve that problem and thus play an important role in the user’s story.

Deus Ex Machina

It’s a term meaning “god from the machine” that goes back to Greek plays — even though it’s Latin — when a large, movable scaffolding or “machine” would bring out an actor playing a god. In the context of story, it’s often used to describe something that comes out of nowhere to solve a problem. It’s like Zeus showing up at the end of a play and killing the villain. It’s not satisfying to the audience. They’ve watched the tension grow between the hero and the villain and feel cheated when Zeus releases the dramatic tension without solving that tension. They watched a journey that didn’t matter because the character they loved did not affect the ending.

The danger of deus ex machina is most visible in content marketing. You hook the audience with content that’s interesting and applicable but then bring your product/site/whatever in out of nowhere and drop the mic like you won a rap battle. The audience won’t believe your conclusion because you didn’t journey with them to find the solution.

If, however, the author integrates Zeus into the story from the beginning, Zeus will be part of the story and not a convenient plot device. Your solutions must honor the story that’s come before, the problem and the pain your users have experienced. You can then speak to how your product/site/whatever solves that problem and heals that pain.

State Farm recently launched a “Don’t Mess With My Discount!” campaign:

Kim comes in to talk to a State Farm rep who asks about a Drive Safe and Save discount. First, for the sake of the discount, Kim won’t speed up to make a meeting. Next, she makes herself and her child hold it till they can get home driving the speed limit. Last, in the midst of labor, she won’t let her partner speed up to get them to the hospital. (Don’t mess with a pregnant lady or her discount.) Lastly, it cuts back to Kim and the agent.

State Farm’s branding and their signature red color are strong presences in both bookend scenes with the State Farm representative. By the end, when they give you details about their “Drive Safe and Save” discount you know who State Farm is, how they can help you, and what you need to do to get the discount.

It’s not a funny story that’s a State Farm commercial in disguise, but a State Farm commercial that’s funny.

Throughout the ad, we know State Farm’s motivations and don’t feel duped into liking something whose only goal is to separate us from our money. They set the expectation of this story being an ad in the beginning and support that throughout.

Another Approach

Sometimes putting your name upfront in the piece might feel wrong or too self-serving. Another way to get at this is to acknowledge the user’s struggle, the pain the user or customer already feels. If your site doesn’t acknowledge that struggle, then your product/site/whatever seems detached from their reality, a deus ex machina. But if your content recognizes the struggle they’ve been through and how your site can solve their problem, the pitch for deeper engagement with your site will be a natural progression of the user’s story. It will be the answer they’ve been searching for all along.

Take this testimonial from Bizzabo:

Emily Fullmer, Director of Global Events for Greenbook said, We are now able to focus less on tedious operations, and more on creating a memorable and seamless experience for our attendees.
Bizzabo solved a real world problem for Greenbook. (Large preview)

It shows the user where Greenbook was, i.e. mired in tedious tasks, and how Bizzabo helped them get past tedium to do what Greenbook says they do best: make memorable experiences. Bizzabo doesn’t come out of the woodwork to say “I’m awesome” or solve a problem you never had. They have someone attesting to how Bizzabo solved a real problem that this real customer needed to be fixed. If you’re in the market to solve that problem too, Bizzabo might be the place to look.

Ensemble Stories

Some experiences, like some stories, aren’t about a single person. They’re about multiple people. If the story doesn’t give enough attention to each member, that person won’t seem important or like a necessary part of the story. If that person has a role in the ending, we feel cheated or think it’s a deus ex machina event. If any character is left out of a story, it should change the story. It’s the same way with websites. The user is the story’s hero, but she’s rarely the only character. If we ignore the other characters, they won’t feel needed or be interested in our websites.

Sometimes a decision involves multiple people because a single user doesn’t have the authority to decide. For instance, Drupalcon Seattle 2019 has a “Convince Your Boss” page. They showcase the benefits of the conference and provide materials to help you get your boss to agree to send you.

You could also offer a friends-and-family discount that rewards both the sharer and the sharee. (Yes, as of this moment, “sharee” is now a word.) Dropbox does this with their sharing program. If you share their service with someone else and they create an account, you get additional storage space.

Dropbox offers an additional 250 MB of space for every friend you get to join their service.
You get extra space, you get extra space, and you get extra space (when you invite a friend). (Large preview)

But you don’t have to be that explicit about targeting other audiences than the user themselves. In social networks and communities, the audience is both the user and their friends. The site won’t reach a critical mass if you don’t appeal to both. I believe Facebook beat MySpace early on by focusing on the connection between users and thus serving both the user and their friends. MySpace focused on individual expression. To put it another way, Facebook included the user’s friends in their audience while MySpace didn’t.

Serving Diametrically Opposed Heros

Many sites that run on ad revenue also have to think about multiple audiences, both the users they serve and the advertisers who want to reach those users. They are equally important in the story, even if their goals are sometimes at odds. If you push one of these audiences to the side, they’ll feel like they don’t matter. When all you care about is ad revenue, users will flee because you’re not speaking to their story any longer or giving them a good experience. If advertisers can’t get good access to the user then they won’t want to pay you for ads and revenue drops off.

Just about any small market newspaper website will show you what happens when you focus only on advertisers’ desires. Newspaper revenue streams have gone so low they have to push ads hard to stay alive. Take, for instance, the major newspaper from my home state of Delaware, the News Journal. The page skips and stutters as ad content loads. Click on any story and you’ll find a short article surrounded by block after block after block of ad content. Ads are paying the bills but with this kind of user experience, I fear it won’t be for long.

Let me be clear that advertisers and users do not have to be diametrically opposed, it’s just difficult to find a balance that pleases both. Sites often lean towards one or the other and risk tipping the scales too far either way. Including the desires of both audiences in your decisions will help you keep that precarious balance.

One way to do both is to have ads conform to the essence of your website, meaning the thing that makes your site different i.e. the “killer app” or sine qua non of your website. In this way, you get ads that conform to the reason the users are going to the site. Advertisers have to conform to the ad policy, but, if it really hits on the reason users are going to the site, advertisers should get much greater engagement.

On my own site, 8wordstories.com, ads are allowed, but they’re only allowed an image, eight words of copy, and a two-word call to action. Thus when users go to the site to get pithy stories, eight words in length, the advertisements will similarly be pithy and short.

Advertisers and users do not have to be diametrically opposed, it’s just difficult to find a balance that pleases both.

Consistency

The hero doesn’t train as a medieval knight for the first half of the story and then find herself in space for the second half. That drastic shift can make the audience turn on the story for dashing their expectations. They think you did a bait-and-switch, showing them the medieval story they wanted and then switching to a space story they didn’t want.

If you try to hook users with free pie, but you sell tubas, you will get lots of pie lovers and very few tuba lovers. Worse yet is to have the free pie contingent on buying a tuba. The thing they want comes with a commitment or price tag they don’t. This happens a lot with a free e-book when you have to create an account and fill out a lengthy form. For me, that price has often been too high.

Make sure the way you’re hooking the audience is consistent with what you want them to read, do, or buy. If you sell tubas offer a free tuba lesson or polishing cloth. This’ll ensure they want what you provide and they’ll think of you the next time they need to buy a tuba.

That said, it doesn’t mean you can’t offer free pie, but it shouldn’t get them in the door, it should push them over the edge.

Audible gives you a thirty-day free trial plus an audio book to keep even if you don’t stay past the trial. They’re giving you a taste of the product. When you say, “I want more.” You know where to get it.

While not offering a freebie, Dinnerly (and most of the other bazillion meal kit delivery companies) offers a big discount on your first few orders, encouraging new customers to try them out. This can be an especially good model for products or services that have fixed costs with enticing new customers.

Dinnerly offers a discount on each of your first three meal kits.
Hmmm… maybe they should offer free pie. (Large preview)

Cognitive Dissonance

There’s another danger concerning consistency, but this one’s more subtle. If you’re reading a medieval story and the author says the “trebuchet launched a rock straight and true, like a spaceship into orbit.” It might be an appropriate allusion for a modern audience, but it’s anachronistic in a medieval story, a cognitive dissonance. Something doesn’t quite make sense or goes against what they know to be true. In the same way, websites that break the flow of their content can alienate their audience without even meaning to (such as statistics that seem unbelievable or are so specific anyone could achieve them).

112% of people reading this article are physically attractive.

(Here’s lookin’ at you, reader.)

This article is the number one choice by physicians in Ohio who drive Yugos.

(Among other questions, why would a European car driving, Ohioan Doctor read a web user experience article?)

These “statistics” break the flow of the website because they make the user stop and wonder about the website’s reputability. Any time a user is pulled out of the flow of a website, they must decide whether to continue with the website or go watch cat videos.

Recently, I reviewed proposals for a website build at my day job. The developers listed in the proposal gave me pause. One with the title “Lead Senior Developer” had seven years of experience. That seemed low for a “lead, senior” developer, but possible. The next guy was just a “web developer” but had twenty years of experience. Even if that’s all correct, their juxtaposition made them look ridiculous. That cognitive dissonance pulled me out of the flow of the proposal and made me question the firm’s abilities.

Similarly poor quality photos, pixelated graphics, unrelated images, tpyos, mispelllings, weird bolding and anything else that sticks out potato can cause cognitive dissonance and tank a proposal or website (or article). The more often you break the spell of the site, the harder it will be for clients/users to believe you/your product/site/thing are as good as you say. Those cat videos will win every time because they always meet the “lolz” expectation.

Conclusion

Users have many expectations when they come to your site. Placing your users in the context of a story helps you understand those expectations and their motivations. You’ll see what they want and expect, but also what they need. Once you know their needs, you can meet those needs. And, if you’ll pardon my sense of humor, you can both …live happily ever after.

Smashing Editorial (cct, ra, yk, il)
Introducing 15 Best New Portfolios, October 2019

All the signs are that web design is entering a phase of exuberance, with clashing colors, rapidly changing graphics, and dense layouts replacing the minimalism that’s dominated digital design for the last decade. Portfolios are beginning to adopt this maximalist approach, but never fear, for those who aren’t quote ready for full-on retina burn on a Monday in late October, we’ve included a few beautifully minimal sites for you to enjoy.

Hello Monday

Hello Monday’s site is utterly charming, with a delightful animation that I could watch for hours. The work section of the site is a masonry-style vertical grid, which is less easy to browse than you would expect, thanks to the number of projects. The best parts of this site are the little details: I love that they tell you how many days it is until Monday, and the way that hamburger menu slips away as you scroll is super-slick.

Bold

Bold’s portfolio is about sending a powerful message. It’s the website equivalent of huge shoulder pads, and an enormous, solid gold smartphone. The way the border expands from the featured images, giving you the sense of zooming into the project is inspired. It helps to have huge-name clients as social proof, but this site is excellent at inspiring confidence in the designers behind it.

Analog is Heavy

Analog is Heavy is a creative photography practice that works with design studios to hone brand messages with high-quality product photography. Its approach to a portfolio is a vertically aligned grid of images, and that’s it. Targeting design agencies means that they’re speaking to an audience of visually educated professionals, giving Analog is Heavy the freedom to let its work sell itself.

Athletics

Another big agency, with a client list to kill for, Athletics jumps right into fullscreen video case studies of its work for clients like IBM. One trend with many of these portfolios is that work is cherry-picked to be showcased and then less-exciting work is linked to below the initial presentation. In Athletics’ case this means an interesting grid of lower-profile, but equally exciting work.

Brittany Chiang

Brittany Chiang builds things for the web. How’s that for a no-nonsense approach? This great little site feels very app-orientated thanks to the dark-mode color palette and the monospaced typeface. Its a single-pager, which are increasingly rare these days, and the simplicity of it works really well. Brittany has out UXed plenty of dedicated UX designers, by being true to herself.

Shohei Takenaka

As the web drifts towards maximalism, it’s great that there are still calm, simple, minimalist masterpieces to admire. Shohei Takenaka’s site is beautiful, with restraint, attention to detail, and ample whitespace. The subtle underlines on the menu text, and the images protruding into the white space to encourage scrolling, as well as the way the color bands are grouped when you scroll, are all perfect examples of clever UI design.

Aristide Benoist

Aristide Benoist’s portfolio features some beautiful typography. It’s great to see a developer take an interest in the finer points of design. The all-caps sans-serif text is a little too much to cope with in large amounts, but here it works just fine. My favourite part of the site is the transition from thumbnail to case study. Hover over the list of projects and a little flag-like ribbon will appear, click on it and it expands into a full project image, delightful!

WTF Studio

WTF Studio’s portfolio is as in-yer-face as the name suggests. A front for NYC-based creative director Able Parris, the site slaps you in the eyes with color and animation the moment it loads. But scroll down past the anarchic introduction and you’ll find a series of projects for household names presented as individual case studies. It’s exactly what big brands like to see: creativity and safe hands.

Jim Schachterle

Jim Schachterle’s site takes an approach that we don’t normally see: he’s opted for a dark green background. That simple choice, alongside the carefully paired project shots make for a sophisticated, and distinct style. Unfortunately the choice of typeface doesn’t work in places, at 12px the detail in the design is lost altogether, swapping it out for a simpler sans-serif whenever the font-size was under 18pt would have been a better choice.

Swwim

Perhaps it’s the chilly Northern climate at this time of year, but this Saint-Tropez looking site for Swwim warms my heart. The rounded sans-serif is an interesting choice — most designers would aim for sharp lines to emphasize precision. I adore the logotype, and its frivolity is echoed throughout the site in section titles. The less-subtle animation feels a little forced, but the wave motion is enticing, and brand-appropriate.

Hadrien Mongouachon

Hadrien Mongouachon is a freelance developer, so it makes perfect sense for him to demo his skills front and center on his site. He’s opted for a variation of the highly-trendy liquid effect, and it works really well. I’m not convinced by the sideways type — it only works in print because you can tilt the page — and the usability is a little compromised by the click-hold action. Once you’re accustomed to the site, it’s fun to traverse.

Butchershop

Butchershop is another design agency relying heavily on a video reel to sell its brand work. What’s really interesting about this site, is all the things it does “wrong”: the logo mark is positioned top right instead of top left, the title of its homepage is “Home”. It keeps breaking with received wisdom, so either they know something we don’t, or they didn’t get the memo about UX being a thing — you decide which.

Nikolas Type

It’s rare that we get to enjoy a purely type-based portfolio, because design work is visual, but this minimal showcase is Nikolas Wrobel’s Type Foundry, Nikolas Type. Click through to the product pages and you can edit the preview text. Thanks to the foundry being a small independent, it’s able to show some lovely samples that bring the type to life, something that larger foundries often fail to do.

Jam3

It seems video (not static images) are now a must for any portfolio site. Agencies want companies to see real-world experiences, and understand what the working relationship is like. Jam3 is no exception, but scroll past the looping video and you’ll find a rigorously organized set of projects. The menu isn’t easy to locate, but I do like agencies opening up about their approach, and culture. Plus there’s a cool bubble effect hovering over the menu items.

New Land

There’s a tendency among motion graphics and video firms to be slightly mysterious about who they are, and what they do — perhaps it comes from the high-concepts of advertising. New Land’s target audience probably do know who it is, because this is the kind of company that you don’t hire without some prior-knowledge. Interestingly the site is geared around tablet and mobile preferred interactions, as if intended to be passed around a meeting.

Source
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 14, 2019 – October 20, 2019

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.

Visually Distorted – When Symmetrical UI Looks all Wrong

 

What I Learned from 6 Months Leading a Design System

 

10 Small Design Mistakes We Still Make

 

14 Layout Design Trends

 

Culrs Mac App

 

Color Mixer – A Simple Tool that Helps You Mix Two or More Colors

 

The Teletype Text Element Lives On… at Least on this Site

 

2019 Design Tools Survey

 

Why Does Modern Design all Look the Same (and Should It?)

 

How Ultra-Thin Lines in Web Design Can Create an Impact

 

CSS Circles

 

Debunking Color Contrast Accessibility Myths

 

Adobe Rolls Out Revamped Creative Cloud Desktop App

 

16 Hours to Launch — a Breakdown of How I Designed, Built and Launched a Product Over a Weekend

 

We’re not Designing for Screens

 

Why Consistent Writing Makes You a Better Designer

 

What Makes a Great Design Leader?

 

8 Essential Principles of Good Business Card Design

 

The Freelance Life

 

Practicing Ethical Design

 

When GoFundMe Gets Ugly

 

How to Interview Designers

 

Chill Out, Work Smarter & Enjoy the Coffee – Freelancing with Aron Leah

 

How Frontend Developers Can Empower Designer’s Work

 

Flash is Responsible for the Internet’s Most Creative Era

 

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

Source
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;}

Smashing Monthly Roundup: Community Resources And Favorite Posts

Smashing Monthly Roundup: Community Resources And Favorite Posts

Smashing Monthly Roundup: Community Resources And Favorite Posts

The Smashing Editorial

This is the first monthly update that the Smashing team will be publishing, to highlight some of the things we have enjoyed reading over the past month. Many of the included posts are sourced from the most popular links from our Smashing Newsletter. If you don’t get our newsletter yet, then sign up here to receive carefully curated links from the team every two weeks.

SmashingConf News

We’ve just wrapped up our final SmashingConf of the year in New York. Videos of the event will be on their way soon, but we have already published a write-up and all of the video from our Freiburg event held in September. You can find all of those in our post “SmashingConf Freiburg 2019”.

Smashing San FranciscoAlso, we’ve announced the dates for SmashingConf 2020! Would you like to join us in San Francisco, Freiburg, New York, or our new city of Austin? If so, get your tickets now at super early-bird prices, and keep an eye out for line-up announcements very soon.

We publish a new article every day, and so if you’re not subscribed to our RSS feed or follow us on social media, you may miss out on some brilliant articles! Here are some that our readers seemed to enjoy and recommend further:

  • How To Use Breadcrumbs On A PWA” by Suzanne Scacca
    If you’re worried that your PWA is going to be difficult to navigate without some guidance, put breadcrumbs to work. In this article, Suzanne explains just how.
  • Design Systems Are About Relationships” by Ryan DeBeasi
    Design systems can improve usability, but they can also limit creativity or fall out of sync with actual products. Let’s explore how designers and developers can create more robust design systems by building a culture of collaboration.
  • A Guide To New And Experimental CSS DevTools In Firefox” by Victoria Wang
    Ever since releasing Grid Inspector, the Firefox DevTools team has been inspired to build a new suite of tools to solve the problems of the modern web. In this article, Victoria explains seven tools in detail.
  • Editorial Design Patterns With CSS Grid And Named Columns” by Rachel Andrew
    By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids.

Best Picks From Our Newsletter

We’ll be honest: Every second week, we struggle with keeping the Smashing Newsletter issues at a moderate length — there are just so many talented folks out there working on brilliant projects! So, without wanting to make this monthly update too long either, we’re shining the spotlight on the following projects:

HTML Email

Can I Email…?

We all know and love caniuse.com. Unfortunately, if you wanted to test support for web standards in HTML Email, it wasn’t really easy. Until now. Inspired by the successful concept, Can I Email lets you check support for more than 50 HTML and CSS features in 25 email clients, and since the site only launched last month, more is already in the planning.

(Can I email…? launched by Rémi Parmentier and the team at Tilt Studio

Made for and by the email geeks community, the data that fuels the project is available on GitHub and anyone can contribute to it. A nice detail: the Email Client Support Scoreboard which is included ranks email clients based on how they support the features. A useful little helper for anyone who’s wrangling HTML email.

Email Design Inspiration

Standing out from the flood of emails that reach our inboxes every day is hard, not only for promotional campaigns but also for transactional emails and newsletters. So how about some inspiration from how others manage to spark curiosity and interest to save their emails from ending up in the junk-mail folder as a victim on the quest to inbox zero?

Email Love by Rob Hope
Email Love by Rob Hope

Curated by Rob Hope, Email Love showcases well-crafted emails that you can turn to for fresh ideas — a look inside the code of each email is included, of course. Exciting discoveries guaranteed!

Fonts

Tools To Circumvent Web Font Pitfalls

Web fonts are easy to implement, but they can have a significant impact on a site’s performance, too. To help you speed up the time to first meaningful paint, Peter Müller built Subfont. The command-line tool analyzes your page to generate the most optimal web font subsets and inject them into your page. Subfont currently supports Google fonts as well as local fonts.

Font Style Matcher by Monica Dinculescu

Speaking of web fonts: To prevent flash of unstyled text from causing layout shifts, you might want to consider choosing your fallback font in relation to your web font’s x-heights and widths. The better they match, the less likely your layout will shift once the web font is loaded.

Monica Dinculescu came up with Font Style Matcher to help find just that perfect fallback font. Before you opt for a fallback font, you might also want to check how well it is supported across different operating systems to not run into issues. Three small but mighty tools to circumvent some of the most common web font pitfalls.

A Tiny Guide To Variable Color Fonts

“The tech is new, the adventure is big!” If you look at the experiments which Arthur Reinders Folmer of Typearture did with variable color fonts, this quote truly hits the mark. Arthur uses variable color fonts to create animations that are not only awe-inspiring eye candy but also explore the full potential of the font technology.

Variable color fonts: How do they work?
Variable Color Fonts: How Do They Work?” by Arthur Reinders Folmer

They might allow little customization compared to SVGs, but variable color fonts are easier to implement and they offer a lot of room for creative adventures, too — using input from the microphone, camera, or gyroscope to adjust the variables and animate the illustrations, for example. Sounds exciting? Arthur put together a little guide in which he dives deeper into the tech behind his experiments. A fantastic overview of what’s possible with variable color fonts today.

Performance

Automating Image Compression

The transfer size of requested images has grown by 52% on desktop and 82% on mobile within the last year — with over half of the median page weight accounting for imagery. These are figures that once again make clear how crucial it is that images are optimized before they hit production. Now, wouldn’t it be handy if you could automate the compression step?

Calibre’s new GitHub Action image-actions
Calibre’s new GitHub Action image-actions

Well, the folks at Calibre asked themselves the same question and built a GitHub Action that does exactly that: it automatically optimizes the images in your pull request — without any quality loss thanks to mozjpeg and libvips, so that no image accidentally skips compression. A real timesaver.

Accessibility

Accessibility Support

There are many different ways that assistive technologies interact with browsers and code. Since it’s still not possible to fully automate screen readers and voice control softwares, we are left with having to do manual tests. And that’s where a11ysupport.io comes into play.

a11ysupport - Accessibility Support
Accessibility Support by Michael Fairchild

Originally created by Michael Fairchild, this community-driven website aims to help inform developers about what is accessibility supported. It’s a project that is active and contributions are always welcome, so start testing away!

Button Contrast Checker

Do your buttons have enough contrast? The Button Contrast Checker built by the folks at Aditus helps you find out. Enter your domain and the tool tests if the buttons on the site are compliant with WCAG 2.1.

Button Contrast Checker
Button Contrast CheckerButton Contrast Checker by Aditus

To cater for realistic results, the checker does not only test the default state of the buttons but also takes hover and focus states as well as the adjacent background into account. A nice detail: Each time you scan a page, the results are stored in a unique URL which you can share with your team. A precious little helper.

Learning To Code

Taking Your Coding Skills To The Next Level

CSS animation, Grid, Flexbox… The web is evolving at such a fast pace that there’s always something new to learn. And, well, what better occasion could there be to finally dive into the topic you’ve been wanting to tackle for so long as with a fun little game?

Flexbox Zombies
Flexbox Zombies by Dave Geddes

If you’ve always wanted to conquer deep space — and learn the basics of object animation in CSS along the way — the CSS Animation course by HTML Academy has some exciting tasks for you to solve. To help your CSS Grid skills grow and blossom, there’s Grid Garden where you use CSS to grow a carrot garden.

If zombies are more up your alley, try Flexbox Zombies. It’ll give you the expertise you need to survive the living deads — all thanks to your coding skills! Or try guiding a friendly little frog to its lily pad with Flexbox in Flexbox Froggy to finally get to grips with the Flexbox concept. Another cool Flexbox learning game that shouldn’t be left unmentioned is Flexbox Defense. Last but not least, if you’re struggling with CSS selectors, there’s CSS Diner to teach you how to select elements. Now, who said learning can’t be fun?

How To Write Better JavaScript

JavaScript is one of the most popular programming languages, and even after more than 20 years since it was born, it is constantly evolving. But how can you get better at it?

Practical Ways To Write Better JavaScript
Practical Ways To Write Better JavaScript” by Ryland Goldstein

Ryland Goldstein shares some of the top methods he uses to write better JavaScript — by using TypeScript to improve team communication and make refactoring easier or linting your code and enforcing a style, for example. As Ryland points out, it’s a continuous process, so take things one step at a time, and before you know it, you’ll be a JavaScript ace.

Learn Regex With Crosswords

If you’ve got a sweet spot for riddles and logic puzzles, then Regex Crossword is for you. Regex Crossword is a crossword puzzle game where the clues are defined using regular expressions — who said regex can’t be fun?

Hamlet puzzle
Regex Cross­word by Ole Michelsen and Maria Hagsten

There are different difficulty levels for you to start to cut your teeth on an easy set of crosswords to learn the basics or put your skills to the test as the puzzles get bigger and more complex. A puzzle generator is also included, so if you feel like making up your own puzzles for others to unravel, there’s nothing to hold you back.

And, The Rest!

Tips To Master Your Next Tech Job Interview

The job-hunting process can be intimidating, especially if you’re just about to get your career started. To help you tackle the challenge well, Yangshun Tay put together the Tech Interview Handbook.

Tech Interview Handbook
Tech Interview Handbook by Yangshun Tay

This free resource takes you through the entire process; from working on your resume to negotiating with the employer once the interview has ended, while curated practice questions get you fit for both the technical and behavioral questions that might pop up along the way. A good read, not only for prospective web professionals.

Behind The Scenes Of Design Teams

While many companies are driven by features and technology, over the last years it’s rare to find debates about the importance of design. It’s reflected in publicly announced case studies, design systems, large scale design overhauls, and most recently in dedicated pages for design teams — be it Uber, Google, Spotify, Medium, Dropbox, Slack, Amazon or AirBnB.

Behind The Scenes Of Design Teams
Image credit: Intercom

Recently, Intercom has announced Intercom.Design, a resource dedicated to its design teams, products, processes and public case studies, including internal UI recommendations and expectations from different product and content designer levels. Wonderful sources of inspiration to improve your design team and explore behind the scenes of how products are designed and built. (Thanks for the tip, Kostya Gorskiy!)

Royalty-Free AI-Generated Faces

100,000 photos of faces of different age, gender, and ethnicity. What doesn’t sound like anything groundbreaking, actually is, if the faces don’t exist but are products of artificial intelligence.

Generated Photos
Generated Photos by Generated Media, Inc.

The Generated Photos project did exactly that. With the help of AI, a team of 20 AI and photography professionals generated this impressive number of high-quality faces that you can download and use in your projects for free (for non-commercial purposes). But the plans go even further: the aim is to build an API that enables anyone to use artificial intelligence to generate interesting, diverse faces for their projects, mockups, and presentations — without bothering about copyright and distribution rights questions. Will this be the end of conventional stock photography?

Monochromatic Color Palettes Made Easy

If you’ve ever tried to generate a consistent monochromatic color palette, you know that this can be a boring task. After he once again messed around with infinite copy-paste commands to create a nice palette, Dimitris Raptis decided to change that. His solution: CopyPalette.

CopyPalette
CopyPalette by Dimitris Raptis

CopyPalette lets you create SVG palettes with ease. All you need to do is select a base color, the contrast ratio of the shades, and the number of color variations you’d like to have, and the tool generates a perfectly-balanced color palette that you can copy and paste into your favorite design tool. A true timesaver.

The Art Of Symbols

Since more than 40,000 years, humans have been using symbols to communicate complex ideas. And as designers, we still do so today.

Art of Symbols by Emotive Brand agency
Art of Symbols” by Emotive Brand agency

Art of Symbols, a 100-day project by the design team at Emotive Brand, set out to explore how ancient symbols inform contemporary brand design. After all, a lot of those symbols which are part of our vocabulary as designers today, already existed a long time ago, as early as in rock paintings and engravings even. If you’re curious to learn more about their origins and meanings and are up for some beautiful eye candy, this project will keep you busy for a while.

Smarter Patterns For Designing With AI

The power of artificial intelligence is huge, but with it also come ethical challenges and a lot of responsibility. Responsibility for the user who might be confused and scared by AI if a clear concept is lacking, who might want to choose the amount of AI they interact with, and who need to be protected against harmful practices.

Smarter Patterns by Myplanet
Smarter Patterns by Myplanet

Based on research of how AI is being used and understood today, the software studio Myplanet put together Smarter Patterns, a library to start a discussion about these topics and help designers tackle the challenges of AI in interface design. The resource currently features 28 patterns that empower designers to create meaningful AI experiences.

Instant Offline Access With Dash

If you’re one of those folks who simply cannot sleep on a plane and wished there was just a super-productive way to get some work done instead, you’re probably always on the lookout for tools that’ll get you through those flights even with spotty WiFi. Well, search no more — we’ve stumbled upon a pretty useful one!

Dash for macOS and iOS
Dash for macOS and iOS

In case you haven’t heard of it yet, Dash is a free and open-source API documentation browser that gives your iPad and iPhone instant offline access to 200+ API documentation sets and 100+ cheatsheets. Folks such as Sarah Drasner use it especially on the day before a long trip; all you need to do is download all the docs you need, and you’re all set! You can even generate your own docsets or request docsets to be included. Nifty!

A Collection Of Personal Sites

With the Internet ingrained in our day-to-day lives, what’s the best way to voice your own ideas, thoughts, and feelings? A personal site, of course! And because there are so many of them out there, Andy Bell decided to keep a collection of some so that folks can discover each other’s work and even receive updates from their RSS feeds.

Personal Sites by Andy Bell
Personal Sites by Andy Bell

If you’d like your site to join the collection, you’ll find simple instructions on GitHub that’ll appear in the list once your request has been approved. What a great way to find folks who share your interests and learn new ways of how to develop and design websites!


From Smashing With Love

A month can be a long time to stay on top of things, so please do subscribe to our bi-weekly newsletter if you still haven’t. Each and every issue is written and edited with love and care. No third-party mailings or hidden advertising — promise!

You can also follow us on Twitter, Facebook and LinkedIn — always feel free to reach out and share your projects with us! We love hearing from you!

Keep up the brilliant work, everyone! You’re smashing!

Smashing Editorial (vf, ra, cm, il)
How to Use Proven Industry Data to Guide Your Clients

As a web designer, you may be starting with little to no data of your own. It’s not until a website has launched (or relaunched) that you can start gathering real analytics on its performance. Even then, it can take awhile to draw any meaningful insights from it.

So, in many cases, what web designers are working with before and while they design a new website is industry data: audience insights; competitive research; keyword analysis; Google announcements; marketing surveys and reports.

For someone who builds websites day in and day out, it makes sense to watch industry insights closely. For your clients, though, it might not

For someone who builds websites day in and day out, it makes sense to watch industry insights closely. For your clients, though, it might not.

That’s because they come from a place where they make business decisions based on internal data — data about their audience, their location, their product, etc. They might use industry analytics as benchmarks, but not to drive something as important as their company’s direction.

Let’s take a look at why this issue might arise and how you can overcome it by showing how analytics from a website paired with industry data is the best solution for designing a website.

What if Your Client’s Analytics Conflict with Industry Data?

In 2015, Google announced that mobile searches had surpassed those on desktop. The news had everyone talking and eventually gave rise to trends like mobile-first, micro-moments, and voice UIs.

In the web design space, there was no direction to go in but mobile-first. That didn’t mean that desktop users were completely forgotten; it just meant that mobile needed to take a front seat when designing the user experience.

But let’s say you’re approached by a client who needs a redesign. They keep hammering home that they don’t want you to put too much effort into mobile since their analytics show that less than 9% of their traffic comes from mobile devices. The previous designer didn’t bother with mobile, so you shouldn’t either.

While it would be nice to give a definitive response to this, there are two possible reasons why their mobile traffic is so low:

  1. They’re targeting an audience that isn’t heavy on mobile users to begin with;
  2. The website was designed for desktop and so it doesn’t rank well for searches performed on mobile.

Now, you don’t want to brush your client off. Analytics are clearly important to your client, right? So what you need to do instead is broach the matter with facts.

Presenting Your Client with the Facts

There are a number of ways you can use hard facts to convince your clients that the direction you want to take their website is the right one.

1. Use Proof from Google

Mobile-first indexing officially became the way Google indexes and ranks all new websites in 2019. Even if your client believes that their audience primarily comes from desktop, it’s still important to play by Google’s rules in search if they want traffic from it.

If you really want to drive this point home, you could run their website through Google’s Mobile-friendly Test:

Seeing a result like the one the Yale School of Art gets would certainly help you strengthen your argument:

2. Use Proof from Their Own Google Analytics

While your client’s traffic mostly comes from desktop, it might be the previous designer’s choice to favor desktop that could be the reason for the low mobile numbers. If the website isn’t mobile responsive, let alone mobile-first, it’s not going to rank well.

That said, there might be more to the story than just, “We only get 8% of our traffic from mobile, so ignore it.”

Take your client to their Google Analytics and dig deeper into the Mobile tab.

You need to get them to focus on more telling analytics, like the bounce rate and average time on site.

Even if mobile traffic is lower (which you’ve already explained might be because the UI was designed for desktop) those users might be the ones that more favorably respond to the content on the site. And that’s ultimately what’s important here. They need visitors to look through the site and convert, not bounce away from it.

If you can use their own data to make the point that mobile visitors are a more worthwhile bunch to go after, it would make the decision-making process much easier.

3. Use Real Proof from Other Websites

Don’t forget to show them proof outside of Google.

Do you have case studies from clients you can share with them? If not, try to find examples from other designers or agencies to make your point. Make sure the websites are similar to theirs in terms of audience or goals, so they can see the correlation between the changes they made and what you’re proposing.

You can show them how:

  • A redesign from desktop to mobile didn’t just affect traffic, but conversions, too;
  • A move from mobile to PWA improved customer retention on an already well-performing site;
  • An adjustment of their SEO strategy increased visibility with mobile users and demonstrated that they were a worthwhile segment to target.

The Bottom Line

You want to paint this as a decision that’s in their best interest, not as something that’s going to cost them more money or that might compromise the amount of visitors they currently get.

A move to mobile (or any other data-backed change you’re proposing) will only help your client in the long run. Just make sure you show them that it’s the potent combination of on-site analytics and industry data that should drive their (and your) design decisions.

 

Featured image via DepositPhotos.

Source
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;}

Postmortem Of Gutenberg The Launch, So We Can Embrace Gutenberg The Product

Postmortem Of Gutenberg The Launch, So We Can Embrace Gutenberg The Product

Postmortem Of Gutenberg The Launch, So We Can Embrace Gutenberg The Product

Leonardo Losoviz

After 10 months of being released as WordPress’s new default editor, Gutenberg is still shrugged off by a sizable amount of people from the web development community, who frequently cite as reasons to disregard it its lack of accessibility support (even though major accessibility improvements have taken place), how slow it is (even though it is running much faster now), and several other grievances. This pessimistic reaction to Gutenberg is most evident in online articles demonstrating Gutenberg’s capabilities which, instead of eliciting a positive reaction from the readers, they mostly attract contempt (as reflected in a stream of negative comments).

Many people seem to be angry “at Gutenberg” (we will see in a while what Gutenberg actually is), expressing that Gutenberg should never have happened or, at least, never have been integrated to WordPress core as its default experience, or at least not so soon. Different people have different reasons to be opposed to Gutenberg, with some of their reasons being more personally significant than others. For instance, some people have seen their livelihoods jeopardized, having worked hard to specialize on a certain solution which, due to Gutenberg’s arrival, is in peril of disappearing (such as anyone working with this brand or that brand of page builders). I can truly understand why these people are angry at Gutenberg, and I sympathize with them.

However, I do also believe that being endlessly angered by Gutenberg and dismissing the whole of it — without even considering if it may be worth using after all — is not a sensible approach. When it was initially launched, I was quite opposed to Gutenberg, thinking that it was not ready, and this stance lasted for several months. However, I have lately found myself using Gutenberg more and more, and I can even claim that, nowadays, I’m actually enjoying it. While at the beginning I was a bit angered “at Gutenberg” myself too, I let my anger go away, and now I can actually benefit from it.

Through this article, I will attempt to change the narrative under which Gutenberg is most commonly depicted. I will enumerate what went wrong in the past, and describe what Gutenberg has been and what it is, from which I can give a leap of faith to present Gutenberg in a favorable light. I will also argue that Gutenberg already is a positive force, and as such, it deserves being given another chance (if you haven’t done so yet).

What Gutenberg Actually Is

From my point of view, the most important reason why Gutenberg is not more widely accepted is that, when people talk about Gutenberg, they equal it to not one but actually two entities (which are confused with each other), namely:

  1. Gutenberg, the launch;
  2. Gutenberg, the product.

Gutenberg as “the product” is the plugin/functionality itself. Gutenberg as “the launch” was the process that involved the initial development and release of Gutenberg, possibly starting when WordPress founder Matt Mullenweg introduced Gutenberg to the wider audience in June 2017 during WordCamp Europe 2017, and ending in early December 2018 when WordPress 5.0 was released with Gutenberg merged into it.

(Once the launch was over, a new stage started which continues until today: The “Gutenberg continuous delivery cycle”. However, this stage is very different from “Gutenberg the launch”, as there have been no serious issues with it, and as such it doesn’t produce any misconception towards “Gutenberg the product”. For this reason, there is no need to talk about it in this article.)

We must distinguish between the two entities, “the launch” and “the product”. As such, from now on, I hope that when we refer to “Gutenberg” it invariably means “Gutenberg the product”, and if we want to reference “Gutenberg the launch” then we must explicitly name it (possibly using any of its variations, such as “Gutenberg’s initial development/release” or similar phrases). Most importantly, we must refrain from mixing the launch and the product in the same bag: Mentioning any factor that contributed to Gutenberg’s disappointing launch as a reason to not use Gutenberg in our projects should be phased out, and Gutenberg as a product should be judged only against its own qualities. This is being fair to Gutenberg the product.

I believe that, while “Gutenberg the launch” has been justly criticized, the constant scorn aimed at Gutenberg the product has been unfair (even if it were justified), and that Gutenberg the product is, itself, a victim from the stained reputation conferred to the name “Gutenberg” during its frustrating launch. For instance, when searching for “Gutenberg” in the WordPress plugin directory, because the algorithm deciding the plugin ranking factors in the plugins’ rating, Gutenberg appears only around the 10th position. However, many of the 1-star ratings would not have taken place if Gutenberg had not been merged into core; had it been initially released as a plugin only, and waited until the most important bugs and issues (such as the lack of accessibility) had been resolved before merging to core, then its rating would today be higher.

If we are able to split apart the two entities (the launch and the product) and deal with them separately, then, on one side, we can do a postmortem of what went wrong during Gutenberg’s launch and feed this knowledge into the current continuous delivery cycle, so that the same mistakes will not be repeated (indeed, this seems to be happening already, as I will describe below); on the other side, we can allow ourselves to appreciate Gutenberg as a product, add it to our stacks, and hopefully benefit from it.

I will do exactly this, from my own point of view.

What Went Wrong During The Launch Of Gutenberg

In a single sentence, the team leading the process messed it up (that’s the polite way to say it).

WordPress 5.0 with Gutenberg merged into it was launched in early December 2018, just before WordCamp US. Launching it then was the wrong decision, for a very simple reason: Gutenberg was not yet ready. In particular, the accessibility situation was very dire, with Gutenberg being almost useless through accessibility devices such as screen readers, effectively making anyone depending on such devices unable to use the WordPress editor. And because the WordPress community is very vocal in protecting the rights of everyone (literally everyone) to be able to access the Internet, this rushed launch was not well received.

Matt Mullenweg (who was leading the release process) may have had good reasons to be adamant about launching on that date, which could have, for instance, made sense from a business perspective. However, it certainly did not make sense from a community perspective. Indeed, many community members felt betrayed, complaining that they had to hurry to test their clients’ sites even though they were on holiday. We can safely say that, for many people, such a premature launch was perceived as a wreck (even if the software was working properly, so no Y2K actually happened), which created unnecessary discontent, and which could have perfectly been avoided by either postponing the launch, or by first releasing Gutenberg as a plugin to be merged into core at a later, more stable stage.

Was the pain, frustration and disappointment inflicted in the community really worth the cost? I believe most people will say it was not. I absolutely think it was not. In my opinion, these kind of situations in which an action is taken against the will of the majority of the community members must be avoided in the future (unless there are really good reasons for it, even if not everyone agrees on them; if that was the case concerning Gutenber’s launch I do not know, since I’m unaware of any really good reason to justify it).

In his presentation during that same WordCamp US, Matt Mullenweg did acknowledge that mistakes were made during the launch of Gutenberg, and that he had learned the lesson so that these mistakes will hopefully not be repeated. I reckon we can accept his apology and trust that his decisions will be the right ones next time (even though new quarrels on equally-important topics have taken place since then). However, the damage is already done: A wound has opened up which may take time to heal, so the community will be less trustful until confidence in the WordPress leadership is fully restored.

Why Things Seem To Be Much Better Now

Now comes the good news: The state of affairs appears to have mostly taken a positive direction, with the improvements listed below already happening.

Improved Communication

One of the loudest complaints about the Gutenberg launch was the lack of communication by the leadership. Because no proper channels to manage the project and communicate its decisions were put in place (at least not in a comprehensive manner), it was difficult to have an accurate picture of the overall situation. (For instance, information by different authors or teams was published through different avenues, including unofficial ones such as personal blogs.)

This concern has been greatly improved. In particular, the amount of information in the make blogs (where the different communities interact to take decisions concerning WordPress for different areas, such as core, accessibility, design, internationalization, and others) and the frequency with which the information is updated have been increased, and every team holds a regular Slack-based meeting (mostly taking place on a weekly or biweekly basis) in which anyone with a WordPress.org user account can participate. As experienced by some community members, it is now possible to reliably follow the developments on some topic, and have enough information to be able to become involved.

The fallout from Gutenberg’s launch also prompted Matt Mullenweg to expand WordPress’s leadership with two new roles: an Executive Director, to oversee and direct all contributor teams in their work to build and maintain WordPress, and a Marketing & Communications Lead, to lead the marketing team and oversee improving WordPress.org, related websites, and all its outlets (unfortunately, the person assigned to this role quit not long after, so somebody else must be found to take over this position).

Triage Team Formed To Tackle Open Issues

During the initial development phase of Gutenberg, several people complained that existing bugs, which had accumulated into the thousands, should be fixed before venturing out into adding new functionality to WordPress.

In March this year, a triage team was formed to clean up the open issues in the WordPress Trac bug tracker. This is hard work that has been needed for many years. If ever finished, WordPress would then have the chance to switch from Trac to a more modern bug tracker, such as GitHub.

Accessibility Is Steadily Becoming A Non-Issue

Accessibility issues are being tackled in every new Gutenberg release, with version 6.3 providing the lionshare of improvements. At the current pace of improvement, the most outstanding accessibility issues (as reported in the Gutenberg Accessibility Audit) should soon be a part of the past.

Judging Gutenberg On Its Own Merits

Now that we have split Gutenberg the launch from Gutenberg the product, we can proceed to analyze Gutenberg as a product and decide if it is worth adding to our application stack, based solely on its own merits and shortcomings. Many people do rightfully point out Gutenberg’s problems as the reason to not trust it (instead of focusing on the failed launch). However, Gutenberg has been improving by leaps and bounds, and many of the criticized issues may have been solved or may be on the brink of being solved. As such, the negative assessments should have a date of expiry and be re-evaluated. If we can give Gutenberg a new try and see where it stands nowadays, we may appreciate that, after all, it is not so bad. In my opinion, Gutenberg deserves a warmer welcome than it currently gets.

I am amazed that Gutenberg is still being compared to the previous way of editing content in WordPress (mainly through the tinymce, but also shortcodes, widgets, and others), arguing that it is more difficult to code through Gutenberg. This may be true, but it is also missing the point: Gutenberg is not here to provide a new way to code our application, producing the same features as in the past; instead, it is here to greatly enhance what can be done, offering to add features to our applications that could only be dreamt of in the past. Also, Gutenberg is not another page builder. Indeed, comparing Gutenberg to Divi or Beaver Builder is similarly missing the point, because it is like comparing a Victorinox to a regular knife: Yes, you can do site/page building with Gutenberg (actually not yet, but it is already a work in progress), but that is just one of its many uses; there are several other uses which are initially hidden, but once you pull them up from their compartment and understand how they work, a new world of possibilities will be revealed. Below, I will describe some of these new possibilities that Gutenberg brings to the table.

First, let’s discuss what’s not so great about Gutenberg. The one thing where I believe Gutenberg can be truly considered detrimental is in the steep curve of learning of React (which is the JavaScript library Gutenberg is coded with). WordPress has always been very inclusive, enabling people from any background (not only coders, but also non-techies such as bloggers, marketing people, salesmen, and the like) to create a theme or plugin or launch a site. This is beyond doubt not the case anymore, and it is unfair to expect everyone to have to learn React to create a Gutenberg block (this is not necessarily the case, since we can also create blocks using other JavaScript libraries, and even without using JavaScript, such as through ACF blocks, however using React is the most logical option if only because Gutenberg is coded with it). The only argument that could justify this disadvantage is if it makes the experience better for the user. Let’s see if this can be considered the case.

As I argued in a previous article of mine, the block-based architecture from Gutenberg radically changes the way in which applications are built: Instead of thinking in HTML code, we can now think in terms of components as the unit for building the website. This architecture is more maintainable and resilient, since each component (or block) can be independently developed and tested, and because it is easily reusable it can lower down the cost of developing several applications. Indeed, the recent popularity of JavaScript libraries such as Vue and React can be greatly attributed to their support for components. It is a great feature that developers love and which, I believe, once you start coding with, there is no turning back.

In this same article, I also describe how Gutenberg could support the “Create Once, Publish Everywhere” strategy (also known as “COPE”), enabling to produce a single source of truth of content to feed to all of our applications, for whichever medium or platform they run on: web, email/newsletters, iOS/Android apps, VR/AR, home-assistants (like Amazon Alexa), and others. Because it makes the overall content management much simpler, COPE also enables to lower the costs of producing content for different platforms. When I first wrote my article, I was theorizing that it could be done. However, I have recently implemented COPE for WordPress, and it works like a charm! (Stay tuned for another article in which I explain how it works in detail.)

The combination of COPE and the WordPress APIs (WP REST API, WPGraphQL, and my own PoP API) will provide one compelling reason for managing all of our content, for all of our applications, through WordPress. The other compelling reason will be Gutenberg’s ease of use (which is not fully here yet, but at the current pace of development, will arrive sooner than later), enabling the end-user to create elaborate content in a very simple way.

We already have access to great new features, such a real-time preview of how the content looks like, copy/pasting from Google Docs with perfect formatting, creation of intricate grid layers with nested elements inside, and many others. We can also expect new blocks to deliver utterly-unexpected features we have never imagined. My bet is that, through Gutenberg, WordPress is poised to become the digital assets manager of the web. (I’ve already written an article which will soon be published here on Smashing Magazine concerning this topic and my justification for this bold statement.)

In addition, Gutenberg allows to reuse code with other CMSs or frameworks (such as for Drupal and for Laravel), so that coding for WordPress needs not to be restricted to WordPress anymore, once again allowing us to lower the cost to develop a library that needs to run in as many systems as possible (for instance, a company providing an integration of its API for many different platforms and languages, such as Stripe, could benefit from it). Currently, only the client-side code (JavaScript and CSS) seems to be re-used, however, the server-side PHP code can also be re-used. (I will, once again, soon publish an article on Smashing explaining how to do just this.)

These features are already a reality, and we can expect Gutenberg to provide many more compelling reasons for its existence in the years to come (according to Matt Mullenweg, Gutenberg has currently implemented only some 10% of its potential).

We can finally attempt to reach a verdict on Gutenberg the product: My stance is that it establishes a higher barrier of entry to WordPress, which is regrettable, however, it also is a beautifully engineered piece of software which grants real new powers to WordPress and, due to WordPress’s prominence, to the web development world in general. And between this trade-off between costs and benefits, I believe that having Gutenberg as part of WordPress is more worth it than not. I hope you can agree with my opinion or, if not, at least the reasons against it can be based solely on the characteristics of Gutenberg as a product.

Conclusion

Gutenberg is currently at its best — having started to provide delightful user experiences that were not possible with WordPress before. However, not everyone is aware of this fact because not everyone can get down to embracing Gutenberg. This is an unfortunate circumstance because Gutenberg (as the product) should not be faulted for the mistakes that took place during the launch of Gutenberg. If we are able to split these two entities apart and treat each of them independently, we can then convincingly ask people to give Gutenberg another chance, suggesting that Gutenberg as a product is worth having, even if Gutenberg the launch was a failed process.

In this article, I did a postmortem of the failed Gutenberg launch, based on my own understanding of the events. Carrying out such a postmortem can help the community and the leadership make sure that those unfortunate mistakes do not happen again. After the postmortem, I proceeded to evaluate Gutenberg based on its own merits and declared my stance: I believe that Gutenberg is a great tool to have, and the WordPress community can certainly benefit from it. And because it will only be getting better and better, Gutenberg could even inaugurate a new golden era for WordPress.

Smashing Editorial (dm, yk, il)
How Frontend Developers Can Empower Designer’s Work

How Frontend Developers Can Empower Designer’s Work

How Frontend Developers Can Empower Designer’s Work

Sandrina Pereira

This article is mostly directed at you, dear Frontend Developer, who enjoys implementing user interfaces but struggles in aligning expectations with designers you work with. Perhaps you are referred to as the “UI Developer” or “UX Engineer.” Regardless of the title that you carry around, your job (and as well as mine) consists of more than breathing life into design files. We are also responsible for filling the gap between the design and development workflows. However, when crossing that bridge, we are faced with multiple challenges.

Today, I’d like to share with you practical tips that have helped me to collaborate more efficiently with designers in the past years.

I believe it’s our job, as UI Developers, to not only help designers in their journey to learn how the web works, but also to get to know their reality and learn their language.

Understanding UX Designers’ Background

Most of the UX designers (also referred to as Web Designers or Product Designers) out there took their first steps in the design world through tools like Photoshop and Illustrator. Perhaps they were Graphic Designers: their main goal was to create logos and brand identities and to design layouts for magazines. They could also have been Marketing Designers: printing billboards, designing banners and creating infographics.

This means that most UX designers spent their early days designing for print, which is a totally different paradigm from their current medium, the screen. That was their first big challenge. When dealing with print, designers cared about pixel alignment, but on a fixed area (paper). They didn’t have to contend with a dynamic layout (screens). Thinking about text breaking or states of interactions was simply not part of their job either. Designers also had complete freedom over colors, images, and typography without performance constraints.

Fortunately, there have been many efforts from the self-taught UX designers community, to teach development fundamentals, discuss whether designers should learn to code and understand how to best perform hand-off to developers. The same held true for the development side as well (more about that in a minute.) However, there is still friction happening between the two fields.

On the one hand, designers complaining each time an implementation doesn’t match their designs or feeling misunderstood when those are rejected by the developers without a clear explanation. On the other hand, developers might take for granted that designers know something technical when that might not be true. I believe we can all do better than that.

Embracing A New Way Of Thinking

The websites and apps that we are building will be displayed on a wide range of screen sizes. Each person will use them on multiple devices. Our common goal is to create a familiar experience across their journeys.

When we, as developers, think that designers are being picky about pixel alignments, we need to understand why that is. We need to recognize that it’s beyond fidelity and consistency. It’s about the sum of all the parts working together. It’s cohesion. We have to embrace it and do our best to accomplish it. Learning the fundamentals of design principles is a good starting point. Understand the importance of selecting the right colors, how the hierarchy works, and why white space matters.

Note: There’s an online course known as “Design for Developers” and a book called “Refactoring UI” — both are great to get you started. With these, you’ll be able to implement user interfaces with a sharp eye for detail and gain significant leverage when communicating with designers.

Magnifying Your Designers’ Awareness

You might take for granted that designers know the web as much as you do. Well, they might not. Actually, they don’t have to! It’s our responsibility, as developers, to keep them updated with the current state of the web.

I’ve worked with the two sides of this spectrum: Designers who think that anything can be built (such as complex filters, new scroll behaviors or custom form inputs) without giving browser compatibility a thought. Then, there are designers with assumptions about the “low limitations of the web” and just assume by themselves that something is impossible to implement. We need to show them the true possibilities of web design and not let the limitations hold back their skills.

Teach Them Code, Not How To Code

This seems contradictory but bear with me: knowing how to code is at the core of a developer’s job. We work in a fast-paced industry with new stuff popping up every day. It would be a hypocritical request from us to demand designers to learn how to code. However, we can help them to understand code.

Sit next to the designer you work with for 15 minutes and teach them how they can see for themselves whether the specs of an element are correct and how to change them. I find Firefox Page Inspector remarkably user-friendly for this.

Nowadays, it’s a joy to visualize layouts, debug CSS animations and tweak typography. Show them a ready-to-use code playground like Codepen for them to explore. They don’t need to know all CSS specs to understand how the layout paradigm works. However, they need to know how elements are created and behave in order to empower their daily work.

Include Designers In The Development Process

Invite designers to join you in the stand-up meeting, to be part of the QA process and to sit down with you while you refine visual details in your implementations. This will make them understand the constraints of the web and, soon enough, they’ll recognize why a feature takes time to implement.

Ask Designers To Include You In Their Design Process

You’ll realize that they do much more than “make things pretty”. You’ll learn more about the research process and how user testing is done. You’ll discover that for each design proposal they show to you, several other studies were previously dropped. When designers request a change, ask the reason behind it, so you can learn more about the decisions being made. Ultimately, you’ll start to understand why they are picky about white space and alignments, and hopefully, soon you’ll be too!

I find it crucial to treat frontend development as a core part of the design process, and design as a core part of the development process. Advocating a mindset where everyone gets the chance to be involved in the design and development cycle will help us all to better understand each other’s challenges and to create great experiences as well.

We May Use Different Tools, But We Must Speak The Same Language

Now that we are starting to understand each other’s workflow a little better, it’s time for the next step: to speak the same language.

Looking Beyond The Code Editor

Once you start to pay attention to your surroundings, you’ll be better equipped to tackle problems. Get to know the business better and be willing to listen to what designers have to say. That will make you a team member with richer contributions to the project. Collaborating in areas beyond our expertise is the key to creating meaningful conversations and mutual trust.

Using UI Systems As A Contract

Ask designers to share their design system with you (and if they don’t use one, it’s never too late to start). That will save you the bother of handpicking the colors used, figuring out margins or guessing a text style. Make sure you are familiar with the UI System as much as they are.

You might already be familiar with the component-based concept. However, some designers might not perceive it in the same way as you do. Show them how components can help you to build user interfaces more efficiently. Spread that mindset and also say bye-bye to similar-but-not-equal-names: header vs hero, pricing info vs price selector. When a piece of the user interface (a.k.a ‘a component’) is built, stride to use the same names so they can be reflected in both design and code files. Then, when someone says, “We need to tweak the proposal invitation widget,” everyone knows exactly what is being talked about.

Acknowledging The Real Source Of Truth

Despite the fact that the user interface is first created in the design files, the real source of truth is on the development side. At the end of the day, it is what people actually see, right? When a design is updated, it’s a good idea to leave a side note about its development status, especially in projects where a large number of people are involved. This trick helps to keep the communication smooth, so nobody (including you) wonders: “This is different from the live version. Is it a bug or hasn’t so-and-so been implemented just yet?

Keeping The Debt Under Control

So, you know all about technical debt — it happens when the cost to implement something new is high because of a shortcut we took in the past to meet a deadline. The same can happen on the design side too and we call it design debt.

You can think about it like this: The higher the UX & UI inconsistency, the higher the debt (technical and design). One of the most common inconsistencies is in having different elements to represent the same action. This is why bad design is usually reflected in bad code. It’s up to all of us, both as designers and developers, to treat our design debt seriously.

Being Accessible Doesn’t Mean It Has To Be Ugly

I’m really pleased to see that both we, as developers and designers, are finally starting to bring accessibility into our work. However, a lot of us still think that designing accessible products is hard or limits our skills and creativity.

Let me remind you that we are not creating a product just for ourselves. We are creating a product to be used by all the people, including those who use the product in different ways from you. Take into account how individual elements can be more accessible while keeping the current userflows clear and coherent.

For example, if a designer really believes that creating an enhanced select input is necessary, stand by their side and work together to design and implement it in an accessible way to be used by a wide range of people with diverse abilities.

Giving Valuable Feedback To Designers

It’s unavoidable that questions will pop up when going through the designs. However, that’s not a reason for you to start complaining about the designers’ mistakes or about their ambitious ideas. The designers are not there to drive you mental, they just don’t always intuitively know what you need to do your job. The truth is that, in the past, you didn’t know about this stuff either, so be patient and embrace collaboration as a way of learning.

The Earlier The Feedback, The Better

The timing for feedback is crucial. The feedback workflow depends a lot on the project structure, so there isn’t a one-size-fits-all solution for it. However, when possible, I believe we should aim for a workflow of periodic feedback — starting in the early stages. Having this mindset of open collaboration is the way to reduce the possibility of unexpected big re-iterations later in the road. Keep in mind that the later you give the designer your first feedback, the higher will be the cost for them to explore a new approach if needed.

Explain Abstract Ideas In Simple Terms

Remember when I said that performance was not a concern of the designers’ previous jobs? Don’t freak out when they are not aware of how to create optimized SVGs for the web. When faced with a design that requires a lot of different fonts to be loaded, explain to them why we should minimize the number of requests, perhaps even take advantage of Variable Fonts. Asides from loading faster, it also provides a more consistent user experience. Unless designers are keen to learn, avoid using too many technical terms when explaining something. You can see this as an opportunity of improving your communication skills and clarifying your thoughts.

Don’t Let Assumptions Turn Into Decisions

Some questions about a design spec only show up when we get our hands dirty in the code. To speed things up, we might feel tempted to make decisions based on our assumptions. Please, don’t. Each time you turn an assumption into a decision, you are risking the trust that the design team puts on you to implement the UI. Whenever in doubt, reach out and clarify your doubts. This will show them that you care about the final result as much as they do.

Don’t Do Workarounds By Yourself

When you are asked to implement a design that is too hard, don’t say “It’s impossible” or start to implement a cheap alternative version of it by yourself. This immediately causes friction with the design team when they see their designs were not implemented as expected. They might react angrily, or not say anything but feel defeated or frustrated. That can all be avoided if we explain to them why something it’s not possible, in simple terms and suggest alternative approaches. Avoid dogmatic behaviors and be open to collaborating on a new solution.

Let them know about the Graceful Degradation and Progressive Enhancement techniques and build together an ideal solution and a fallback solution. For example, we can enhance a layout from flexbox to CSS Grid. This allows us to respect the core purpose of a feature and at the same time make the best use of web technologies.

When it comes to animations, let’s be real: deep down you are as thrilled to implement the next wow animation as much as the designers are to create it. The difference between us and them is that we are more aware of the web’s constraints. However, don’t let that limit your own skills! The web evolves fast, so we must use that in our favor.

The next time you are asked to bring a prototype to life, try not to reject it upfront or do it all by yourself. See it as an opportunity to push yourself. Animations are one of the pickiest parts of web development, so make sure to refine each keyframe with your designer — in person or by sharing a private synced link.

Think Beyond The Ideal State — Together

Here’s the thing: it’s not all about you. One of the designers’ challenges is to really understand their users and present the designs in the most attractive way to sell to the Product Manager. Sometimes they forget about what’s beyond the ideal state and developers forget it too.

In order to help avoid these gaps from happening, align with designers the scenario requirements:

  • The worst-case scenario
    A scenario where the worst possibilities are happening. This helps designers to say no to fixed content and let it be fluid. What happens if the title has more than 60 characters or if the list is too long? The same applies to the opposite, the empty scenario. What should the user do when the list is empty?
  • Interaction states
    The browser is more than hovering and clicking around. There are a bunch of states: default, hover, focus, active, disable, error… and some of them can happen at the same time. Let’s give them the proper attention.
  • The loading state
    When building stuff locally, we might use mocks and forget that things actually take time to load. Let designers know about that possibility too and show them that are ways to make people perceive that things don’t take that long to load.

Taking into consideration all these scenarios will save you a lot of time going back and forth during the development phase.

Note: There’s a great article by Scott Hurff about how to fix bad user interfaces that will take us a step closer to an accessible product.

Embrace Change Requests

Developers are known for not being too happy about someone finding a bug in their code — especially when it’s a design bug reported by a designer. There are a lot of memes around it, but have you ever reflected how those bugs can compoundingly rot both the quality of the experience as well as your relationship when these design bugs are casually dismissed? It happens slowly, almost like falling asleep. Bit by bit, then all at once. Designers might start out saying, “It’s just a tiny little detail,” until the indifference and resentment builds up and nothing is said. The damage has then already been done.

This situation is two-fold: both to your peers and to your work. Don’t let that happen. Work on what’s coloring your reaction. A designer being ‘picky’ can be inconvenient, but it can also be an engineer’s shallow interpretation of attentiveness and enthusiasm. When someone tells you that your implementation is not perfect (yet), put your ego aside and show them how you recognize their hard work in refining the final result.

Go Off The Record Once In A While

We all have tasks to deliver and roadmaps to finish. However, some of the best work happens off the record. It won’t be logged into the TO DO board and that’s okay. If you find a designer you have a rapport with, go sneak into their workspace and explore together new experiments. You never know what can come from there!

Conclusion

When you are willing to learn from the design team, you are also learning different ways of thinking. You’ll evolve your mindset of collaboration with other areas out of your experience while refining your eye for creating new experiences. Be there to help and be open to learning, because sharing is what makes us better.


This article wouldn’t be possible without the feedback of many great people. I want to gratefully thank to the designers Jasmine Meijer and Margarida Botelho for helping me to share a balanced perspective about the misunderstandings between designers and developers.

Related Reading on SmashingMag:

Smashing Editorial (ra, yk, il)
10 Spooky Designs to Get You Inspired This Halloween

Is the eerie spirit of Halloween haunting your designs? Find spooky inspiration in these ten ghoulish illustrations, videos, and photos.

From Polish artist Piotr Jabłoński’s off-kilter and unnerving fantasy paintings to Caley Hicks’ cutesy take on Halloween themes, you’re sure to find something here to get you in the spooky mood.

Looking for spine-chilling photos, graphics, and video clips to use in your projects? Don’t miss our ultimate curated Halloween collection.

1. Día de los Muertos by Shutterstock contributors

Taking place just after Halloween on November 2nd, 2019, Día de los Muertos (Day of the Dead) is a Mexican holiday held to remember the deceased.

Viewed by Mexicans as a day of celebration rather than sadness, colorful costumes, parades, and sugar skulls are prominent features of the holiday. Families gather at the grave of the departed to leave offerings and say prayers, aiding their loved one in their spiritual journey.

Imagery surrounding Día de los Muertos is vibrant and theatrical, giving Day of the Dead-themed designs an otherworldly feel.

Explore the Shutterstock contributors’ Día de los Muertos video collection.

//www.instagram.com/embed.js

2. Fantasy Dreamscapes by Tithi Luadthong

Inspired by horror, fantasy, and science fiction, illustrator Tithi Luadthong conjures up immersive and deeply compelling dreamscapes that tell intriguing stories.

The digital impressionist injects his images with a sense of dynamism and movement, transporting the viewer to a multitude of action-packed horror-themed scenarios, from a zombie apocalypse to a cave inhabited by a horned demon.

Read more about Tithi’s creative process in this interview with the Bangkok-based artist.

Explore the artist’s full collection of horror- and Halloween-themed content here.

Image by contributor Tithi Luadthong.

Image by contributor Tithi Luadthong.

Image by contributor Tithi Luadthong.

3. Halloween-Themed Curated Collection by Shutterstock

Whether you’re planning a Halloween party, creating a seasonal social media post, or designing a hair-raising webpage, the Shutterstock Halloween curated collection features everything you could need to realize your petrifying project.

From trick-or-treat portraits to ghostly collages, discover a wide range of images to suit every mood and every design this autumn.

4. Animal Halloween Portraits by Kimberly Petts

Horror isn’t for everyone when Halloween rolls around. The holiday is just as much an excuse for indulging in some fun and frivolity.

Shutterstock contributor Kimberley Petts loves to give her animal portraits a spooky yet light-hearted twist. With an air of old-world painting styles, her images manage to balance a somber setting with witty subjects. We especially love her Rembrandt-influenced portraits of her two German Shorthaired Pointers, Branston and Twiglet.

Discover more portraits of pets getting into the Halloween spirit.

Image by contributor Kimberly Petts.

Image by contributor Kimberly Petts.

5. Supernatural Concept Art by Piotr Jabłoński

Polish concept artist and digital painter Piotr Jabłoński has a cult following for his beautiful yet often disturbing images. His expertly executed digital illustrations see him turn his hand to depicting dark forests filled with mystical creatures, fantastical battle scenes, and freakish humanoid characters.

With a meticulous eye for detail, Jabłoński’s images explore themes of horror, the supernatural, and general weirdness. His ability to blur the lines between normality and fantasy in his subject matter makes his images not only unnervingly beautiful to look at, but unforgettable too.

Images by Piotr Jabłoński.

6. Cutesy Spooks by Caley Hicks

Florida-based illustrator Caley Hicks, aka There Will Be Cute, looks to vintage children’s illustrations to inform her adorable, retro-tinted drawings and patterns. Influenced by the golden age of Disney, Hicks applies her cute and perky drawing style to a range of seasonal subjects. With Halloween a favorite subject, Hicks depicts black cats, pumpkins, and headless horsemen in a midcentury-inspired palette of burnt orange, cream, and charcoal black.

With fans able to purchase cushions, phone covers, and even shower curtains from her online shop, this talented artist has honed a versatile style that works just as well in the home as it does on screen.

Images by Caley Hicks.

7. High Fashion Halloween by SunCity

Halloween is a great excuse for getting dressed up and transforming yourself into a vampire, witch, or black cat. For the more fashionably-inclined, it’s also the perfect occasion to showcase your fabulous makeup skills.

Shutterstock contributor SunCity takes an ultra-stylish approach to the Halloween theme, casting his subject in dramatic colored lighting and experimenting with skeletal makeup, shadows, and blurring. The final result is a high-fashion take on the spooky holiday. These photos would be perfect for giving a Halloween-themed magazine layout or poster a high-fashion twist.

Image by contributor SunCity.

Image by contributor SunCity.

Image by contributor SunCity.

8. Carved Vegetables by Tough Slate Design

Who knew a fig could be so frightening? Kiev-based creatives Tough Slate Design gave this Halloween promo campaign for Le Silpo Specialty Grocery store a quirky twist using that most humble of foods — fruit and vegetables.

Carving frightening faces into turnips, peppers, and olives, then photographing them against a seasonal orange background, created a foundation for their “Treat-or-treat!” campaign. The idea behind the posters? With Le Silpo offering a wide range of delicacies in-store, it seemed bland and unoriginal to use a traditional Halloween pumpkin.

Striking the perfect balance between cute and creepy, the final poster is a lesson in discovering an unusual and offbeat angle for a seasonal campaign.

Poster design by Tough Slate Design for Le Silpo Specialty Grocery store.

9. Wall Art by Syda Productions

Simple cut-out shapes made from paper or card can be transformed into stylish and striking works of art with the right concept in mind. Here, Shutterstock contributor Syda Productions turns his hand to collage-style displays of swarming bats. Set against a minimal backdrop, the result is perfect inspiration for style-conscious decorators looking to add a touch of seasonal spirit to a home or office setting.

Why not try creating and photographing your own Halloween collage creations? Decorate a lonely wall with a flock of black crows or flurry of spider webs to conjure a spooky spirit on a budget.

Image by contributor Syda Productions.

10. Contemporary Tarot Cards by Theo Boquet

Fortune-telling is deeply connected with the Halloween season. A display of tarot cards across a dining table at a Halloween party is not only a decorative flourish, but is a lovely way of bringing a touch of mystery and spirituality to your event.

These modern and minimal tarot cards by Lille-based graphic designer Theo Boquet offer an ultra-stylish alternative to traditional tarot cards. The collage style mixes black-and-white figures from popular culture and artistic masterpieces with pops of vivid blue and yellow ink.

Boquet’s design is a great example of applying contemporary style to traditional subject matter, to create a hip fusion of old and new.

‘Tarot de Marseille’ card designs by Theo Boquet.

Creating a Halloween-Themed Design?

Discover frightening photos, kooky graphics, and supernatural video clips to use in your projects with the Shutterstock curated Halloween collection.

 

This post originally appeared on the Shutterstock blog.

[– This is a sponsored post on behalf of Shutterstock –]

Source
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;}

Should You Add WordPress Maintenance To Your Service Offering?

Should You Add WordPress Maintenance To Your Service Offering?

Should You Add WordPress Maintenance To Your Service Offering?

Suzanne Scacca

(This is a sponsored article.) One of the common problems with trying to scale up when working as a solo web designer or a bootstrapping agency is that you’re limited by time. How much time it takes to:

  • Onboard new clients;
  • Build websites;
  • Put out fires;
  • Do all the other stuff that keeps your business running.

That’s not to say you can’t make good money in web design. It’s just that your time is worth money and if you’re maxed out on time, that’s it. You’ve reached peak scale.

If you’re hoping to not only sustain your design business but scale it into a money-making machine, you need to create a recurring revenue stream. Luckily for you, web designers and agencies have lots of options to choose from.

One of the most popular is WordPress maintenance and support.

Before you go diving into this new gig, really consider what this additional offering will do to your operation. Because although it will bring you more money — and a predictable stream of it, too — it’s not easy work. Especially as you offer that service to dozens and, eventually, hundreds or thousands of clients.

To help you out, today we’re going to examine:

The Benefits Of Selling WordPress Maintenance Services

There are many reasons why designers and developers choose to build websites with WordPress. But as anyone who’s spent enough time with the content management system will tell you, it’s got its flaws.

Security is a big concern. Speed can be difficult to manage. And clients don’t always take too kindly to the platform.

But that’s where WordPress maintenance services come in. Seasoned WordPress users understand the CMS’s weaknesses and are able to craft monthly maintenance and support plans to ensure that all bases are covered long after launch.

While it’s clear what sort of benefits your clients get from maintenance and support, you stand to reap a ton of benefits by adding it to your service offering, too:

Make Your Revenue Stream Predictable

Ever feel like it’s feast or famine with your business? It’s to be expected, especially if you serve smaller clients whose own revenue streams are unpredictable.

That’s one of the reasons why maintenance and support services are so great. Whether you allow clients to go month-to-month or put them on a yearly plan, your cash flow becomes more predictable and easier to manage.

Add An Extra Competitive Edge

If you’re working with the right kinds of clients, they should be asking you “What’s next?” after their website launches. These are the clients that understand the value of protecting their investment.

Wouldn’t you rather be the one who has the answer than to watch them move onto the competition for help? Plus, it’s an easy sell. You’ve already proven yourself a trustworthy designer. Why not round out your offering and become their end-to-end provider?

Make Your Portfolio Even More Impressive

You put a lot of work into the websites you build and you should be proud to show them off. But when left in the hands of your clients (or a subpar maintenance provider), you run the risk of your portfolio quickly going stale.

That’s not to say you should be in this solely to protect your reputation, but it is something to think about if you’re going to leverage those samples to build your business.

Upgrade Your Processes

One of the awesome things about performing WordPress maintenance is that a lot of it can be automated, so you’re not really “performing” much at all. It becomes more about monitoring and support.

What’s more, if you initially build security, speed and SEO automation into your websites, you’ll have even less work to do when maintenance plans kick in. And an awesome justification for raising your web design rates.

Create Additional Revenue Streams

Once you see how beneficial it is to build WordPress maintenance into your offering, you might not want to stop there. Your clients might not either. So, keep your ears peeled. If clients start asking for help with the same kinds of things (e.g. managing their hosting, handling their content marketing, running SEO audits, etc.), think about how you might add that to your offering.

The Drawbacks Of Managing WordPress Maintenance Services

WordPress maintenance is beneficial to your clients and it does a lot of good for your business, too. But there are some things you need to be aware of before you jump in.

Stiff Competition

While offering WordPress maintenance will certainly make you a competitive and formidable force in the eyes of existing and former clients, that might not be the case with newbies. Not only will you have to compete against other web designers and agencies, you’ll also have to compete with dedicated WordPress maintenance pros like WP Buffs and SkyrocketWP.

A New Offering = More Work

Without the right tools or automations in place, WordPress maintenance services could become an even greater burden on your business. Remember, you want to move away from time-based services, so this needs to be set up properly if you want to make it work.

Technical Know-How

Website maintenance is a highly technical matter. If your skillset is mainly in design or strategy, this might not be the right recurring revenue service for you. That’s why it’s important to secure the technology and process before you start selling any new solution.

Support Is Required

Although we usually just refer to these services as “maintenance plans”, support has to be baked in. You’re not just working behind the scenes to do backups or patch vulnerabilities. You have to make yourself available if a client notices that their site is down, they’ve been locked out of the admin or they simply need help editing a page. Do you have the capacity or patience for that?

A Lot At Stake

There’s a lot on the line here. If you do everything right, it could do wonders for your business and your bottom line. But if you fail to provide the right level of maintenance and support, and something happens to your client’s site, you can bet it’s going to hurt your business and reputation.

How To Do WordPress Maintenance And Support The Right Way

That said, the good does certainly outweigh the bad. You just need to handle it the right way, which means you need a plan, the right tools and a solid process.

Here’s what I suggest:

Step 1: Figure Out What Kind Of Maintenance You’ll Do

Before you add a Maintenance page to your website, first sort out what kind of maintenance you’re going to offer.

Ask yourself:

What kinds of clients do you serve? How much maintenance, on average, do you think they need each month?

For instance, a law firm website might only need:

  • Weekly software updates,
  • Monthly backups,
  • Security monitoring,
  • Uptime monitoring,
  • 2-3 small edits monthly.

But an established sales enterprise might need the whole kit and caboodle:

  • Backups and restores,
  • Software updates,
  • Security monitoring and repairs,
  • Comment moderation,
  • Downtime monitoring,
  • Performance monitoring and optimization,
  • File/plugin/theme/media cleanup,
  • Database cleanup,
  • Broken link monitoring and repair,
  • 2 hours of edits monthly,
  • Reporting.

If you’re curious about how companies that are 100% dedicated to WordPress maintenance and support do it, here’s an example of how Maintainn breaks it up:

Maintainn maintenance and support
WordPress maintenance company Maintainn offers customers three maintenance and support plans. (Source: Maintainn) (Large preview)

If you target clients at different levels, you could logically break up your plans this way. It would be a good way to form lifelong partnerships with your clients, too, as you can help them grow from fledgling startups to booming enterprises.

If you’d rather not take on a wide range of maintenance responsibilities, that’s fine. Play to your strengths. For example, digital agency Webvizion offers Basic, Advanced and Pro plans:

Webvision maintenance and support
Webvizion sells the same kinds of website maintenance and support services. The key difference between the plans is quantity though. (Source: Webvizion) (Large preview)

Each plan comes with the same kind of maintenance and support coverage. What differs is how much of it they do with each plan. This is a good option if you’re brand new to maintenance and aren’t sure how much of it you want to branch out into or how much of it your clients will even need. You can safely test the waters with this approach.

However you decide to split up and price out your maintenance services, make it clear to customers what the differences are between the plans and where they’ll get the most value. Just as you want to simplify their lives by handling their WordPress maintenance, you want to simplify this decision for them as well.

Step 2: Create Your Maintenance Toolbox

You might have already laid some of the groundwork when building your client’s website by implementing:

A solid choice in managed WordPress hosting will not only strengthen this setup, but it’ll make your job easier, too.

Managed Hosting with Kinsta

If your clients are on regular ol’ WordPress hosting, but you and they want to get serious about properly maintaining their website, it’s a good idea to get them over to managed hosting with Kinsta. And I’ll show you why.

This is Kinsta’s multi-site control panel, MyKinsta:

MyKinsta control panel
With managed WordPress hosting with Kinsta, users get access to the intuitive control panel called MyKinsta. (Source: MyKinsta) (Large preview)

As you can see in this snapshot, MyKinsta is a really well-organized control panel solution. But this isn’t just a place to manage your clients’ Kinsta accounts and billing. This is where you can set up your own WordPress maintenance services for success.

Let’s look a little more closely at what you can do:

MyKinsta backup and restore
MyKinsta automates website backups and simplifies the restore, too. (Source: MyKinsta) (Large preview)

Backups are a non-negotiable part of WordPress maintenance. You know that your clients aren’t going to do it or know how to do it and you can’t afford a security breach or human error to compromise everything you worked so hard to build for them.

From this panel, you can see that Kinsta has already taken care of this responsibility for you — and it’s doing it at a frequency you most likely couldn’t handle (at least, if you were planning to do this for dozens of clients).

Restoring a backup is just as easy and only requires a couple clicks to take your client’s website back to safety.

The Tools section of MyKinsta also simplifies website security and performance optimization for you:

MyKinsta Tools
The MyKinsta control panel’s Tools are all about improving speed and security. (Source: MyKinsta) (Large preview)

Want to instantly upgrade to the latest PHP version? Implement stronger password protection? Clear the cache? You can take care of your security and speed optimization essentials with just a click or two.

Another performance enhancer lives in this control panel, too: the Kinsta CDN.

Kinsta CDN
MyKinsta’s web hosting panel allows users to activate and use Kinsta’s own CDN. (Source: MyKinsta) (Large preview)

For clients with high volumes of traffic from around the world, you can’t afford to skimp on this. It’s nice to see that Kinsta makes it easy to add a CDN instead of forcing users to sign up for an external provider’s CDN and integrate it with their Kinsta website. Again, a lot of the work you’d have to do to set up a maintenance client is already done for you.

There’s a lot more you can do within this control panel. For example:

  • Sign clients’ up for new hosting plans.
  • Manage domain names.
  • View plugin updates.
  • Set up and use a staging environment.
  • Migrate a website.
  • Monitor performance analytics.

Once you have everything set up as you like, you can trust that Kinsta will take care of your clients’ security and performance just as well as you would. And if anything should go wrong or you need help tweaking something on the backend, Kinsta expert support is available 24/7.

Multi-site Management

Managed hosting will cover the server-side maintenance and support piece of your own maintenance care plans — which is huge. You don’t have to worry about waking up in the middle of the night to deal with downed servers and other urgent hosting-related matters.

This frees you up, then, to take care of the website side of things.

That said, don’t try and do this on your own. Setting up the plugins I mentioned earlier is a good place to start, but it’s not enough. Can you imagine having to log in and out of dozens or hundreds of clients’ websites to update their plugins, manage their backups and run security scans? Don’t even think about wasting your time on that.

Instead, find a multi-site management tool you can outsource most of these repetitive tasks to (like InfiniteWP or iThemes Sync).

Most of these tools enable you to:

  • Add all of your maintenance client sites to a single control panel.
  • Schedule backups (and do so in a safe manner).
  • Schedule and automate updates (plus, you can choose which themes and plugins get updated).
  • Automate security, uptime and performance monitoring.
  • Auto-generate weekly or monthly status update reports for clients.

This is going to take a lot of the weight off of your shoulders when it comes to managing the maintenance essentials. Knowing that tools like these exist will also help you decide how much you can reasonably offer in the way of maintenance without burning yourself out in the process.

Step 3: Create A Process

Now that you know what you’re offering and which tools you’re going to use to automate and manage at least some of the tasks, it’s time to build out a process for it.

To give you a head start, I’m going to help you create a template that will make scheduling and processizing this whole thing much easier.

First, I want you to make a list of all the maintenance services you’re going to offer. You can choose from the list below or add your own. Again, choose the services that your clients will actually need help with after launch:

Maintenance Services & Support
Backups (and restore)
Software updates
Security monitoring
Downtime monitoring
Performance monitoring
Comment moderation
Database cleanup
File cleanup
User management
Broken link monitoring
Managed hosting and domain
Keyword monitoring
Content marketing
Google Analytics review
Site audit
Website edits
Support
Reporting

Next, identify the tools you’ll use to manage these services. As you’ll see, you can actually accomplish most of this with your multi-site manager and managed hosting solution. You may need additional tools, but many of them are offered by Google for free.

Maintenance Services & SupportTools
Backups (and restore)Managed hosting + multi-site manager
Software updatesMulti-site manager
Security monitoringMulti-site manager or security plugin
Downtime monitoringMulti-site manager
Performance monitoringMulti-site manager and Google PageSpeed Insights
Comment moderationMulti-site manager
Database cleanupManaged hosting
File cleanupManual
User managementMulti-site manager
Broken link monitoringMulti-site manager
Managed hosting and domainManaged hosting
Keyword monitoringMulti-site manager and SEO checker tools
Content marketingManual
Google Analytics reviewGoogle Analytics reporting and manual
Site auditManual
Website editsManual
SupportManual and helpdesk solution
ReportingMulti-site manager and Google Analytics

Finally, you need to decide how frequently each of these maintenance tasks need to be completed (or how much support you’ll provide). This may vary from plan to plan, so I’m going to provide you with a few empty columns to input your responses.

For the frequency-based tasks, add one of the following:

  • Hourly,
  • Daily,
  • Weekly,
  • Monthly.

For the quantity-based tasks, add one of the following:

  • Number (like for how many website edits you’ll do in a month),
  • Hours (like for how many hours of support — remember to indicate the level of support, too!).
Maintenance Services & SupportToolsPlan 1Plan 2Plan 3
Backups (and restore)Managed hosting + multi-site manager123
Software updatesMulti-site manager
Security monitoringMulti-site manager or security plugin
Downtime monitoringMulti-site manager
Performance monitoringMulti-site manager and Google PageSpeed Insights
Comment moderationMulti-site manager
Database cleanupManaged hosting
File cleanupManual
User managementMulti-site manager
Broken link monitoringMulti-site manager
Managed hosting and domainManaged hosting
Keyword monitoringMulti-site manager and SEO checker tools (like Moz)
Content marketingManual
Google Analytics reviewGoogle Analytics reporting and manual
Site auditManual (though you can use various premium tools to do most of the heavy lifting)
Website editsManual
SupportManual with the help of a helpdesk solution
ReportingMulti-site manager and Google Analytics

Now that you have all the essentials broken out, get to work on setting it up.

If you haven’t yet signed up for any of these tools or aren’t familiar with how to use them, sign up for accounts with them now. You don’t want to be learning this on the job.

Next, configure your automations within your tools. You might even want to set up your own website as the first “client”, so you can work out all the kinks with your process safely.

Then, add all of the tasks that require your oversight and hand-holding to your project management tool. There shouldn’t be too many that fall on your plate once you have the help of a managed hosting solution like Kinsta, a multi-site manager and a variety of Google tools on your side.

The Bottom Line

Once things really begin to pick up, you can start thinking about outsourcing. This might involve hiring a contractor to manage those manual tasks for you, switching your clients to one of Kinsta’s managed hosting plans or using a service like WP Buffs to white label your maintenance services entirely.

But, for now, focus on how you can make a difference in the lives of your clients. Then, get in touch with current and former clients and work on your pitch. There’s no point in thinking about scaling and outsourcing if you don’t have clients banging down your door for help.

Once you’ve proven your value as an end-to-end provider for all things WordPress, then you can comfortably start looking at ways to lighten your burden even further while increasing the recurring revenue flowing in.

Smashing Editorial (ms, ra, yk, il)
Animating Apps With Flutter

Animating Apps With Flutter

Animating Apps With Flutter

Shubham

Apps for any platform are praised when they are intuitive, good-looking, and provide pleasant feedback to user interactions. Animation is one of the ways to do just that.

Flutter, a cross-platform framework, has matured in the past two years to include web and desktop support. It has garnered a reputation that apps developed with it are smooth and good-looking. With its rich animation support, declarative way of writing UI, “Hot Reload,” and other features, it is now a complete cross-platform framework.

If you are starting out with Flutter and want to learn an unconventional way of adding animation, then you are at the right place: we will explore the realm of animation and motion widgets, an implicit way of adding animations.

Flutter is based on the concept of widgets. Each visual component of an app is a widget — think of them as views in Android. Flutter provides animation support using an Animation class, an “AnimationController” object for management, and “Tween” to interpolate the range of data. These three components work together to provide smooth animation. Since this requires manual creation and management of animation, it is known as an explicit way of animating.

Now let me introduce you to animation and motion widgets. Flutter provides numerous widgets which inherently support animation. There’s no need to create an animation object or any controller, as all the animation is handled by this category of widgets. Just choose the appropriate widget for the required animation and pass in the widget’s properties values to animate. This technique is an implicit way of animating.

Animation hierarchy in Flutter. (Large preview)

The chart above roughly sets out the animation hierarchy in Flutter, how both explicit and implicit animation are supported.

Some of the animated widgets covered in this article are:

  • AnimatedOpacity
  • AnimatedCrossFade
  • AnimatedAlign
  • AnimatedPadding
  • AnimatedSize
  • AnimatedPositioned.

Flutter not only provides predefined animated widgets but also a generic widget called AnimatedWidget, which can be used to create custom implicitly animated widgets. As evident from the name, these widgets belong to the animated and motion widgets category, and so they have some common properties which allow us to make animations much smoother and better looking.

Let me explain these common properties now, as they will be used later in all examples.

  • duration
    The duration over which to animate the parameters.
  • reverseDuration
    The duration of the reverse animation.
  • curve
    The curve to apply when animating the parameters. The interpolated values can be taken from a linear distribution or, if and when specified, can be taken from a curve.

Let’s begin the journey by creating a simple app we’ll call “Quoted”. It will display a random quotation every time the app starts. Two things to note: first, all these quotations will be hardcoded in the application; and second, no user data will be saved.

Note: All of the files for these examples can be found on GitHub.

Getting Started

Flutter should be installed and you’ll need some familiarity with the basic flow before moving on. A good place to start is, “Using Google’s Flutter For Truly Cross-Platform Mobile Development”.

Create a new Flutter project in Android Studio.

New flutter project menu in Android Studio. (Large preview)

This will open a new project wizard, where you can configure the project basics.

Flutter project type selection screen. (Large preview)

In the project type selection screen, there are various types of Flutter projects, each catering to a specific scenario.. For this tutorial, choose Flutter Application and press Next.

You now need to enter some project-specific information: the project name and path, company domain, and so on. Have a look at the image below.

Flutter application configuration screen. (Large preview)

Add the project name, the Flutter SDK path, project location, and an optional project description. Press Next.

Flutter application package name screen. (Large preview)

Each application (be it Android or iOS) requires a unique package name. Typically, you use the reverse of your website domain; for example, com.google or com.yahoo. Press Finish to generate a working Flutter application.

The generated sample project. (Large preview)

Once the project is generated, you should see the screen shown above. Open the main.dart file (highlighted in the screenshot). This is the main application file. The sample project is complete in itself, and can be run directly on an emulator or a physical device without any modification.

Replace the content of the main.dart file with the following code snippet:

import 'package:animated_widgets/FirstPage.dart';
import 'package:flutter/material.dart'; void main() => runApp(MyApp());
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Animated Widgets', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, accentColor: Colors.redAccent, ), home: FirstPage(), ); }
}

This code cleans up the main.dart file by just adding simple information relevant to creating a new app. The class MyApp returns an object: a MaterialApp widget, which provides the basic structure for creating apps conforming to Material Design. To make the code more structured, create two new dart files inside the lib folder: FirstPage.dart and Quotes.dart.

The FirstPage.dart file. (Large preview)

FirstPage.dart will contain all the code responsible for all the visual elements (widgets) required for our Quoted app. All the animation is handled in this file.

Note: Later in the article, all of the code snippets for each animated widget are added to this file as children of the Scaffold widget. For more information, This example on GitHub could be useful.

Start by adding the following code to FirstPage.dart. This is the partial code where other stuff will be added later.

import 'dart:math'; import 'package:animated_widgets/Quotes.dart';
import 'package:flutter/material.dart'; class FirstPage extends StatefulWidget { @override State createState() { return FirstPageState(); }
} class FirstPageState extends State with TickerProviderStateMixin { bool showNextButton = false; bool showNameLabel = false; bool alignTop = false; bool increaseLeftPadding = false; bool showGreetings = false; bool showQuoteCard = false; String name = ''; double screenWidth; double screenHeight; String quote; @override void initState() { super.initState(); Random random = new Random(); int quoteIndex = random.nextInt(Quotes.quotesArray.length); quote = Quotes.quotesArray[quoteIndex]; } @override Widget build(BuildContext context) { screenWidth = MediaQuery.of(context).size.width; screenHeight = MediaQuery.of(context).size.height; return Scaffold( appBar: _getAppBar(), body: Stack( children: [ // All other children will be added here. // In this article, all the children widgets are contained // in their own separate methods. // Just method calls should be added here for the respective child. ], ), ); }
}
The Quotes.dart file. (Large preview)

The Quotes.dart file contains a list of all the hardcoded quotations. One point to note here is that the list is a static object. This means it can be used at other places without creating a new object of the Quotes class. This is chosen by design, as the above list act simply as a utility.

Add the following code to this file:

class Quotes { static const quotesArray = [ "Good, better, best. Never let it rest. 'Til your good is better and your better is best", "It does not matter how slowly you go as long as you do not stop.", "Only I can change my life. No one can do it for me." ];
}

The project skeleton is now ready, so let’s flesh out Quoted a bit more.

AnimatedOpacity

To lend a personal touch to the app, it would be nice to know the user’s name, so let’s ask for it and show a next button. Until the user enters their name, this button is hidden, and it will gracefully show up when a name is given. We need some kind of visibility animation for the button, but is there a widget for that? Yes, there is.

Enter AnimatedOpacity. This widget builds on the Opacity widget by adding implicit animation support. How do we use it? Remember our scenario: we need to show a next button with animated visibility. We wrap the button widget inside the AnimatedOpacity widget, feed in some proper values and add a condition to trigger the animation — and Flutter can handle the rest.

_getAnimatedOpacityButton() { return AnimatedOpacity( duration: Duration(seconds: 1), reverseDuration: Duration(seconds: 1), curve: Curves.easeInOut, opacity: showNextButton ? 1 : 0, child: _getButton(), );
}
Opacity animation of next button. (Large preview)

The AnimatedOpacity widget has two mandatory properties:

  • opacity
    A value of 1 means completely visible; 0 (zero) means hidden. While animating, Flutter interpolates values between these two extremes. You can see how a condition is placed to change the visibility, thus triggering animation.
  • child
    The child widget that will have its visibility animated.

You should now understand how really simple it is to add visibility animation with the implicit widget. And all such widgets follow the same guidelines and are easy to use. Let’s move on to the next one.

AnimatedCrossFade

We have the user’s name, but the widget is still waiting for input. In the previous step, as the user enters their name, we display the next button. Now, when the user presses the button, I want to stop accepting input and show the entered name. There are many ways to do it, of course, but perhaps we can hide away the input widget and show an uneditable text widget. Let’s try it out using the AnimatedCrossFade widget.

This widget requires two children, as the widget crossfades between them based on some condition. One important thing to keep in mind while using this widget is that both of the children should be the same width. If the height is different, then the taller widget gets clipped from the bottom. In this scenario, two widgets will be used as children: input and label.

_getAnimatedCrossfade() { return AnimatedCrossFade( duration: Duration(seconds: 1), alignment: Alignment.center, reverseDuration: Duration(seconds: 1), firstChild: _getNameInputWidget(), firstCurve: Curves.easeInOut, secondChild: _getNameLabelWidget(), secondCurve: Curves.easeInOut, crossFadeState: showNameLabel ? CrossFadeState.showSecond : CrossFadeState.showFirst, ); }
Cross-fading between the input widget and name widget. (Large preview)

This widget requires a different set of mandatory parameters:

  • crossFadeState
    This state works out which child to show.
  • firstChild
    Specifies the first child for this widget.
  • secondChild
    Specifies the second child.

AnimatedAlign

At this point, the name label is positioned at the center of the screen. It will look much better at the top, as we need the center of the screen to show quotes. Simply put, the alignment of the name label widget should be changed from center to top. And wouldn’t it be nice to animate this alignment change along with the previous cross-fade animation? Let’s do it.

As always, several techniques can be used to achieve this. Since the name label widget is already center-aligned, animating its alignment would be much simpler than manipulating the top and left values of the widget. The AnimatedAlign widget is perfect for this job.

To initiate this animation, a trigger is required. The sole purpose of this widget is to animate alignment change, so it has only a few properties: add a child, set its alignment, trigger the alignment change, and that’s it.

_getAnimatedAlignWidget() { return AnimatedAlign( duration: Duration(seconds: 1), curve: Curves.easeInOut, alignment: alignTop ? Alignment.topLeft : Alignment.center, child: _getAnimatedCrossfade(), ); }
Alignment animation of the name widget. (Large preview)

It has only two mandatory properties:

  • child:
    The child whose alignment will be modified.
  • alignment:
    Required alignment value.

This widget is really simple but the results are elegant. Moreover, we saw how easily we can use two different animated widgets to create a more complex animation. This is the beauty of animated widgets.

AnimatedPadding

Now we have the user’s name at the top, smoothly animated without much effort, using different kinds of animated widgets. Let’s add a greeting, “Hi,” before the name. Adding a text widget with value “Hi,” at the top will make it overlap the greeting text widget, looking like the image below.

The greeting and name widgets overlap. (Large preview)

What if the name text widget had some padding on the left? Increasing the left padding will definitely work, but wait: can we increase the padding with some animation? Yes, and that is what AnimatedPadding does. To make all this much better looking, let’s have the greetings text widget fade in and the name text widget’s padding increase at the same time.

_getAnimatedPaddingWidget() { return AnimatedPadding( duration: Duration(seconds: 1), curve: Curves.fastOutSlowIn, padding: increaseLeftPadding ? EdgeInsets.only(left: 28.0) : EdgeInsets.only(left: 0), child: _getAnimatedCrossfade(), ); }

Since the animation above should occur only after the previous animated alignment is complete, we need to delay triggering this animation. Digressing from the topic briefly, this is a good moment to talk about a popular mechanism to add delay. Flutter provides several such techniques, but the Future.delayed constructor is one of the simpler, cleaner and more readable approaches. For instance, to execute a piece of code after 1 second:

Future.delayed(Duration(seconds: 1), (){ sum = a + b; // This sum will be calculated after 1 second. print(sum);
});

Since the delay duration is already known (calculated from previous animation durations), the animation can be triggered after this interval.

// Showing “Hi” after 1 second - greetings visibility trigger.
_showGreetings() { Future.delayed(Duration(seconds: 1), () { setState(() { showGreetings = true; }); });
} // Increasing the padding for name label widget after 1 second - increase padding trigger.
_increaseLeftPadding() { Future.delayed(Duration(seconds: 1), () { setState(() { increaseLeftPadding = true; }); });
}
Padding animation of the name widget. (Large preview)

This widget has only two mandatory properties:

  • child
    The child inside this widget, which padding will be applied to.
  • padding
    The amount of space to add.

AnimatedSize

Today, any app having some kind of animation will include zooming in to or out of visual components to grab user attention (commonly called scaling animation). Why not use the same technique here? We can show the user a motivational quote that zooms in from the center of the screen. Let me introduce you to the AnimatedSize widget, which enables the zoom-in and zoom-out effects, controlled by changing the size of its child.

This widget is a bit different from the others when it comes to the required parameters. We need what Flutter calls a “Ticker.” Flutter has a method to let objects know whenever a new frame event is triggered. It can be thought of as something that sends a signal saying, “Do it now! … Do it now! … Do it now! …”

The AnimatedSize widget requires a property — vsync — which accepts a ticker provider. The easiest way to get a ticker provider is to add a Mixin to the class. There are two basic ticker provider implementations: SingleTickerProviderStateMixin, which provides a single ticker; and TickerProviderStateMixin, which provides several.

The default implementation of a Ticker is used to mark the frames of an animation. In this case, the latter is employed. More about mixins.

// Helper method to create quotes card widget.
_getQuoteCardWidget() { return Card( color: Colors.green, elevation: 8.0, child: _getAnimatedSizeWidget(), );
}
// Helper method to create animated size widget and set its properties.
_getAnimatedSizeWidget() { return AnimatedSize( duration: Duration(seconds: 1), curve: Curves.easeInOut, vsync: this, child: _getQuoteContainer(), );
}
// Helper method to create the quotes container widget with different sizes.
_getQuoteContainer() { return Container( height: showQuoteCard ? 100 : 0, width: showQuoteCard ? screenWidth - 32 : 0, child: Center( child: Padding( padding: EdgeInsets.symmetric(horizontal: 16), child: Text(quote, style: TextStyle(color: Colors.white, fontWeight: FontWeight.w400, fontSize: 14),), ), ), );
}
// Trigger used to show the quote card widget.
_showQuote() { Future.delayed(Duration(seconds: 2), () { setState(() { showQuoteCard = true; }); });
}
Scaling animation of the quotes widget. (Large preview)

Mandatory properties for this widget:

  • vsync
    The required ticker provider to coordinate animation and frame changes.<
  • child
    The child whose size changes will be animated.

The zoom in and zoom out animation is now easily tamed.

AnimatedPositioned

Great! The quotes zoom in from the center to grab the user’s attention. What if it slid up from the bottom while zooming in? Let’s try it. This motion involves playing with the position of the quote widget and animating the changes in position properties. AnimatedPositioned is the perfect candidate.

This widget automatically transitions the child’s position over a given duration whenever the specified position changes. One point to note: it works only if its parent widget is a “Stack.” This widget is pretty simple and straightforward to use. Let’s see.

// Helper method to create the animated positioned widget.
// With position changes based on “showQuoteCard” flag.
_getAnimatedPositionWidget() { return AnimatedPositioned( duration: Duration(seconds: 1), curve: Curves.easeInOut, child: _getQuoteCardWidget(), top: showQuoteCard ? screenHeight/2 - 100 : screenHeight, left: !showQuoteCard ? screenWidth/2 : 12, );
}
Position with scaling animation of quotes. (Large preview)

This widget has only one mandatory property:

  • child
    The widget whose position will be changed.

If the size of the child is not expected to change along with its position, a more performative alternative to this widget would be SlideTransition.

Here is our complete animation:

All the animated widgets together. (Large preview)

Conclusion

Animations are an integral part of user experience. Static apps or apps with janky animation not only lower user retention but also a developer’s reputation to deliver results.

Today, most popular apps have some kind of subtle animation to delight users. Animated feedback to user requests can also engage them to explore more. Flutter offers a lot of features for cross-platform development, including rich support for smooth and responsive animations.

Flutter has great plug-in support which allows us to use animations from other developers. Now that it has matured to version 1.9, with so much love from the community, Flutter is bound to get better in the future. I’d say now is a great time to learn Flutter!

Further Resources

Editor’s Note: A huge Thank You to Ahmad Awais for his help in reviewing this article.

Smashing Editorial (dm, og, yk, il)
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
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google