Popular Design News of the Week: March 25, 2019 – March 31, 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.

14 Free Fresh Resources for Designers

 

Gmail’s Material Design Update, Very Bright, Very White Redesign is Now Rolling Out to all Devices

 

Things Nobody Ever Taught Me About CSS

 

10 Myths that Can Ruin your Mobile UX

 

5 Old-School Web Design Trends Nobody Misses

 

McDonald’s Paints a Blurry Picture with an Intriguing New Campaign

 

Tips and Tricks for a Faster Website

 

How to Organize Files in a Design Agency

 

The Boolean Game

 

Extra-gamified: Why are Some Apps so Satisfying?

 

Here’s Our First Look at WhatsApp’s Dark Mode

 

Ungrabbed: Brandable Domains, Right to your Inbox.

 

UX Design – Maps, Paths, Signs, and Magic

 

Myndset: Ideation Cards for Design Thinking

 

What Does a UX-designer Normally Do?

 

How to Promote Yourself Online When You’re a Total Introvert

 

Color Theory for Designers – a Crash Course

 

Switching to Variable Fonts

 

How We Built the Fastest Conference Website in the World

 

Google Today Officially Launched AMP for Email

 

The Very Mathematical History of a Perfect Color Combination

 

The Design of Apple’s Credit Card

 

The Stupidity of Sameness

 

9 Lessons for the First-Time Manager

 

The Lies People Tell You About Landing Freelance Gigs Online

 

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

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

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

Blooming Colors And April Adventures (2019 Wallpapers Edition)

Blooming Colors And April Adventures (2019 Wallpapers Edition)

Blooming Colors And April Adventures (2019 Wallpapers Edition)

Cosima Mielke

Starting off the new month with an inspiration boost, that’s the idea behind our monthly wallpapers series which has been going on for more than nine years already. What makes it special: the wallpapers are created by the community for the community, and everyone who has an idea for a wallpaper design is welcome to submit it — no matter if they are experienced designers or aspiring artists.

For this April edition, people from across the globe once again took on the creative challenge to cater for some variety on your screens. The result: a colorful collection of unique and inspiring wallpapers dedicated to the big and small joys of April. All wallpapers come in versions with and without a calendar and can be downloaded for free. Thank you to everyone who participated!

As a bonus goodie, you’ll also find a little April best-of at the end of this post. Please note that these wallpapers come from our archives, and, thus, are only available without a calendar. Enjoy!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Further Reading on SmashingMag:

Dreaming

“The moment when you just walk and your imagination fills up your mind with thoughts.” — Designed by Gal Shir from Israel.

Dreaming

Inspiring Blossom

“‘Sweet spring is your time is my time is our time for springtime is lovetime and viva sweet love’, wrote E. E. Cummings. And we have a question for you. Is there anything more refreshing, reviving, and recharging than nature in blossom? Don’t wait. Go outside and enjoy this lovely flourishing season. Let it inspire us all to rise up, hold our heads high, and show the world what we are made of. It’s time to bloom!” — Designed by PopArt Studio from Serbia.

Inspiring Blossom

April Showers

Designed by Ricardo Gimenes from Sweden.

April Showers

Gentle Blooming

“After so many months of grey winter weather, I can’t wait to feel the warmth of sun rays on my skin, to see and smell the flavor of blooming flowers and trees… Thinking about all this inspired me to create these blooming flowers in gentle warm colors.” — Designed by Yuliia Bahniuk from Ukraine.

Gentle Blooming

Spring Serenity

“My inspiration was the arrival of spring that transmits a sense of calmness and happiness through its beautiful colors.” — Designed by Margarida Granchinho from Portugal.

Spring Serenity

Egg Hunt In Wonderland

“April is Easter time and I wanted to remind us that there’s a child inside all of us. My illustration is based on the story that fills our imagination since childhood, Alice in Wonderland, and joined to one of the most traditional customs in America at this time of year, the egg hunt. That’s how we get an ‘egg hunt in wonderland’.” — Designed by Patrícia Garcia from Portugal.

Egg Hunt In Wonderland

Wonderful Things

“If you need to find anything beautiful, there is no better place than nature. Everything in nature is unique and beautiful in its own way!” — Designed by Dental Expression from Lee’s Summit, Missouri.

Wonderful Things

In The River

“Spring is here! Crocodiles search the hot and stay in the river.” — Designed by Veronica Valenzuela from Spain.

In The River

Freedom

“My choice to represent the month of April was the 25th of April in 1974 in Portugal, also known as the great revolution for freedom (‘Revolução dos Cravos’). It started with a political and social movement, which deposed the dictatorial regime of the New State. This date will always inspire us and remind us that freedom is worth fighting for and that people united are stronger than any kind of tyranny. For this reason, my project is called Freedom.” — Designed by Mirella Damasceno from Portugal.

Freedom

Signs

Designed by Tatiana Campos from Portugal.

Signs

Happy Easter!

“Celebrated all around the world in Christian tradition, April is the month of Easter. For kids Easter is about bunnies and painted eggs. Because April is also the month of early spring I chose joyful colours to give life to this lovely Easter illustration.” — Designed by Joana Duarte from Portugal.

Happy Easter!

Hanami

“Every year around April, the cherry blossom marks the beginning of spring in Japan. There is a tradition of watching this phenomenon which the locals refer to as ‘Hanami’ — flower viewing. This event occurs for a short time because of the cherry blossom’s short lifespan. The concept of Hanami reminds us that we should appreciate and even celebrate life in all its beauty and fragility while we can.” — Designed by Tetyana Malakhova from Portugal.

Hanami

Aphrodite

“Every month of our calendar is named after a god or goddess. The month of April is named after Aphrodite, the Greek goddess of love.” — Designed by Rita Falé from Portugal.

Aphrodite

From The Archives

A lot of things have inspired the community to create their April wallpapers in the past few years — be it a tasty bowl of soup on a rainy day or grabbing their bike and exploring new places. Below you’ll find some of these almost forgotten favorites. Please note that they don’t come with a calendar.

April Is The Nicest Month

“T.S. Eliot wrote in 1922 that ‘April is the cruelest month,’ but we quite disagree. April is the month when spring has finally come so nature starts blooming, providing us with more time to go out into nature and enjoy nice weather, long walks, and riding a bike. This is our message to you: go out and play. We surely will.” — Designed by PopArt Studio from Serbia.

April Is The Nicest Month

Wildest Dreams

“We love the art direction, story and overall cinematography of the ‘Wildest Dreams’ music video by Taylor Swift. It inspired us to create this illustration. Hope it will look good on your desktops.” — Designed by Kasra Design from Malaysia.

Wildest Dreams

No Winter Lasts Forever

“Here comes spring, breathing new life into the world around us.” — Designed by Norjimm Pvt Ltd from India.

No Winter Lasts Forever

April Insignia

“April — its first day reminds us that laughter makes life better. Nature also laughs, but it does so in daisies!” — Designed by Ana Masnikosa from Belgrade, Serbia.

April Insignia

Once Upon A Time

“April is the month of spring but also the month of books. ‘A book is a proof that humans are capable of doing magic.’ (Carl Sagan)” — Designed by Verónica Valenzuela from Spain

Once Upon A Time

Nikes On My Feet

“We got inspired by the song ‘Nikes on My Feet’ by Mac Miller, which was perfect for the upcoming month of April and the warm weather that spring brings. As Mac Miller said, ‘All I really need is some shoes on my feet…” — Designed by PopArt Web Design from Serbia.

Nikes On My Feet

Colors Of April

“My daughter was born in April so this month reminds me of that colorful, bright and precious moment.” — Designed by Izabela Grzegorczyk from Poland.

Colors Of April

Bad Bunny

“This bad bunny is just waiting for Easter.” — Designed by Izabela from Poland.

Bad Bunny

Springing

“It’s spring already, my favourite season! You can smell it, you can see it, you can feel it in the air. Trees blossom, the grass is smiling at the sun, everything is so eager to show itself.” — Designed by Vane Kosturanov from Macedonia.

Springing

Rainy Day

Designed by Xenia Latii from Berlin, Germany.

Rainy Day

Spring Fever

“I created that mouse character for a series of illustrations about a poem my mom often told me when I was a child. In that poem the mouse goes on an adventure. Here it is after the adventure, ready for new ones.” — Designed by Anja Sturm from Germany.

Spring Fever

Citrus Passion

Designed by Nathalie Ouederni from France.

Citrus Passion

Sweet April Showers Do Bring May Flowers

“Discover the seasonal fruits and vegetables in April: artichoke and beans walking in the rain!” — Designed by Vitaminas Design from Spain.

Sweet April showers Do bring May flowers

Ipoh Hor Fun

“Missing my hometown’s delicious ‘Kai See Hor Fun’ (in Cantonese), that literally translates to ‘Shredded Chicken Flat Rice Noodles’. It is served in a clear chicken and prawn soup with chicken shreds, prawns, spring onions and noodles.” — Designed by Lew Su Ann from Brunei.

Ipoh Hor Fun

Noisy Neighbors

Designed by Katerina Bobkova from Ukraine.

Smashing Wallpaper - April 2012

Jean-Cloud Van Damme

“Hope that this little cloud will make you laugh. Happy Fools’ Day everybody.” Designed by Marika Smirnova from Russia.

Smashing Wallpaper - April 2012

Umbrella Season

“In my neck of the woods, April means a lot of rain, and therefore a lot of umbrellas. I’ve noticed a lot of pretty unique umbrellas out there, especially when I walked to class in college. Happy Umbrella Season!” — Designed by Angelia DiAntonio from Ohio, USA.

Umbrella Season

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

Thank you to all designers for their participation. Join in next month!

Creating a Reusable Pagination Component in Vue

The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there are cases when the best possible way of presentation means creating a list.

Depending on the amount of data and its content, we may decide to show all content at once (very rarely), or show only a specific part of a bigger data set (more likely). The main reason behind showing only part of the existing data is that we want to keep our applications as performant as possible and avoid loading or showing unnecessary data.

If we decide to show our data in “chunks” then we need a way to navigate through that collection. The two most common ways of navigating through set of data are:

The first is pagination, a technique that splits the set of data into a specific number of pages, saving users from being overwhelmed by the amount of data on one page and allowing them to view one set of results at a time. Take this very blog you’re reading, for example. The homepage lists the latest 10 posts. Viewing the next set of latest posts requires clicking a button.

The second common technique is infinite scrolling, something you’re likely familiar with if you’ve ever scrolled through a timeline on either Facebook or Twitter.

The Apple News app also uses infinite scroll to browse a list of articles.

We’re going to take a deeper look at the first type in this post. Pagination is something we encounter on a near-daily basis, yet making it is not exactly trivial. It’s a great use case for a component, so that’s exactly what we’re going to do. We will go through the process of creating a component that is in charge of displaying that list, and triggering the action that fetches additional articles when we click on a specific page to be displayed. In other words, we’re making a pagination component in Vue.js like this:

Let’s go through the steps together.

Step 1: Create the ArticlesList component in Vue

Let’s start by creating a component that will show a list of articles (but without pagination just yet). We’ll call it ArticlesList. In the component template, we’ll iterate through the set of articles and pass a single article item to each ArticleItem component.

// ArticlesList.vue
<template> 
</template>

In the script section of the component, we set initial data:

  • articles: This is an empty array filled with data fetched from the API on mounted hook.
  • currentPage: This is used to manipulate the pagination.
  • pageCount : This is the total number of pages, calculated on mounted hook based on the API response.
  • visibleItemsPerPageCount: This is how many articles we want to see on a single page.

At this stage, we fetch only first page of the article list. This will give us a list two articles:

// ArticlesList.vue
import ArticleItem from "./ArticleItem"
import axios from "axios"
export default { name: "ArticlesList", static: { visibleItemsPerPageCount: 2 }, data() { return { articles: [], currentPage: 1, pageCount: 0 } }, components: { ArticleItem, }, async mounted() { try { const { data } = await axios.get( `?country=us&page=1&pageSize=${ this.$options.static.visibleItemsPerPageCount }&category=business&apiKey=065703927c66462286554ada16a686a1` ) this.articles = data.articles this.pageCount = Math.ceil( data.totalResults / this.$options.static.visibleItemsPerPageCount ) } catch (error) { throw error } }
}

Step 2: Create pageChangeHandle method

Now we need to create a method that will load the next page, the previous page or a selected page.

In the pageChangeHandle method, before loading new articles, we change the currentPage value depending on a property passed to the method and fetch the data respective to a specific page from the API. Upon receiving new data, we replace the existing articles array with the fresh data containing a new page of articles.

// ArticlesList.vue
...
export default {
... methods: { async pageChangeHandle(value) { switch (value) { case 'next': this.currentPage += 1 break case 'previous': this.currentPage -= 1 break default: this.currentPage = value } const { data } = await axios.get( `?country=us&page=${this.currentPage}&pageSize=${ this.$options.static.visibleItemsPerPageCount }&category=business&apiKey=065703927c66462286554ada16a686a1` ) this.articles = data.articles } }
}

Step 3: Create a component to fire page changes

We have the pageChangeHandle method, but we do not fire it anywhere. We need to create a component that will be responsible for that.

This component should do the following things:

  1. Allow the user to go to the next/previous page.
  2. Allow the user to go to a specific page within a range from currently selected page.
  3. Change the range of page numbers based on the current page.

If we were to sketch that out, it would look something like this:

Let’s proceed!

Requirement 1: Allow the user to go to the next or previous page

Our BasePagination will contain two buttons responsible for going to the next and previous page.

// BasePagination.vue
<template> 
← →
</template>

The component will accept currentPage and pageCount properties from the parent component and emit proper actions back to the parent when the next or previous button is clicked. It will also be responsible for disabling buttons when we are on the first or last page to prevent moving out of the existing collection.

// BasePagination.vue
import BaseButton from "./BaseButton.vue";
export default { components: { BaseButton }, props: { currentPage: { type: Number, required: true }, pageCount: { type: Number, required: true } }, computed: { isPreviousButtonDisabled() { return this.currentPage === 1 }, isNextButtonDisabled() { return this.currentPage === this.pageCount } }, methods: { nextPage() { this.$emit('nextPage') }, previousPage() { this.$emit('previousPage') } }

We will render that component just below our ArticleItems in ArticlesList component.

// ArticlesList.vue
<template> 
</template>

That was the easy part. Now we need to create a list of page numbers, each allowing us to select a specific page. The number of pages should be customizable and we also need to make sure not to show any pages that may lead us beyond the collection range.

Requirement 2: Allow the user to go to a specific page within a range

Let’s start by creating a component that will be used as a single page number. I called it BasePaginationTrigger. It will do two things: show the page number passed from the BasePagination component and emit an event when the user clicks on a specific number.

// BasePaginationTrigger.vue
<template> <span class="base-pagination-trigger" @click="onClick"> {{ pageNumber }} </span>
</template>

export default { props: { pageNumber: { type: Number, required: true } }, methods: { onClick() { this.$emit("loadPage", this.pageNumber) } }
}

This component will then be rendered in the BasePagination component between the next and previous buttons.

// BasePagination.vue
<template> 
... ...
</template>

In the script section, we need to add one more method (onLoadPage) that will be fired when the loadPage event is emitted from the trigger component. This method will receive a page number that was clicked and emit the event up to the ArticlesList component.

// BasePagination.vue
export default { ... methods: { ... onLoadPage(value) { this.$emit("loadPage", value) } }
}

Then, in the ArticlesList, we will listen for that event and trigger the pageChangeHandle method that will fetch the data for our new page.

// ArticlesList
<template> ... <BasePagination :current-page="currentPage" :page-count="pageCount" class="articles-list__pagination" @nextPage="pageChangeHandle('next')" @previousPage="pageChangeHandle('previous')" @loadPage="pageChangeHandle" /> ...
</template>

Requirement 3: Change the range of page numbers based on the current page

OK, now we have a single trigger that shows us the current page and allows us to fetch the same page again. Pretty useless, don’t you think? Let’s make some use of that newly created trigger component. We need a list of pages that will allow us to jump from one page to another without needing to go through the pages in between.

We also need to make sure to display the pages in a nice manner. We always want to display the first page (on the far left) and the last page (on the far right) on the pagination list and then the remaining pages between them.

We have three possible scenarios:

  1. The selected page number is smaller than half of the list width (e.g. 1 – 2 – 3 – 4 – 18)
  2. The selected page number is bigger than half of the list width counting from the end of the list (e.g. 1 – 15 – 16 – 17 – 18)
  3. All other cases (e.g. 1 – 4 – 5 – 6 – 18)

To handle these cases, we will create a computed property that will return an array of numbers that should be shown between the next and previous buttons. To make the component more reusable we will accept a property visiblePagesCount that will specify how many pages should be visible in the pagination component.

Before going to the cases one by one we create few variables:

  • visiblePagesThreshold:- Tells us how many pages from the centre (selected page should be shown)
  • paginationTriggersArray: Array that will be filled with page numbers
  • visiblePagesCount: Creates an array with the required length
// BasePagination.vue
export default { props: { visiblePagesCount: { type: Number, default: 5 } } ... computed: { ... paginationTriggers() { const currentPage = this.currentPage const pageCount = this.pageCount const visiblePagesCount = this.visiblePagesCount const visiblePagesThreshold = (visiblePagesCount - 1) / 2 const pagintationTriggersArray = Array(this.visiblePagesCount - 1).fill(0) } ... } ...
}

Now let’s go through each scenario.

Scenario 1: The selected page number is smaller than half of the list width

We set the first element to always be equal to 1. Then we iterate through the list, adding an index to each element. At the end, we add the last value and set it to be equal to the last page number — we want to be able to go straight to the last page if we need to.

if (currentPage <= visiblePagesThreshold + 1) { pagintationTriggersArray[0] = 1 const pagintationTriggers = pagintationTriggersArray.map( (paginationTrigger, index) => { return pagintationTriggersArray[0] + index } ) pagintationTriggers.push(pageCount) return pagintationTriggers
}
Scenario 2: The selected page number is bigger than half of the list width counting from the end of the list

Similar to the previous scenario, we start with the last page and iterate through the list, this time subtracting the index from each element. Then we reverse the array to get the proper order and push 1 into the first place in our array.

if (currentPage >= pageCount - visiblePagesThreshold + 1) { const pagintationTriggers = pagintationTriggersArray.map( (paginationTrigger, index) => { return pageCount - index } ) pagintationTriggers.reverse().unshift(1) return pagintationTriggers
}
Scenario 3: All other cases

We know what number should be in the center of our list: the current page. We also know how long the list should be. This allows us to get the first number in our array. Then we populate the list by adding an index to each element. At the end, we push 1 into the first place in our array and replace the last number with our last page number.

pagintationTriggersArray[0] = currentPage - visiblePagesThreshold + 1
const pagintationTriggers = pagintationTriggersArray.map( (paginationTrigger, index) => { return pagintationTriggersArray[0] + index }
)
pagintationTriggers.unshift(1);
pagintationTriggers[pagintationTriggers.length - 1] = pageCount
return pagintationTriggers

That covers all of our scenarios! We only have one more step to go.

Step 5: Render the list of numbers in BasePagination component

Now that we know exactly what number we want to show in our pagination, we need to render a trigger component for each one of them.

We do that using a v-for directive. Let’s also add a conditional class that will handle selecting our current page.

// BasePagination.vue
<template> ... <BasePaginationTrigger v-for="paginationTrigger in paginationTriggers" :class="{ 'base-pagination__description--current': paginationTrigger === currentPage }" :key="paginationTrigger" :pageNumber="paginationTrigger" class="base-pagination__description" @loadPage="onLoadPage" /> ...
</template>

And we are done! We just built a nice and reusable pagination component in Vue.

When to avoid this pattern

Although this component is pretty sweet, it’s not a silver bullet for all use cases involving pagination.

For example, it’s probably a good idea to avoid this pattern for content that streams constantly and has a relatively flat structure, like each item is at the same level of hierarchy and has a similar chance of being interesting to the user. In other words, something less like an article with multiple pages and something more like main navigation.

Another example would be browsing news rather than looking for a specific news article. We do not need to know where exactly the news is and how much we scrolled to get to a specific article.

That’s a wrap!

Hopefully this is a pattern you will be able to find useful in a project, whether it’s for a simple blog, a complex e-commerce site, or something in between. Pagination can be a pain, but having a modular pattern that not only can be re-used, but considers a slew of scenarios, can make it much easier to handle.

The post Creating a Reusable Pagination Component in Vue appeared first on CSS-Tricks.

Rundown Of Gen Z: What Does This Mean For Mobile Designers?

Rundown Of Gen Z: What Does This Mean For Mobile Designers?

Rundown Of Gen Z: What Does This Mean For Mobile Designers?

Suzanne Scacca

Just a few years ago, design blogs were all abuzz with tips on how to build websites for the millennial consumer. At this point, however, that’s old news. We know what millennials want from the online experience and have, for the most part, been able to meet their expectations.

But now we have a new generation of consumers to worry about: Generation Z.

Are they all that different from millennials?

As an old millennial myself, I can tell you that this next generation is one I don’t feel much of a connection to. I can remember a time when the most exciting part of my day was when my mom got off the phone and I was able to finally connect to the Internet with our dial-up AOL account.

This next generation doesn’t understand any of that. They weren’t caught between worlds the way many millennials were, which means they have a whole different set of expectations when it comes to the technology they interact with on a daily basis.

Consider this your quick and dirty guide to designing mobile websites for Gen Z.

What You Need to Know About Designing Mobile Web for Gen Z

According to Reality Bytes, a report published by WP Engine and The Center For Generational Kinetics, Gen Z cannot live without Internet access. More specifically:

  • 55% won’t go more than five hours without it.
  • 27% won’t go more than one.

Now, what’s really interesting about this particular generation is that, despite their attachment to the Internet, 61% of them prefer to shop on websites instead of mobile apps.

Considering how long they’ve had smart devices in their hands, it’s surprising that they’d gravitate towards browsers over native applications. That just goes to show you that native apps aren’t necessarily the best way to reach a mobile audience (especially if you want to make money from your app).

But all this is good news for you. Mobile apps are expensive to build and time-consuming to maintain. Plus, it’s quite difficult to convert users on mobile apps. If you were nervous about having to make the leap into mobile app development, or about losing money to those working in that field, don’t be. Generation Z wants your clients’ websites.

Now that you know which experience Gen Z is more likely to lean towards, it’s time to discuss designing for it.

Entertain Them

Before you do anything else, think about how to engage Gen Z visitors with entertainment.

According to Reality Bytes, entertainment is the primary reason why they visit the Internet:

Gen Z loves entertainment
Generation Z overwhelmingly prefers to be entertained online over anything else. (WP Engine) (Large preview)

Until now, the primary reason why consumers flocked to the Internet was for informational purposes. But that’s not all bad news for you as it means you have an excuse to reach out to older clients and say:

“Hey, times are changing! Here’s what’s on trend now and what your website needs in order to reach these new consumers.”

Just be careful: even for the most relaxed and youthful company, you don’t want to go over the top with adding entertaining elements into a mobile website. Just because 66% of Generation Z consumers name gaming as their #1 hobby doesn’t mean you need to build a mobile game and put it on your site. (Leave that to the gaming app developers.)

Instead, look at subtle ways to surprise Generation Z with something unexpected and engaging.

The first place to start? Video.

KFC has a great example of this right on its home page:

KFC funny video
KFC shares its well-known and hilarious video ads on its home page. (Source: KFC) (Large preview)

There’s a number of reasons why this video example is so awesome.

First, every visitor to the website — both on desktop and mobile — will see it right away. On mobile, visitors can’t even scroll down the home page. What you see above is what you get.

Next, this ensures your visitors get a taste of the brand’s humor and personality. Whereas content-driven sites or blogs can do that with GIFs and memes, Gen Z might not take the time to read content. Video makes sure they won’t miss out.

Also, this video is totally on brand, showcasing KFC’s humor in video form.

Even if you don’t have a humorous mascot to trot around, show off your client’s CEO or other engaging brand ambassador. Video is a great way to quickly suck Gen Z visitors in and let them know this is not going to be a dry or unmemorable experience.

If you don’t have video to play with, that’s okay. Think about adding humor as you educate visitors. Old Spice demonstrates:

Old Spice’s funny Ingredients pages
Old Spice’s informative, yet funny Ingredients pages. (Source: Old Spice) (Large preview)

Old Spice is another company that’s known for its entertaining video ads. However, their website also contains some humorous gems where you’d least expect them:

In the Ingredients section.

Visitors that are concerned about the ingredients within their deodorant can visit this page to learn more about what goes into each of the products. But read those descriptions closely. Not only are they transparent about what’s inside, but they also do it in a casual and playful way which says:

“Hey, we’re taking your concerns seriously. But don’t sweat it. We got you.”

Another way you can appeal to the entertainment-loving Generation Z is to add a social component to your site.

Don’t worry about building your own social network, community or forum either. Gen Z is going to flock to their favorite social platforms for that purpose: YouTube, Snapchat, Instagram, etc.

Instead, think about what it is that makes those environments so engage-worthy. Here’s an example from the Gymshark Central blog:

Gymshark blog post reactions
Gymshark uses social media-like reactions to improve blog engagement. (Source: Gymshark) (Large preview)

The blog post looks like any other. However, at the bottom of each post is this emoji reaction system. That’s pretty unique, right? Plus, this type of engagement doesn’t require much work from the reader. Simply click on the recognizable and well-labeled emoji and let the writer know what you thought of the content.

Another reason why this works so well is because Gymshark actively targets Gen Z customers. If you look on their website, you’ll see a section where they give discounts to college students.

So, if your client’s website needs to reach a younger audience, take a lesson from Gymshark. There’s no need to do a complete overhaul and convert an otherwise well-designed website into a superficial social network. Instead, add the most engaging elements from social networks and encourage your Gen Z visitors to interact more.

Personalize It

Think about what makes video games and social media so attractive to Gen Z. There’s obviously the fun aspect of it, but there’s another force at play that keeps users returning time and time again:

And that’s personalization.

This is something you should already be designing your mobile websites for as you target millennial consumers. However, if you haven’t bothered to add personalized touches to your sites, yet, you’re going to need to take this more seriously now.

Forbes Agency Council and YPulse worked together to find out what Generation Z really wants in terms of personalized experiences. Here’s a snippet from their findings:

“71% of the 3,000 respondents ages 14–29 said they prefer to receive offers that are customized to their location. In the same survey, 80% said they expect tailored onscreen experiences that not only target location but also recognize their interests and habits — who they are and how they self-identify.”

With 44% of Gen Z more likely to give up their personal data than other generations, you can’t afford to ignore this one.

One way to deliver a personalized experience based on what Gen Z visitors want is through push notifications. The only problem is, whether you have a mobile website or a progressive web app, push notifications are not supported on iOS devices.

While you can still use them to connect with Android users, consider other means for personalization that will help you connect with 100% of them.

Take, for instance, something as seemingly simple as what Amazon does with data:

Amazon home page personalization
About ¾ of the Amazon mobile home page contains personalized information. (Source: Amazon) (Large preview)

As you can see here, Amazon has saved a whole bunch of information about me:

  • My name and account information;
  • My cart items (which were not put there on this shopping trip);
  • My delivery location.

I also happen to own a Fire TV Stick, so this top ad is super relevant to me. Overall, I’m quite pleased with how tailor-made this first step inside the mobile website feels.

If you’re building a registration or membership system into your client’s website, make sure you’re leveraging user data to provide a personalized experience for them.

And if you don’t have a reason to ask mobile visitors to log in, that’s okay. You can still gather information by placing simply designed email subscription forms on the mobile website — preferably above the fold or at the very bottom. And most definitely on the home page.

Here’s a nice example from inkbox:

inkbox subscription form
inkbox uses a subscription form to start collecting information on visitors. (Source: inkbox) (Large preview)

inkbox has done a nice job with this subscription form. Even if mobile users scroll past the content on the page, they’re likely to see that white box screaming back at them, begging them to sign up.

Because there’s such a low commitment compared to the potential for such valuable rewards (like information on new products and access to exclusive discounts), Generation Z visitors will love this. Like I said earlier, they’re more than willing to give you their personal data if you can make it worth their while.

For mobile websites with a brick-and-mortar presence, geolocation features are non-negotiable. Generation Z shoppers often use their mobile devices while in-store, so this would definitely take their experience to the next level.

One of the easiest ways to implement this is with geolocation sensors like the ones used by The North Face:

The North Face geolocation features
The North Face auto-populates search parameters based on the user’s location. (Source: The North Face) (Large preview)

The above screenshot is what happens when I use the Find a Store feature on the mobile website. What’s great about this is it detected my location (which is currently Boston) and it auto-populated my search query with a nearby store.

Mobile users don’t have time to waste and Gen Z certainly won’t take kindly to a website that forces them to do all the work. Take what you know about your user — even if all you can detect is a location — and make their job of connecting with you easier.

Make Them Feel Special

Now, there’s a difference between adding personal touches to a website and taking it up a notch so that Generation Z visitors feel special. They’re going to need you to make them feel like their money and opinions and faces are worth more than anyone else’s.

You have to remember, this is the generation that grew up with reality TV and smartphone cameras pointed at their faces. That’s why it’s no surprise they’re known as the “influencer” generation.

On a related note, this makes Generation Z much more likely to build a relationship with brands as there’s the hope that, someday, they’ll reward their loyalty with a public-facing partnership.

Your clients will ultimately have to decide how far they want to take this. After all, affiliate partnerships and influencer marketing won’t make sense for everyone. That said, there are other ways to reap the advantages of having a generation of consumers willing to “help” a brand out.

According to data from the IBM Institute for Business Value and the National Retail Federation, 44% of Generation Z consumers said they’d be happy to share ideas for product design. That makes sense as that level of contribution will make them feel like they have more invested in the relationship with the company.

While your clients need to decide if consumers have any say in the shaping of their offering, you can do something about this from the web design side of things.

Check out what the Panera website is doing to solicit visitors for feedback:

Panera feedback request
Panera calls attention to its redesign and asks visitors for feedback. (Source: Panera) (Large preview)

These “Feedback” tabs are a somewhat new feature on the web, but more and more websites are certainly taking advantage of it. With this intro pop-up from Panera, it’s looking as though they want to make sure their visitors take notice, too.

This is a smart move in terms of trying to appeal to a younger audience. You let them know, straight out the gate, “We made some changes!” and then ask them to provide feedback. But that’s not all. Panera is saying: “Thanks for your help.” This implies that they want customers to take a greater part in shaping both the online experience and the brand itself.

There are other ways to make Generation Z feel like they’re more than just the average customer.

Sephora has created something called the “Rewards Bazaar” to layer on top of its more traditional BeautyInsider loyalty program:

Sephora Rewards Bazaar loyalty program
Rewards Bazaar is Sephora’s point-based rewards system that can be used to buy products and experiences. (Source: Sephora) (Large preview)

The Rewards Bazaar program works similarly to credit card points or airline miles programs. In other words, the more money customers spend with Sephora, the more points they accumulate.

And points don’t just buy them more Sephora goods. Points buy them experiences, like an Algenist R&R sleep retreat in Tucson, Arizona. They can also get “swag” bundles full of makeup and body products, clothes, artwork and more.

Sephora is rewarding their loyalty with celeb-like treats.

If you want to go crazy and actually encourage Gen Z customers to act like the influencers they so desire to be, take inspiration from this American Eagle example:

American Eagle’s unofficial influencer program
American Eagle asks customers to become unofficial influencers with AE x ME. (Source: American Eagle) (Large preview)

Generation Z customers already have their cameras ready to snap the next Insta-worthy photo, so why not give them a reason to put it to good use?

American Eagle has created an influencer-like program called AE x ME. Really, this is nothing more than a brilliant ploy to ask customers for user-generated content that American Eagle can then use on its website and beyond.

Whereas brands usually have to dig around for these types of photos or videos featuring their products in action, American Eagle is saying:

“You’re going to take pictures of your awesome new duds anyway. Why not let us show them off to a much larger audience for you?”

That’s not the only reward American Eagle dangles in front of influencers. While most of the people featured get a unique URL that features their Instagram handle and some information about them, there’s a profile at the bottom of this page that suggests there might be a greater opportunity here.

American Eagle influencer rewards
American Eagle turned a customer into a campaign model. (Source: American Eagle) (Large preview)

Daevin tagged American Eagle in one of his posts and then was flown out to become one of the faces in an upcoming campaign for the famous clothing brand. If that’s not living the dream for Gen Z influencer wannabes, I don’t know what is.

Keep It Real

One last thing to keep in the back of your minds as you design websites for Generation Z is the “keep it real” component. Anyone else remember this Dave Chappelle gem?

Chappelle Show keep it real GIF
Dave Chappelle struggles to keep it real, long before Gen Z had a say in it. (Source: Giphy)

Gen Z has very high standards when it comes to the authenticity of a company. And, not only that, they expect brands to be socially good, too.

Reality Bytes reports that:

  • 79% of Gen Z consumers respect brands more if they keep their images Photoshop-free.
  • 84% of them trust companies that put real customers in their ad campaigns (see American Eagle’s example above).
  • 69% of them will buy from companies that give money to and support good causes.

Really, what all of this data points to is this:

Generation Z wants to know that they’re engaging with genuinely good and honest people; not just a brand name.

That’s why, if your clients have a strong mission and values, their websites need to have one page specifically dedicated to them.

One way to do this is with a partnership highlight page like eos has:

eos recycling page
eos touts its recycling initiatives and partnership with TerraCycle. (Source: eos) (Large preview)

The eos website actually has two pages dedicated to this recycling cause. The first is called “Social Responsibility” where the company discusses its mission to build clean products. The second is called “TerraCycle” where it goes more into the recycling partnership.

For consumers looking to buy from companies that take causes like this seriously, these landing pages may be all they need to convince them to convert.

Samsung does something similar on its About Us page, except the key difference is that it calls out social responsibility and sustainability as part of its core company values:

Samsung social responsibility page
Samsung makes it its mission to make the environment a priority. (Source: Samsung) (Large preview)

This way, it’s not just Samsung telling customers where their products come from or where they end up. Instead, their entire identity becomes synonymous with this mission to create a better world.

When you compare them to companies that prioritize profit before anything else or who have been accused of being dishonest for the purposes of driving up their bottom line, Samsung stands out as a shining example of what to do.

Another way to stand out with this concept of social goodness is by showing customers how they’re contributing to a good cause by giving their business to them.

The Giving Keys is a brand that’s built its entire concept around this.

The Giving Keys social goodness
The Giving Keys highlights customer stories. (Source: The Giving Keys) (Large preview)

The Giving Keys isn’t just a website to buy jewelry from. This is a place where consumers can make a difference in more ways than one. It works like this:

  • Customers purchase a piece of jewelry and add a personalized inscription to the key charm.
  • They then give the inspirational message jewelry to someone who needs it. (The website features a section where customers can “Share Your Story” to talk about who they gave it to and why.)
  • In turn, the company uses a portion of the sale to help create jobs for the homeless.

This is the kind of thing that makes Generation Z stop and think twice about giving their money to a money-hungry mega brand instead of a smaller company that backs a good cause.

Wrapping Up

It’s an interesting thing, isn’t? Raise kids in a certain timeframe and environment and they’ll turn out to be completely different shoppers than the generations before them.

Thankfully, the same kinds of technologies that have powered Generation Z’s lives are the ones we can use to learn more about them. And we’ve certainly learned a lot. As you go about designing websites for clients in the future, don’t forget to bring up the Gen Z question to them. Even if they’re not selling to them now, someday in the not-so-distant future, they will.

Further Reading on SmashingMag:

Smashing Editorial (ra, yk, il)
Web Design & SEO: Everything Designers Should Know

UX design and a solid SEO strategy go hand in hand.

Design is here to boost user experiences, inspire users to spend more time on your pages, and ensure they don’t leave your site frustrated. This way, it minimizes bounce rates and turns your visitors into leads and, ultimately, sales.

However, designing a spotless website is pointless if it’s not visible on Google. This is where SEO shines. It increases your site’s exposure in the SERPs, drives greater traffic to it, and gives you the opportunity to delight a visitor with your gorgeous website design and quality content.

When merged together, web design and SEO are indicators of your credibility and professionalism.

So, let’s see how to combine them for a better online performance.

The Basics of Implementing SEO and Web Design

In the world of digital marketing, building your online presence on strong foundations is critical. If some basic aspects of your site are poorly managed, you cannot expect your web design or SEO to deliver exceptional results.

Here are key elements of any strong web design:

 

Choosing a Domain Name

 

Stuffing your domain with a bunch of keywords won’t help. They look spammy and may hurt both your rankings and user experience.

Remember that there are millions of domain names out there. So, your goal is to make your domain name catchy and memorable. It needs to be relevant to your business’ focus and be easy to spell and pronounce. To make your site easier to find, it’s always good to use your brand name as your domain name, too.

 

Investing in the Right Hosting Provider

 

Choosing the right hosting plan directly impacts your website speed, server performance, and uptime/downtime. These are all important UX factors Google considers while indexing and ranking your site.

 

Building Your Website Using a Reliable CMS

 

A solid CMS is one that is easy to use and manage. You should be able to design your site however you want, without taking additional courses in web design. It should also help you make your site mobile-friendly, add social media integrations effortlessly, and use various content management tools. The most popular CMS option is definitely WordPress, followed by Joomla, Drupal, TYPO3, and Squarespace.

When choosing the right CMS for your business, ask yourself how it will impact your online performance. For example, does it allow you to customize your URLs? Can you make on-page changes without changing the URL? Some systems create meta tags (meta descriptions and title tags) automatically, so you should check whether you can modify them.

The Link Between Web Design and Indexability

Did you now that Google crawls each page of your site individually when indexing it? That’s why you need to add internal links to make these pages findable by search engines. Most importantly, you need to check whether all your interlinks work.

Start with the simple Google search. For example, the site: operator will help you see all your pages that are indexed. You could also check robots.txt files (https//www.yourdomainname.com/robots.txt) to identify your site’s disallows. Sure, you can speed this process up using web crawlers like Screaming Frog or Google Search Console’s Index Status that will do the job for you.

Keyword Research and Meta Tags

On-page SEO can be viewed as a process of optimizing individual pages on a site to rank higher. In short, you need to do detailed keywords research and optimize your key page elements for them.

  • A title is the first element a visitor sees in the SERPs. It should be creative, intriguing, and authentic to stand out from other results in the SERPs. Above all watch your title length (it should be up to 60 characters) and add your major keywords to it naturally.
  • Meta descriptions tell a searcher what the page is about. It’s pretty limited- you need to use these 160 characters wisely to grab people’s attention and entice them to click on your link.
  • Headings increase the readability of your textual content, making it more user-friendly. Use them to separate your content into smaller chunks and help visitors find the information they’re looking for easily.
  • Google still cannot understand your visual content. When optimizing your images, infographics, and image captioning for visibility, make sure you have a clear alt text that describes what the image is about. Brief descriptions including your main keywords will be enough.

Information Architecture and URLs

Which URL seems more logical to you?

  1. www.example.com/services/content-marketing/audits
  2. www.example.com/s456/s4/85

The first one, I hope.

Well-optimized URLs tell users what the page is about and help them find the desired information or products faster. Just like title tags and meta descriptions, they provide a wider context around your keywords for both users and search engines. Precisely because of that, your URLs need to be descriptive, short, understandable, and optimized for your major keywords.

Simplifying Website Navigation

Navigation goes beyond a simple menu bar at the top of your site. When used properly, it inspires people to stay more on your site and browse through it.

When building website navigation, it’s critical to understand the needs and expectations of your potential customers. Just like at any physical store, website navigation should help a potential customer find a product or content faster and guide them through their buyer journey towards finalizing a purchase. If a customer needs to waste their time thinking where to click, that’s a clear sign you need to improve your navigation.

The Impact of Page Load Speed on Rankings

Page speed is one of the most significant ranking factors. And, with the 2018 Speed Update, it has become a notable ranking signal for mobile devices, too.

Page load times are important for a good reason- they impact user experiences and can result in either higher conversions or bounce rates. Stats back me up on that. For example, did you know that your visitors expect your site to load in less than 2 seconds? And, if it fails to do so, almost half of them would leave it. Apart from losing potential leads and conversions, high bounce rates have a negative impact on your online performance and ranking in the long run.

For starters, use Google’s Page Speed Insights to find out how fast your pages are. Here are a few steps to take to boost your site speed, such as:

  • Choosing the right hosting plan
  • Compressing your high-quality images
  • Using browser caching
  • Removing auto-play content
  • Reducing the number of plugins and popups
  • Investing in a reliable content delivery network (CDN)

Website Responsiveness is the Mobile-First Era

With the number of mobile users, mobile searches have also grown. For example, did you know that 57% of all US online traffic is generated through mobile devices?

And, for your mobile visitors, their browsing experience determines whether they will buy from you. Stats say that 52% of your potential customers would not to make a purchase after a negative mobile experience.

Given these figures, it’s not surprising that Google is constantly striving to improve mobile users’ satisfaction and provide them with relevant results. This year, they finally rolled out the Mobile-First Index, meaning that they’re now indexing a mobile version of your site.

And, to meets these standards, you need to make your site design highly responsive.

What does this mean?

Use Google’s Mobile-Friendly Test to check how friendly your pages are to mobile users. When optimizing your site, pay attention to the overall site’s usability, such as its speed and page layout. How appealing is your site to mobile users? Can they read your content and see your videos without having to zoom and pinch continually? What about your CTA’s and links- are they easy to tap? Does your content fit the screen size, irrespective of its size? Are your forms easy to fill out from mobile devices?

Putting it All Together

Even if you believed that SEO and web design have nothing in common, I hope this article proves you wrong. Your website design impacts visitors’ perceptions of your brand, making it feel professional and authoritative. Above all, it impacts user experiences and impacts their engagement and purchase decisions. These are all factors Google takes into account when ranking you.

 

Featured image via DepositPhotos

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

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

Jetpack Gutenberg Blocks

I remember when Gutenberg was released into core, because I was at WordCamp US that day. A number of months have gone by now, so I imagine more and more of us on WordPress sites have dipped our toes into it. I just wrote about our first foray here on CSS-Tricks and using Gutenberg to power our newsletter.

Jetpack, of course, was ahead of the game. Jetpack adds a bunch of special, powerful blocks to Gutenberg that it’s easy to see how useful they can be.

Here they are, as of this writing:

Maps! Subscriptions! GIFs! There are so many good ones. Here’s a look at a few more:

The form widget, I hear, is the most popular.

You get a pretty powerful form builder right within your editor:

Instant Markdown Processing

Jetpack has always enabled Markdown support for WordPress, so it’s nice that there is a Markdown widget!

PayPal Selling Blocks

There is even basic eCommerce blocks, which I just love as you can imagine how empowering that could be for some folks.

You can read more about Jetpack-specific Gutenberg blocks in their releases that went out for 6.8 and 6.9. Here at CSS-Tricks, we use a bunch of Jetpack features.

The post Jetpack Gutenberg Blocks appeared first on CSS-Tricks.

A Gutenburg-Powered Newsletter

I like Gutenberg, the new WordPress editor. I’m not oblivious to all the conversation around accessibility, UX, and readiness, but I know how hard it is to ship software and I’m glad WordPress got it out the door. Now it can evolve for the better.

I see a lot of benefit to block-based editors. Some of my favorite editors that I use every day, Notion and Dropbox Paper, are block-based in their own ways and I find it effective. In the CMS context, even moreso. Add the fact that these aren’t just souped-up text blocks, but can be anything! Every block is it’s own little configurable world, outputting anything it needs to.

I’m using Gutenberg on a number of sites, including my personal site and my rambling email site, where the content is pretty basic. On a decade+ old website like CSS-Tricks though, we need to baby step it. One of our first steps was moving our newsletter authoring into a Gutenberg setup. Here’s how we’re doing that.

Gutenberg Ramp

Gutenberg Ramp is a plugin with the purpose of turning Gutenberg on for some areas and not for others. In our case, I wanted to turn on Gutenberg just for newsletters, which is a Custom Post Type on our site. With the plugin installed and activated, I can do this now in our functions.php:

if (function_exists('gutenberg_ramp_load_gutenberg')) { gutenberg_ramp_load_gutenberg(['post_types' => [ 'newsletters' ]]);
}

Which works great:

Classic editor for posts, Gutenberg for the Newsletters Custom Post Type

We already have 100+ newsletters in there, so I was hoping to only flip on Gutenberg over a certain date or ID, but I haven’t quite gotten there yet. I did open an issue.

What we were doing before: pasting in HTML email gibberish

We ultimately send out the email from MailChimp. So when we first started hand-crafting our email newsletter, we made a template in MailChimp and did our authoring right in MailChimp:

The MailChimp Editor

Nothing terrible about that, I just much prefer when we keep the clean, authored content in our own database. Even the old way, we ultimately did get it into our database, but we did it in a rather janky way. After sending out the email, we’d take the HTML output from MailChimp and copy-paste dump it into our Newsletter Custom Post Type.

That’s good in a way: we have the content! But the content is so junked up we can basically never do anything with it other than display it in an as the content is 100% bundled up in HTML email gibberish.

Now we can author cleanly in Gutenberg

I’d argue that the writing experience here is similar (MailChimp is kind of a block editor too), but nicer than doing it directly in MailChimp. It’s so fast to make headers, lists, blockquotes, separators, drag and drop images… blocks that are the staple of our newsletter.

Displaying the newsletter

I like having a permanent URL for each edition of the newsletter. I like that the delivery mechanism is email primarily, but ultimately these are written words that I’d like to be a part of the site. That means if people don’t like email, they can still read it. There is SEO value. I can link to them as needed. It just feels right for a site like ours that is a publication.

Now that we’re authoring right on the site, I can output in a WordPress loop just like any other post or page and get clean output.

But… we have that “old” vs. “new” problem in that old newsletters are HTML dumps, and new newsletters are Gutenberg. Fortunately this wasn’t too big of a problem, as I know exactly when the switch happened, so I can display them in different ways according to the ID. In my `single-newsletters.php`:

 283082) { ?>  

CSS-Tricks Newsletter #

At the moment, the primary way we display the newsletters is in a little faux phone UI on the newsletters page, and it handles both just fine:

Old and new newsletters display equally well, it’s just the old newsletters need to be iframed and I don’t have as much design control.

So how do they actually get sent out?

Since we aren’t creating the newsletters inside MailChimp anymore, did we have to find another way to send them out? Nope! MailChimp can send out a newsletter based on an RSS feed.

And WordPress is great at coughing up RSS feeds for Custom Post Yypes. You can do…

/feed/?post_type=your-custom-post-type

But… for us, I wanted to make sure that any of those old HTML dump emails never ended up in this RSS feed, so that the new MailChimp RSS feed would never see them an accidentally send them. So I ended up making a special Page Template that outputs a custom RSS feed. I figured that would give us ultimate control over it if we ever need it for even more things.

<?php
/*
Template Name: RSS Newsletterss
*/ the_post();
$id = get_post_meta($post->ID, 'parent_page_feed_id', true); $args = array( 'showposts' => 5, 'post_type' => 'newsletters', 'post_status' => 'publish', 'date_query' => array( array( 'after' => 'February 19th, 2019' ) )
); $posts = query_posts($args); header('Content-Type: '.feed_content_type('rss-http').'; charset='.get_option('blog_charset'), true);
echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>';
?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" <?php do_action('rss2_ns'); ?>> <channel> <title>CSS-Tricks Newsletters RSS Feed</title> <atom:link href="<?php self_link(); ?>" rel="self" type="application/rss+xml" /> <link><?php bloginfo_rss('url') ?></link> <description><?php bloginfo_rss("description") ?></description> <lastBuildDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_lastpostmodified('GMT'), false); ?></lastBuildDate> <language><?php echo get_option('rss_language'); ?></language> <sy:updatePeriod><?php echo apply_filters( 'rss_update_period', 'hourly' ); ?></sy:updatePeriod> <sy:updateFrequency><?php echo apply_filters( 'rss_update_frequency', '1' ); ?></sy:updateFrequency> <?php do_action('rss2_head'); ?> <?php while( have_posts()) : the_post(); ?> <item> <title><?php the_title_rss(); ?></title> <link><?php the_permalink_rss(); ?></link> <comments><?php comments_link(); ?></comments> <pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate> <dc:creator><?php the_author(); ?></dc:creator> <?php the_category_rss(); ?> <guid isPermaLink="false"><?php the_guid(); ?></guid> <description><![CDATA[<?php the_excerpt_rss(); ?>]]></description> <content:encoded><![CDATA[<?php the_content(); ?>]]></content:encoded> <wfw:commentRss><?php echo get_post_comments_feed_link(); ?></wfw:commentRss> <slash:comments><?php echo get_comments_number(); ?></slash:comments> <?php rss_enclosure(); ?> <?php do_action('rss2_item'); ?> </item> <?php endwhile; ?> </channel> </rss>

Styling…

With a MailChimp RSS campaign, you still have control over the outside template like any other campaign:

But then content from the feed just kinda gets dumped in there. Fortunately, their preview tool does go grab content for you so you can actually see what it will look like:

And then you can style that by injecting a <style> block into the editor area yourself.

That gives us all the design control we need over the email, and it’s nicely independent of how we might choose to style it on the site itself.

The post A Gutenburg-Powered Newsletter appeared first on CSS-Tricks.

How To Align Things In CSS

How To Align Things In CSS

How To Align Things In CSS

Rachel Andrew

We have a whole selection of ways to align things in CSS today, and it isn’t always an obvious decision which to use. However, knowing what is available means that you can always try a few tactics if you come across a particular alignment problem.

In this article, I will take a look at the different alignment methods. Instead of providing a comprehensive guide to each, I’ll explain a few of the sticking points people have and point to more complete references for the properties and values. As with much of CSS, you can go a long way by understanding the fundamental things about how the methods behave, and then need a place to go look up the finer details in terms of how you achieve the precise layout that you want.

Aligning Text And Inline Elements

When we have some text and other inline elements on a page, each line of content is treated as a line box. The property text-align will align that content on the page, for example, if you want your text centered, or justified. Sometimes, however, you may want to align things inside that line box against other things, for example, if you have an icon displayed alongside text, or text of different sizes.

In the example below, I have some text with a larger inline image. I am using vertical-align: middle on the image to align the text to the middle of the image.

The line-height Property And Alignment

Remember that the line-height property will change the size of the line-box and therefore can change your alignment. The following example uses a large line-height value of 150px, and I have aligned the image to top. The image is aligned to the top of the line box and not the top of the text, remove that line-height or make it less than the size of the image and the image and text will line up at the top of the text.

It turns out that line-height and indeed the size of text is pretty complicated, and I’m not going to head down that rabbit hole in this article. If you are trying to precisely align inline elements and want to really understand what is going on, I recommend reading “Deep Dive CSS: Font Metrics, line-height And vertical-align.”

When Can I Use The vertical-align Property?

The vertical-align property is useful if you are aligning any inline element. This includes elements with display: inline-block. The content of table cells can also be aligned with the vertical-align property.

The vertical-align property has no effect on flex or grid items, and therefore if used as part of a fallback strategy, will cease to apply the minute the parent element is turned into a grid or flex Container. For example, in the next pen, I have a set of items laid out with display: inline-block and this means that I get the ability to align the items even if the browser does not have Flexbox:

See the Pen inline-block and vertical-align by Rachel Andrew.

In this next pen, I have treated the inline-block as a fallback for Flex layout. The alignment properties no longer apply, and I can add align-items to align the items in Flexbox. You can tell that the Flexbox method is in play because the gap between items that you will get when using display: inline-block is gone.

See the Pen inline-block flex fallback by Rachel Andrew.

The fact that vertical-align works on table cells is the reason that the trick to vertically center an item using display: table-cell works.

Now that we do have better ways to align boxes in CSS (as we will look at in the next section), we don’t need to employ the vertical-align and text-align properties in places other than the inline and text elements for which they were designed. However, they are still completely valid to use in those text and inline formats, and so remember if you are trying to align something inline, it is these properties and not the Box Alignment ones that you need to reach for.

Box Alignment

The Box Alignment Specification deals with how we align everything else. The specification details the following alignment properties:

  • justify-content
  • align-content
  • justify-self
  • align-self
  • justify-items
  • align-items

You might already think of these properties as being part of the Flexbox Specification, or perhaps Grid. The history of the properties is that they originated as part of Flexbox, and still exist in the Level 1 specification; however, they were moved into their own specification when it became apparent that they were more generally useful. We now also use them in Grid Layout, and they are specified for other layout methods too, although current browser support means that you won’t be able to use them just yet.

Therefore, next time someone on the Internet tells you that vertical alignment is the hardest part of CSS, you can tell them this (which even fits into a tweet):

.container { display: flex; align-items: center; justify-content: center;
}

In the future, we may even be able to dispense with display: flex, once the Box Alignment properties are implemented for Block Layout. At the moment, however, making the parent of the thing you want centering a flex container is the way to get alignment horizontally and vertically.

The Two Types Of Alignment

When aligning flex and grid items, you have two possible things to align:

  1. You have the spare space in the grid or flex container (once the items or tracks have been laid out).
  2. You also have the item itself inside the grid area you placed it in, or on the cross axis inside the flex container.

I showed you a set of properties above, and the alignment properties can be thought of as two groups. Those which deal with distribution of spare space, and those which align the item itself.

Dealing With Spare Space: align-content And justify-content

The properties which end in -content are about space distribution, so when you choose to use align-content or justify-content you are distributing available space between grid tracks or flex items. They don’t change the size of the flex or grid items themselves; they move them around because they change where the spare space goes.

Below, I have a flex example and a grid example. Both have a container which is larger than required to display the flex items or grid tracks, so I can use align-content and justify-content to distribute that space.

See the Pen justify-content and align-content by Rachel Andrew.

Moving Items Around: justify-self, align-self, justify-items And align-items

We then have align-self and justify-self as applied to individual flex or grid items; you can also use align-items and justify-items on the container to set all the properties at once. These properties deal with the actual flex or grid item, i.e. moving the content around inside the Grid Area or flex line.

  • Grid Layout
    You get both properties as you can shift the item on the block and inline axis as we have a defined Grid Area in which it sits.
  • Flex Layout
    You can only align on the cross axis as the main axis is controlled by space distribution alone. So if your items are a row, you can use align-self to shift them up and down inside the flex line, aligning them against each other.

In my example below, I have a flex and a grid container, and am using align-items and align-self in Flexbox to move the items up and down against each other on the cross axis. If you use Firefox, and inspect the element using the Firefox Flexbox Inspector, you can see the size of the flex container and how the items are being moved vertically inside of that.

Flex items aligned in their container
Aligned flex items with the flex container highlighted in Firefox (Large preview)

In grid, I can use all four properties to move the items around inside their grid area. Once again, the Firefox DevTools Grid Inspector will be useful when playing with alignment. With the grid lines overlaid, you can see the area inside which the content is being moved:

Aligned grid items
Aligned grid items with the Grid highlighted in Firefox (Large preview)

Play around with the values in the CodePen demo to see how you can shift content around in each layout method:

See the Pen justify-self, align-self, justify-items, align-items by Rachel Andrew.

Confused By align And justify

One of the cited issues with people remembering the alignment properties in Grid and Flexbox, is that no one can remember whether to align or to justify. Which direction is which?

For Grid Layout, you need to know if you are aligning in the Block or Inline Direction. The Block direction is the direction blocks lay out on your page (in your writing mode), i.e. for English that is vertically. The Inline direction is the direction in which sentences run (so for English that is left to right horizontally).

To align things in the Block Direction, you will use the properties which start with align-. You use align-content to distribute space between grid tracks, if there is free space in the grid container, and align-items or align-self to move an item around inside the grid area it has been placed in.

The below example has two grid layouts. One has writing-mode: horizontal-tb (which is the default for English) and the other writing-mode: vertical-rl. This is the only difference between them. You can see that the alignment properties which I have applied work in exactly the same way on the block axis in both modes.

See the Pen Grid Block Axis Alignment by Rachel Andrew.

To align things in the inline direction, use the properties which begin with justify-. Use justify-content to distribute space between grid tracks, and justify-items or justify-self to align items inside their grid area in the inline direction.

Once again, I have two grid layout examples so that you can see that inline is always inline — no matter which writing mode you are using.

See the Pen Grid Inline Alignment by Rachel Andrew.

Flexbox is a little trickier due to the fact that we have a main axis which can be changed to row or column. So, let’s first think about that main axis. It is set with the flex-direction property. The initial (or default) value of this property is row which will lay the flex items out as a row in the writing mode currently in use — this is why when working in English, we end up with items laid out horizontally when we create a flex container. You can then change the main axis to flex-direction: column and the items will be laid out as a column which means they are laid out in the block direction for that writing mode.

As we can do this axis switching, the most important factor in Flexbox is asking, “Which axis is my main axis?” Once you know that, then for alignment (when on your main axis) you simply use justify-content. It doesn’t matter if your main axis is row or column. You control space between the flex items with justify-content.

See the Pen justfy-content in Flexbox by Rachel Andrew.

On the cross axis, you can use align-items which will align the items inside the flex container or flex line in a multi-line flex container. If you have a multi-line container using flex-wrap: wrap and have space in that container, you can use align-content to distribute the space on the cross axis.

In the example below, we are doing both with a flex container displayed as a row and a column:

See the Pen Cross axis alignment in Flexbox by Rachel Andrew.

When justify-content Or align-content Do Not Work

The justify-content and align-content properties in Grid and Flexbox are about distributing extra space. So the thing to check is that you have extra space.

Here is a Flex example: I have set flex-direction: row and I have three items. They don’t take up all of the space in the flex container, so I have spare space on the main axis, the initial value for justify-content is flex-start and so my items all line up at the start and the extra space is at the end. I am using the Firefox Flex Inspector to highlight the space.

Flex items aligned left, highlighted spare space on the right
The spare space at the end of the container (Large preview)

If I change flex-direction to space-between, that extra space is now distributed between the items:

Flex items aligned so space is distributed between the items
The spare space is now between the items (Large preview)

If I now add more content to my items so they become larger and there is no longer any additional space, then justify-content does nothing — simply because there is no space to distribute.

Flex items are filling the container with no spare space
There is now no space to distribute (Large preview)

A common question I’m asked is why justify-content isn’t working when flex-direction is column. This is generally because there is no space to distribute. If you take the above example and make it flex-direction: column, the items will display as a column, but there will be no additional space below the items as there is when you do flex-direction: row. This is because when you make a Flex Container with display: flex you have a block level flex container; this will take up all possible space in the inline direction. In CSS, things do not stretch in the block direction, so no extra space.

Flex items arranged as a column
The column is only as tall as needed to display the items (Large preview)

Add a height to the container and — as long as that is more than is required to display the items — you have extra space and therefore justify-content will work on your column.

A column of flex items with space between them.
Adding a height to the container means we have spare space (Large preview)

Why Is There No justify-self In Flexbox?

Grid Layout implements all of the properties for both axes because we always have two axes to deal with in Grid Layout. We create tracks (which may leave additional space in the grid container in either dimension,) and so we can distribute that space with align-content or justify-content. We also have Grid Areas, and the element in that area may not take up the full space of the area, so we can use align-self or justify-self to move the content around the area (or align-items, justify-items to change the alignment of all items).

Flexbox does not have tracks in the way that Grid layout does. On the main axis, all we have to play with is the distribution of space between the items. There is no concept of a track into which a flex item is placed. So there is no area created in which to move the item around in. This is why there is no justify-self property on the main axes in Flexbox.

Sometimes, however, you do want to be able to align one item or part of the group of items in a different way. A common pattern would be a split navigation bar with one item being separated out from the group. In that situation, the specification advises the use of auto margins.

An auto margin will take up all of the space in the direction it is applied, which is why we can center a block (such as our main page layout) using a left and right margin of auto. With an auto margin on both sides, each margin tries to take up all the space and so pushes the block into the middle. With our row of flex items, we can add margin-left: auto to the item we want the split to happen on, and as long as there is available space in the flex container, you get a split. This plays nicely with Flexbox because as soon as there is no available space, the items behave as regular flex items do.

Flexbox And Micro-Components

One of the things I think is often overlooked is how useful Flexbox is for doing tiny layout jobs, where you might think that using vertical-align is the way to go. I often use Flexbox to get neat alignment of small patterns; for example, aligning an icon next to text, baseline aligning two things with different font sizes, or making form fields and buttons line up properly. If you are struggling to get something to line up nicely with vertical-align, then perhaps try doing the job with Flexbox. Remember that you can also create an inline flex container if you want with display: inline-flex.

There is no reason not to use Flexbox, or even Grid for tiny layout jobs. They aren’t just for big chunks of layout. Try the different things available to you, and see what works best.

People are often very keen to know what the right or wrong way to do things is. In reality, there often is no right or wrong; a small difference in your pattern might mean the difference between Flexbox working best, where otherwise you would use vertical-align.

Wrapping Up

To wrap up, I have a quick summary of the basics of alignment. If you remember these few rules, you should be able to align most things with CSS:

  1. Are you aligning text or an inline element? If so, you need to use text-align, vertical-align, and line-height.
  2. Do you have an item or items you want to align in the center of the page or container? If so, make the container a flex container then set align-items: center and justify-content: center.
  3. For Grid Layouts, the properties that start with align- work in the Block direction; those which start with justify- work in the inline direction.
  4. For Flex Layouts, the properties that start with align- work on the Cross Axis; those which start with justify- work on the main axis.
  5. The justify-content and align-content properties distribute extra space. If you have no extra space in your flex or grid container, they will do nothing.
  6. If you think you need justify-self in Flexbox, then using an auto margin will probably give you the pattern you are after.
  7. You can use Grid and Flexbox along with the alignment properties for tiny layout jobs as well as main components — experiment!

For more information about alignment, see these resources:

Smashing Editorial (il)
Should You Be Building Progressive Web Apps?

Take a close look at Monetate’s Ecommerce Quarterly Report for Q2 2018 and you might not be happy about the state of mobile websites it depicts.

The good news is that smartphones drive significantly more traffic to websites than all other devices with 52.73%:

But conversions? Ehhhh…

Smartphone conversions lag behind all other devices with 2.03%.

It’s not just conversion rates that are low either. There are also fewer pages looked at, which means engagement rates suffer on the mobile web, too.

It’s no wonder, then, why businesses want to create mobile apps. According to a Criteo Mobile Commerce Growth report from 2017, mobile apps convert at a rate of 3x their web counterparts.

That said, no matter how well users convert on mobile apps, the cost to build and maintain one is out of reach for many businesses. So, what do you do when your client wants to capitalize on this mobile-first world? Tell them to be content with the mobile web for now?

Nope! It’s time to turn their attention to progressive web apps.

What Is a Progressive Web App?

In the simplest of terms, progressive web apps (or PWAs) bridge the gap between the mobile web and mobile apps. They take a basic set of components — an app shell, service workers, and app manifest — then serve them through HTTPS to give users the convenience of the mobile web within an app-like experience.

Google has a bunch of starter guides that will walk you through the process of building a PWA from-scratch, in case you’re interested in learning more.

PWAs are:

Secure

They must run through HTTPS, which makes them inherently more secure than mobile websites that don’t always have SSL certificates in place.

Fast

According to this infographic published by AppInstitute, progressive web apps are 15x faster than native mobile apps.

Unlike mobile apps that tend to drain battery power and bandwidth, PWAs don’t have that problem since they’re served over the web.

Searchable

Users don’t have to dig through an app store to find a PWA. They can find them in their mobile search browser as this search for Flipkart’s PWA demonstrates:

That also means less work for you.

Prepping information and screenshots for an app store listing takes time. If you’re already doing SEO for your clients’ websites, then you can just use that for your PWA.

And working with each of the individual app store’s rules and timelines (because you have to submit separately to Apple and Google) is a pain. Whether you’re launching an app or pushing an update through, launch will never truly be predictable as their teams have to review and approve your app first.

PWAs, again, are much easier. You own it all, which means that when someone searches for and finds the PWA in search, the latest and greatest version is what they’ll encounter. There’s no red tape here.

Convenient

PWAs can be saved to mobile home screens the way apps can, too. For example, here is the Weather Channel PWA:

Users can then save it to their home screen, so that the icon displays alongside their other apps:

If you want to help mobile users get the most out of it, let them know it’s easy to get one-click access to with a small popup notification.

Online / Offline

PWAs are a really great choice for businesses that want to get the mobile face of their company into the hands of a global audience. For visitors that live in remote areas or ones that simply have unreliable Internet access, the offline storage component of PWAs make them the obvious choice over mobile websites.

Feature-rich

Unlike mobile websites which are limited by the technology sitting behind them, PWAs are like mobile apps in that they can leverage a smartphone’s features. While PWAs don’t have the ability to directly integrate with mobile apps, they can sync up with your users’ telephony features (like push notifications).

Great Looking

Building a website that works just as well for desktop as it does for mobile can be a challenge. Thanks to the app shell, a PWA has a significantly improved and upgraded look from a standard website on mobile.

For instance, this is the Twitter Lite interface:

Notice how the stream of content fits beautifully within the borders of the page. Also, check out the header and blue new tweet button. These elements hold firm no matter where visitors go on the Twitter website or how far down the page they scroll.

You can also greatly improve the UI of things like internal search and filtering as Housing.com does:

By improving the look and functionality of your web presence with a PWA, you’ll encourage more mobile users to engage.

PWAs Are Engaging!

All of the elements above will certainly help drive up engagement rates and conversions if you’re making the switch from a mobile website to a PWA. There’s plenty of proof online that demonstrates how and why this happens, too:

AliExpress saw twice as many mobile visitors and an 82% increase in iOS user conversion rate alone after switching to a PWA.

Lancome decreased the time it took their mobile web page to become interactive by 84%. In turn, their bounce rate dropped by 15% and they had a 17% boost in conversions.

MakeMyTrip used their PWA’s increased speeds to increase shopping sessions by 160% and conversions by 300%.

Needless to say, your clients don’t need to feel trapped or held back by the constraints of the mobile web. While it’s still important to have a presence there to start, the PWA is where they should be headed next. It’s cheaper and easier to build than a mobile app and there’s a lot to be gained in terms of engagements and conversions.

 

Featured image via Unsplash

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

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

Plesk VPS Hosting For Better Website Outcomes

Plesk VPS Hosting For Better Website Outcomes

Plesk VPS Hosting For Better Website Outcomes

Suzanne Scacca

(This is a sponsored article.) In early discussions you have with clients about the website you’re tasked with designing, does the topic of web hosting ever come up? My guess is that it’s not something your clients give much thought to, waving it away with:

“Just give me the cheapest, no-frills hosting.”

I get why they’d think that way. For starters, they’re paying you a large sum of money to design the site. Of course, they’re going to look to other areas to offset those costs. Because server technology is rarely understood by the people who own websites, it’s easy for them to mistakenly think they can save money there.

Here’s the problem though:

As a website grows in authority and expands its reach, security and performance problems will arise if the hosting configuration isn’t prepared to handle it.

In the following article, I’m going to show you why clients need the power of VPS hosting behind the websites you design for them. And why you — the administrator — need a tool like the Plesk control panel to manage it.

The Web Designer’s Connection to Web Hosting

In many cases, people get stuck being the go-to person for one highly specialized task at the companies they work for. This person handles the marketing. This person manages inventory. This person coordinates client meetings.

One of the things I love about working with websites is that there are so many new things to learn about and other areas to branch out to. If you don’t want to be relegated to building website after website, day in and day out, there are ways to expand your offering and become the total end-to-end solution provider for clients.

In my opinion, web hosting is one of the areas you should look to for expansion. Now, I’m not saying you should become a reseller of hosting or anything like that. All I mean is that it would be beneficial to understand how the technology behind a website affects the outcomes of what you’ve built.

For example:

  • An underpowered hosting plan fails to handle influxes of traffic, which leads to slower page speeds and a drop in conversion rates.
  • Occasional downtime on the website leaves visitors wondering if it’s even worth going to the site if its availability is unreliable.
  • There’s a high demand for the inventory sold on the site, but potential customers are too nervous to pull the trigger since security seems to be non-existent.

Even if you’re not the one responsible for the server technology your client’s site sits on, you can see how this sort of thing could have a negative effect on your business. You build an amazing website that aims to do exactly what your client wanted, but the server technology is holding it back.

Who do you think the client is going to blame in that case?

Rather than let it get that far, I’d suggest you engage your clients early on in conversations about their web hosting. As we move on, I’m going to present you with specific arguments you should be prepared to make regarding the hosting as well as how it’s managed.

An Introduction To VPS Hosting

When it comes to choosing the right hosting for your clients’ websites, there’s a lot to think about:

Who Should You Entrust Your Website To?

There are thousands of web hosting companies to choose from. But in terms of reliability? That list could easily be narrowed down to less than a hundred.

HostGator has been a web hosting company I’ve recommended to clients for years, especially ones who need a powerful hosting solution like Plesk VPS hosting. If your client doesn’t have a strong preference of provider, start here.

What Type Of Web Hosting Will Serve Your Website And Audience Best?

This is what you need to know about the different kinds of web hosting:

Shared Hosting

This is the cheapest form of hosting available and probably the one your clients will be most inclined to purchase.

The hosting provider designates a section of a web server to a number of clients who will then share the resources. This means there are strict limitations set on how much bandwidth and storage a website can use, but very little you can do to control any of it — especially if another website in the shared server space hogs the resources.

It’s this last point that’s especially problematic on shared hosting. Although your hosting plan might indicate you get X amount of memory, it’s actually a cap on how much you might have access to if no one else is using resources from the server at the same time. In reality, it’s very likely you’ll run into lack of memory errors due to this limitation quite frequently.

Shared hosting is fine for small, personal blogs or private websites. Not for serious businesses.

Cloud Hosting

This is similar to shared hosting except that it’s more secure and stable.

Rather than relegate a website to one specific segment of a web server, the site is hosted across a number of servers. That way, if one server experiences an outage or another website compromises the performance of others around it, your website can safely be hosted elsewhere.

That said, there are still a number of limitations that come from cloud hosting. If your website is for a growing business, but you don’t expect a lot of traffic to it (say, if it were a simple portfolio), cloud hosting would be a good choice.

Dedicated Hosting

This is the most robust form of web hosting, which also makes it the most expensive.

As the name indicates, your hosting company will lease you an entire server to host your website. So, think of this like shared hosting, but on steroids. As you can imagine, when you have your own server environment, it greatly reduces the risk of anyone else compromising the performance of your website.

That said, there is a lot more work involved in managed a dedicated hosting account and the website on it. This is really only best for large enterprises, social networks, e-commerce sites and others that require this type of extreme web hosting.

VPS Hosting

This stands for “virtual private server”. The name alone should give you a good idea of how this differs from the other kinds of hosting already mentioned.

In sum, a virtual private server is like a scaled-back version of dedicated hosting. Instead of having an entire server to yourself, the web hosting company carves out a dedicated portion of the server and personalizes its settings for you. Although you share the server with other VPS clients, you don’t share the resources with anyone else. You get exactly what you pay for.

Here are some other highlights of VPS hosting:

  • It’s faster and more secure than shared or cloud hosting.
  • It’s cheaper than dedicated hosting.
  • It’s custom-tailored to your needs, but still allows you to take more control over your server configuration.

Bottom line: VPS is an overall better hosting solution for growing businesses.

How Will You Manage Your Web Hosting Account?

There’s one more question you have to ask yourself before you commit to a new hosting provider and plan.

Because VPS hosting is more complex and requires a greater degree of management than a set-it-and-forget-it type of hosting like shared or cloud, you need a control panel you can rely on.

So, let’s explore the Plesk panel and take a look at what you can do to maximize the management of your new website with it.

An Exploration Of Plesk VPS Hosting

This is the Plesk website:

A screenshot of the Plesk website frontpage
Large preview

It won’t take long to realize that Plesk is not like other control panel solutions. The website will help clarify some of this for you, but I’d like to give you an inside look at the control panel so you can see for yourself.

A Universally Friendly Control Panel

Plesk is one of those tools you step inside of and immediately realize you made the right choice. With a very short learning curve, Plesk is a highly intuitive control panel solution that’s great for anyone:

A screenshot of the Plesk website showing different options and that it is a universally user-friendly platform
Plesk is a universally user-friendly platform. (Image source: Large preview)

In all honesty, I don’t know how much time your clients will spend inside the control panel. When I’ve managed and built websites for clients in the past, just asking for login credentials to their hosting account tended to be a real chore.

“What’s hosting? Is that WordPress? I don’t think I need that.”

Regardless of whether they want or know what to do with a control panel, Plesk provides a user-friendly experience regardless of who the user is as well as their level of comfort with website management. I’ll show you why in this next example.

Words cannot describe how frustrating it is to ask clients to complete simple tasks. (Source)

Great Interface For Clients And Other End Users

If you’ve ever tried to use cPanel to manage hosting and domain services, you know how overwhelming it can be to use.

If you’re not familiar with it, this is typically what cPanel looks like upon first logging in:

Screenshot of the cPanel dashboard
This is how the cPanel interface (meant for end users) looks like. (Image source: cPanel) (Large preview)

If you plan on reselling or managing hosting for your cPanel clients, then you’ll need to use a separate dashboard called WHM:

cPanel’s user interface
cPanel’s user interface (Image source: cPanel) (Large preview)

There’s a navigation and sub-navigation bar at the top, which makes management options seem simple enough.

Then, you’re presented with individual actions you can take to manage hosting, your website or email accounts within the control panel itself. This is just too much — even for technically-minded clients who know what the heck they’re looking for.

Now, check out the Plesk interface for power users:

Plesk power user UI
The Plesk power user home page. (Source: Plesk) (Large preview)

This is insanely well-organized and clearly labeled. If your clients or other novice users were to step inside of Plesk, they’d instantly know where to go as well as which actions they could possibly take from the sidebar alone.

It gets better within each of the individual modules. For instance:

Clean UI inside Plesk
An example of the clean layout of the Plesk UI. (Source: Plesk) (Large preview)

This is what the Tools & Settings page looks like. As you can see, it’s not bogged down by a barrage of icons for each setting. Instead, it presents options in a succinct and well-organized manner, which will greatly reduce friction that might otherwise exist in a tool of this nature.

Great Interface For Designers And Developers

Plesk offers an alternative “service provider” view for web developers and designers:

Plesk UI for developers
A look at the Plesk service provider interface for developers. (Source: Plesk) (Large preview)

It looks a lot like the power user view, except you can see that the sidebar is broken up into different modules. What I like about this is that it encourages developers to manage more of their business from one tool instead of a variety of business management tools.

From within Plesk, you can:

  • Add new customer accounts and manage them from one dashboard.
Plesk add users
Adding and managing customers in Plesk is easy. (Source: Plesk) (Large preview)
  • Customize what they do and see in their “power user” view of Plesk. This helps keep server and website management under control.
Plesk user management
Managing customers in Plesk is easy. (Source: Plesk) (Large preview)
  • Create hosting plans that you can, in turn, sell to customers as subscriptions.
Plesk hosting plan management
Managing hosting plans in Plesk is easy. (Source: Plesk) (Large preview)
  • Move non-Plesk customers over to Plesk with a simple-to-use migration tool.
Plesk migration
The Plesk Migrator extension. (Source: Plesk) (Large preview)
  • Customize nearly every aspect of your clients’ server configurations. Like disk space:
Plesk server configuration
It’s easy to configure your server with Plesk. (Source: Plesk) (Large preview)
  • Manage the essentials to ensure the server runs in tip-top shape. For instance, here are some of the PHP settings for security and performance:
Plesk security and performance
Security and performance controls are a priority in Plesk. (Source: Plesk) (Large preview)
  • Manage things like plugins, themes and more if you build websites with WordPress.
Plesk WordPress controls
Plesk users can control various WordPress settings and tools inside of the control panel. (Source: Plesk) (Large preview)

If you’ve ever been frustrated with the management piece of your business or felt that your ability to control things was lacking, Plesk is the solution. Plus, you can use Plesk extensions to really open this tool up. Add business management features like invoicing and site-builder tools to improve your offering, streamline your workflow and make more money.

Last but not least, you can white label it with your branding. That way, when clients step inside, they’re reminded that they have a trusted website pro like you to properly manage their server and website.

Flexible Workflows

Another developer-friendly feature of Plesk is its flexibility.

One of the issues with letting clients make decisions about their web hosting and server management is that they don’t understand the amount of work that goes into it behind the scenes. They might think:

“You’re the developer. Why can’t you work with whatever I give you?”

But you and I know it’s not that simple.

For starters, there’s your level of comfort in using the command line. For some developers, that level of comfort is low, so having a flexible solution like Plesk that removes the need for programming is great.

That said, you can still use the CLI if you prefer. Plesk provides you with full root access, so you won’t have to worry about being restricted to the control panel’s settings to manage your VPS server either. Like I said, it’s flexible. It allows you to work as you want to work.

Plus, it works on a number of configurations:

  • Linux vs. Windows
  • Apache vs. nginx
  • Ruby on Rails vs. Node.js.

Whatever you choose, settings are available to deeply customize and configure each so that the VPS hosting plan works exactly as you need it to.

Wrapping Up

It’s your hope that when you build a website for a client, it doesn’t go to waste. You design powerful website experiences so that clients can effectively leverage their web presences to drum up new business and increase conversions.

Sadly, something like a poor choice of web hosting can compromise all of that planning and hard work on your part. Unless you’re in the habit of designing websites for very small businesses or nonprofits, Plesk VPS Hosting is the logical choice. Not only is it a great solution in terms of easing your administration and management responsibilities, but it’s also an amazing tool for building your design business.

If you’re interested in using Plesk VPS hosting, I’d suggest you start by looking at HostGator. In addition to being one of the leading hosting companies around the world, there is a 45-day Money-Back Guarantee available which may help you encourage your clients to give it a try.

Smashing Editorial (ms, ra, 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