One day, all the sudden, I started hearing jokes about toast. I had no idea what the context was. I assumed some friends just got started telling toast jokes, which isn’t rare by any means. But it turns out it was a whole thing. It got me thinking, jeez, if I can’t keep up with this stuff when it’s kinda my job, it must be extra tough for people who actually do work for a living.
Anyway. Thankfully Jeremy summed it up nicely:
First off, this all kicked off with the announcement of “intent to implement”. That makes it sounds like Google are intending to, well, …implement this. In fact “intent to implement” really means “intend to mess around with this behind a flag”. The language is definitely confusing and this is something that will hopefully be addressed.
Secondly, Chrome isn’t going to ship a toast element. Instead, this is a proposal for a custom element currently called std-toast. I’m assuming that should the experiment prove successful, it’s not a foregone conclusion that the final element name will be called toast.
The drama around it, hence the cause of all the jokes and such, was the fact that it felt like it came out of nowhere and was Chrome strongarming a feature through the standards process, or perhaps kinda skipping that process. Terence’s humorous post digs into that a bit more.
I’m not sure if Google is actually doing anything nefarious here. It’s behind a flag, so I guess the point of that is to explore and research and stuff. Feels very similar to kv:storage to me, a “native module” much like a “native custom element.”
But we should be extra watchful about stuff like this. If any browser goes rogue and just starts shipping stuff, web standards is over. Life for devs gets a lot harder and the web gets a lot worse. The stakes are high. And it’s not going to happen overnight, it’s going to happen with little tiny things like this. Keep that blue beanie on.
Regarding the element itself, it’s always a bit surprising to me to see what gets legs as far as new HTML elements. Toasts just seem like a positioned to me, but I haven’t participated in any research or anything. They are popular enough for Bootstrap to have ’em:
Have you ever wanted to ensure that nothing of a (pseudo) element gets displayed outside its parent’s border-box? In case you’re having trouble picturing what that looks like, let’s say we wanted to get the following result with minimal markup and avoiding brittle CSS.
The desired result.
This means we cannot add any elements just for visual purposes and we cannot create shapes out of multiple pieces, whether that’s directly or via masks. We also want to avoid long, long lists of anything (think something like tens of background layers or box shadows or points inside a polygon() function) in our generated code because, while the results can be fun, it’s not really practical to do something like that!
How do you think we can achieve this, given the parts the arrows point towards? Fancy giving it a try before checking my solution below? It’s one of those things that seems simple at first, but once you actually try it, you discover it’s much trickier.
Markup
Each item is a paragraph (
) element. I was lazy and generated them with Pug out of an array of objects which hold the item’s gradient stop list and its paragraph text:
- var data = [
- {
- slist: ['#ebac79', '#d65b56'],
- ptext: 'Pancake muffin chocolate syrup brownie.'
- },
- {
- slist: ['#90cbb7', '#2fb1a9'],
- ptext: 'Cake lemon berry muffin plum macaron.'
- },
- {
- slist: ['#8a7876', '#32201c'],
- ptext: 'Wafer apple tart pie muffin gingerbread.'
- },
- {
- slist: ['#a6c869', '#37a65a'],
- ptext: 'Liquorice plum topping chocolate lemon.'
- }
- ].reverse();
- var n = data.length;
while n--
p(style=`--slist: ${data[n].slist}`) #{data[n].ptext}
We have three top-to-bottom gradients, which means we can place each of them within the limits of a different layout box: the top gradient layer is limited to the content-box, the middle one to the padding-box and the bottom one to the border-box. If you need an in-depth refresher on this technique, check out this article, but the basic idea is you picture these layout boxes as nested rectangles.
This is pretty much how browser DevTools presents them.
The layout boxes as shown by Chrome (left) vs. Firefox (middle) vs. Edge (right).
You may be wondering why we wouldn’t layer gradients with different sizes given by their background-size and that have background-repeat: no-repeat. Well, this is because we only get rectangles without rounded corners this way.
Using the background-clip method, if we have a border-radius, our background layers will follow that. Meanwhile, the actual border-radius we set is being used to round the corners of the border-box; that same radius minus the border-width rounding the corners of the padding-box. Then we’re subtracting the padding as well to round the corners of the content-box.
We set a transparentborder and a padding. We make sure they get subtracted from the dimensions we’ve set by switching to box-sizing: border-box. Finally, we layer three gradients: the top one restricted to the content-box, the middle one to the padding-box and the bottom one to the border-box.
p {
/* same styles as before */
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
border: solid $b transparent;
padding: $p;
background:
linear-gradient(#dbdbdb, #fff) content-box,
linear-gradient(var(--slist)) padding-box,
linear-gradient(#fff, #dcdcdc) border-box;
text-indent: 1em;
}
We’ve also set a flex layout and a text-indent to move the text content away from the banner edges:
Before we move on to the tricky part, let’s get the paragraph numbers out of the way!
We add them using a counter we set as the content value on the :after pseudo-element. We first make this :after a square whose edge length equals the paragraph height (which is $h) minus the top and bottom border-width (both equal to $b). Then we turn this square into a circle by setting border-radius: 50% on it. We make it inherit its parent’s box-sizing and border and we then set its background in a similar manner as we did for its parent.
We still need to make a few tweaks to the CSS of this :after pseudo-element — a margin-right that’s minus its parent’s padding and adjustments to its inner layout so we have the number dead in the middle. That’s pretty much it for the numbering part!
p {
/* same styles as before */
&:after {
/* same styles as before */
display: grid;
place-content: center;
margin-right: -$p;
text-indent: 0;
}
}
We start off by using the :before pseudo-element, absolutely positioning it on the right side and making it a square whose edge length equals its parent’s height:
p {
/* same styles as before */
position: relative;
outline: solid 2px orange;
&:before {
position: absolute;
right: -$b;
width: $h;
height: $h;
outline: solid 2px purple;
content: '';
}
}
We’ve also given both this pseudo-element and its parent some dummy outlines so that we can check the alignment:
Alright, we now give this :before a dummy background, rotate it, and then give it a border-radius and a nice box-shadow:
p {
/* same styles as before */
&:before {
/* same styles as before */
border-radius: $b;
transform: rotate(45deg);
box-shadow: 0 0 7px rgba(#000, .2);
background: linear-gradient(-45deg, orange, purple);
}
}
We now have a small problem: the :before pseudo-element is absolutely positioned and is now on top of the :after pseudo-elements that holds the numbering! We can fix this by setting position: relative on the :after pseudo-element.
First, we need to set the stop positions on the gradient of our :before pseudo-element such that they match the bottom and top edges of the parent. This is because we want to have a certain hex value along the top edge of the parent and a certain hex value along the bottom edge of the parent.
The stop positions we need to compute.
Since we’ve rotated our square :before by 45°, its top-left corner now points upward (and, conversely, its bottom-right corner points downward).
How rotation changes position of the square’s corners.
A gradient to the top-left corner of a square is a gradient in the -45° direction (because the 0° angle is at 12 o’clock and the positive direction is, just as for transforms, the clockwise one). A gradient to a corner means the 100% point is located in that corner)
How rotation changes the gradient direction.
The 50% line of a gradient always passes through the midpoint (the point at the intersection of the diagonals) of the gradient box.
The gradient box is the box within which we paint the gradient and whose size is given by the background-size. Since we haven’t set a background-size, the default for gradients is to use the entire box defined by background-origin, which is the padding-box by default. Since we don’t have a border or a padding on our :before pseudo-element, it results that all three boxes (content-box, padding-box and border-box) are equal in space between them and equal in proportion to the gradient box.
In our case, we have the following lines perpendicular to the direction of the -45°-pointing gradient line:
Getting the relevant stop positions.
the 0% line, passing through the bottom right corner of the :before
the bottom edge of the pseudo-element’s paragraph parent
the 50% line which splits our square diagonally into two mirrored right isosceles triangles; given the way we’ve aligned our paragraph and its pseudo-elements, this line is also a midline for the paragraph itself, splitting it into two halves, each with a height equal to half the paragraph’s height ($h).
the top edge of the pseudo-element’s paragraph parent
the 100% line, passing through the top left corner of the :before
This means we need to restrict the -45°-pointing gradient on our :before pseudo-element between calc(50% - #{.5*$h}) (corresponding to the paragraph’s bottom edge) and calc(50% + #{.5*$h}) (corresponding to the paragraph’s top edge).
What we got with overflow: hidden (left) vs. what we want (right).
The problem is overflow: hidden cuts out everything outside an element’s padding-box, but what we want here is to cut the parts of the :before pseudo-element that are outside the border-box, which is larger than the padding-box in our case because we have a non-zero border we cannot ditch (and solve the issue by making the border-box equal to the padding-box) because we need three background layers on our paragraph: the top one covering the content-box, the middle one covering the padding-box and the bottom one covering the border-box.
The solution? Well, if you’ve taken a peek at the tags, you’ve probably guessed by now: use clip-path instead!
Pretty much every article and demo using clip-path out there makes use of either an SVG reference or the polygon() shape function, but these are not the only options we have!
Another possible shape function (and the one we’ll be using here) is inset(). This function specifies a clipping rectangle defined by the distances from the top, right, bottom and left edges. Edges of what? Well, by default1, that’s the edges of the border-box, which is exactly what we need here!
This is better, but not quite what we want because it doesn’t take into account the paragraph’s border-radius. Fortunately, inset() also lets us specify a rounding that can take any border-radius value we want. No joke, any valid border-radius value works — for example, this:
Since we don’t want a purple-orange gradient on the :before, we replace those with the actual values we need. We then place the paragraphs in the middle because that looks better. Finally, we give our paragraphs a shadow by setting a drop-shadow() on the body (we cannot use box-shadow on the paragraphs themselves because we’ve used clip-path, which clips out the box-shadow so we wouldn’t see it anyway). And that’s it!
We should be able to change this value, but Chrome does not implement this part of the spec. There is an issue open for this which you can star or where you can leave a comment with your use cases for being able to change the default value. ?
(This is a sponsored article.) Spend enough time in a Facebook group for professional web developers and designers and the question will inevitably come up:
“I was approached by a small client with a small budget. Should I work with them?”
Those that have been around a long time will probably scream “No!” and tell you that you’re under no obligation to work with smaller clients. The reasoning being that it’s impossible to make a worthwhile profit on those kinds of projects and that many of the clients end up being difficult to work with.
But is the problem really with the quality of clients with small- and medium-sized businesses? In some cases, that may be so — though, honestly, that’s really only the case if you attract and agree to work with discount seekers (i.e. “How much can you give me for $X?”). In most cases, though, the underlying issue is that your process isn’t efficient enough to design high-quality websites for SMBs at a price point they can afford.
Which is why Sitejet as an all-in-one web design platform is so exciting.
In almost any economy, it’s companies with 10 employees or less that make up well over 80% of the total number of businesses. Although it may not have seemed like an attractive segment of businesses to target in the past, Sitejet makes it not only an option worth considering, but an attractive one at that.
Sitejet gives you a way to design beautiful, feature-rich and responsive websites for SMBs without killing your profits. In the following post, I’m going to show you how Sitejet makes that possible.
Why Sitejet Decided to Share Its Internal Software with the World
In 2013, a German web design agency called Websitebutler was formed.
Give small companies the chance to have a high-quality website even without an agency-sized budget.
Design professional-looking websites for SMBs.
Charge them a monthly subscription fee for the website, maintenance, website updates, domain, hosting and so on. Websitebutler would take care of the rest.
The thing is, their cheapest subscription plan starts at € 29.99.
The subscription plans and pricing for Websitebutler’s website-as-a-service. (Source: Websitebutler) (Large preview)
It soon became clear, however, that they couldn’t afford to charge SMBs so little.
While it was a website-as-a-service offering, they weren’t willing to cut corners. Websitebutler still took the time to understand what the client wanted in order to build the right solution.
Because that approach was so time- and resource-consuming, they either needed to:
Reevaluate their pricing,
Phase out smaller clients who couldn’t afford it,
Find a more efficient way to work.
Sitejet Was Born
The Websitebutler team decided to go with option #3:
Find a more efficient way to work.
When I spoke to Hendrik Köhler, co-founder and the lead of Marketing & Product for Sitejet, he said:
“It took five years to create the perfect tool for ourselves.”
It also took building over 4,000 SMB websites in-house before they were happy with the refinements they’d made to their internal solution. That’s when they started thinking about sharing their high-performance content and project management system with other web designers and design agencies. And why wouldn’t they?
Sitejet enabled Websitebutler to decrease the time spent on web design projects by 70%.
As I’ll show you in just a few moments, Sitejet gives designers a way to effectively manage everything from one place while still being able to develop fast, beautiful and responsive websites.
Time-Savings For Your Web Design Workflow With Sitejet
Think about your design process: realistically, there probably isn’t much more you could shave off of it without compromising the quality of your work. If you were to pick up speed in your workflow it would have to be in client communication and project management, right?
That’s why Sitejet deserves to stand out from other site builder solutions. It’s not that they’re the first to create an easy-to-use visual editor. However, they are the first to successfully combine project management, communication, and web design into one tool.
A quick look into the Sitejet website and project management dashboard. (Source: Sitejet) (Large preview)
One thing to note before I give you a look at how Sitejet saves you time is that I’m not going to focus too much on how to design with Sitejet. If you’ve worked with enough site builders, then you have a good idea of what you can do with Sitejet. So, what I’m going to focus on are the key differentiators that make this a powerhouse in terms of managing web design projects.
Before we get started looking into this platform, though, here is a highlight reel of how Sitejet revolutionizes your workflows:
Now, let’s take a closer look at what you need to know about this web design tool built by web designers for web designers.
1. Built-In Project Management
Sitejet is like other site builders in that it allows you to build and manage multiple websites from a single dashboard. However, nothing else about this dashboard is like the rest:
A close-up of the project management panel in Sitejet. (Source: Sitejet) (Large preview)
If you’re currently managing multiple website projects simultaneously, my guess is that you’re using a project management platform like Asana, Trello or Basecamp for collecting files, communicating with clients and managing your task list.
But that creates an additional step for you, right? Plus, you have to account for the errant email or voicemail from clients that fail to use the project management system as it was intended.
There’s just too much logging in and out platforms and hunting around for all of the information and assets you need when you work with two systems for the same workflow.
With Sitejet, that’s no longer a problem as project management is automatically built in.
2. Faster Communications
You know how clients are, especially small business owners who don’t have a dedicated team member whose sole job it is to help you to create their website. They don’t have the patience for all these systems (especially when they’re complicated to use), which is why they end up emailing and calling even though you’ve pleaded with them to use the tools you’ve given them.
So, you end up throwing away a bunch of time dealing with these unexpected and disorganized communications.
In Sitejet, that’s not a problem. All communication takes place in the same system that everything else does. This is what the email system looks like from your end:
Sitejet makes email communications much easier to organize and execute. (Source: Sitejet) (Large preview)
You can message team members privately, insert messages or information from your client or send them a new one. You can also create email templates to reuse as certain phases of each project are completed.
Sitejet reduces your workload even further by automatically assigning new emails to your customers to ensure they never miss an important communication. In addition, any files that are attached to emails are automatically uploaded to your file management center — just one less asset you have to worry about moving from Point A to Point B and then over to Point C.
From the client’s perspective, this is great, too. Here’s a message as seen from the client’s Gmail account:
Sitejet emails end up in the client’s own email account and not lost in the system. (Source: Sitejet) (Large preview)
If a response is needed, the client can reply directly from their email provider and not have to worry about logging back into Sitejet if no other actions are needed there (like a simple “Yes”, “No”, “I approve this”). If action is needed, they’ll simply click on the link and do as you’ve requested.
Otherwise, all of the communication — emails, task assignments, and feedback — is handled within Sitejet.
3. Smart Project Status System
One of the features to pay close attention to in Sitejet is the first column in the dashboard:
Sitejet’s project status list for more effective project management. (Source: Sitejet) (Large preview)
This isn’t some meaningless system that helps you know which stage each project is in either. It actually opens up new functionality in Sitejet for you and your clients.
The Customer Portal is an incredibly powerful tool for Sitejet users and their clients.
Unlike many page builder tools and content management systems which require your clients to work in the same exact interface as you do, Sitejet has created a simpler and more intuitive interface for clients. This way, you don’t have to spend your time spelling out what each area of the portal means or demonstrating what they need to do inside of it.
For example, this is what the Customer Portal looks like when a website is in the Preparation phase:
This is the Sitejet Preparation phase, as seen from the client. (Source: Sitejet) (Large preview)
They’re asked to:
Set up their user account and data,
Upload files like photos, videos, documents and much more,
Provide info on their “Wishes” for the website.
After completing their portion of the “Preparation” phase, the system automatically notifies you. That way, you don’t have to chase down the client or try to gather all of those details from other platforms.
Managing phase completion from the Sitejet dashboard. (Source: Sitejet) (Large preview)
With confirmation that they’ve completed their tasks, you can then get to work on subsequent phases. As you complete new ones, their dashboard will continue to transform.
For example, here is what they see when you enter the Feedback phase:
A new option appears for clients as you enter new phases in Sitejet. (Source: Sitejet) (Large preview)
Notice how there’s now a prompt for feedback. When they click on either of those links, they’re taken into the website where they can leave notes on the website you’ve designed.
For many clients, project management tools are often overwhelming. With Sitejet, however, you control what they focus on to ensure that you get the right information without any issue. As a bonus, you’re able to stay abreast of any and all changes they make on their end, so you can more quickly get your websites through all project phases.
4. Remove The Client Bottleneck
When it comes to building websites, there are a number of ways in which your clients can become the bottleneck in your workflow. Like in the matter of content collection.
When you work with SMBs, it’s common to leave it to the clients to provide content for their sites. It’s then your responsibility to put it together and shape a great-looking design around it.
Despite knowing that they’re accountable for the content, many designers still have issues getting it from clients. But as we’ve seen already, Sitejet makes it easy to inform clients when certain actions are needed. It also makes the act of content collection one that won’t make you want to tear your hair out.
Remember the Preparation phase we saw earlier from the client’s perspective? This is what they find under File Management:
An example of files uploaded to the Sitejet file management tool. (Source: Sitejet) (Large preview)
This is where they can upload any kind of data (e.g. image files, PDF documents, and more) they owe you for the project. They may be photographs to use on the site (as in the example above). Or partner or customer logos they want to showcase. Or even style guides or other PDFs that’ll guide you along as you design their website.
For those of you who convert your files from one format to another, Sitejet allows you to do that from within the platform, too. Let’s say you want to reduce the size of an image by going from PNG to JPG or you want to turn a PDF into a JPG. There’s no need to leave Sitejet to do this.
In traditional website workflows, you’d have your clients upload their content to the project management platform or to a file sharing system. You’d then download each of the files and re-upload them into your site builder. This removes the middle man.
Then, there’s the Wishes section of the Client Portal:
Sitejet lets your client define what they “wish” you’ll include on their website. (Source: Sitejet) (Large preview)
This system retrieves all of the details you need from clients in order to build their websites:
What other websites are they a fan of and why?
Do they want a single-page or multi-page site?
Do they have a logo or need one created?
Do they have a color palette or shall you create it for them?
Is content for the website ready to be uploaded or is there an old website you can retrieve it from?
What is the business’s contact information to show on the website?
Are there any special legal notices they want to be included?
You can also fill in as much of it as you can before they ever get there. For instance, say you already know you’re going to create a multi-page website that includes an About page, a Menu page and a Contact page. You can add that information into the Construction and Content tabs for them.
It’s also worth mentioning that the client portal is a great sales tool as well. Because, not only can you create accounts for current clients, you can do so for prospective clients. They can upload files and data, and email you from within the platform, all while you’re still in the early stages of talking.
If you want to build trust with clients early on, a branded Client Portal that simplifies all of your exchanges would help immensely. Again, this would reduce the amount of time you have to spend hand holding clients or manually taking them through the process.
5. Control Client Activity On The Site
Let’s say you want to give your clients the option to edit their website while you’re working on it. This can be risky at any stage as clients are often easily overwhelmed by what they see when they have a brand new website. They also have a tendency to hurriedly make changes and then act surprised when something looks bad or “breaks”.
There’s a feature you can use called “Editable for customers” to cut down on the overwhelm many clients face when confronted with a site builder. This’ll also cut down on the time you have to spend repairing something they “didn’t mean to do”.
To activate it, step inside the Sitejet builder. Next, right-click on an element you want them to be able to edit. If you want them to be able to edit more than that, right-click anywhere on the page.
Sitejet’s “Editable for customer” setting lets you control how much of the site the client can alter. (Source: Sitejet) (Large preview)
You’ll see three options:
This element.
All elements of the same type.
All elements on the page.
If you only want the client to edit a particular section (say, if you’re into your final round of revisions and don’t want them to backtrack and try to edit something already finalized), this would really come in handy.
Or, if you don’t trust them to make edits to the site at all, you can opt to collect their feedback instead.
The second you change the Project Status to “Feedback”, your client will then see the Feedback option open up on their end along with a link to the site builder. Just be sure to send them an email to let them know they can step inside.
The first time the client steps into the editor, they’ll see this message. (Source: Sitejet) (Large preview)
As they hover over different parts of the web page, the element will display a blue overlay.
Leaving feedback on websites with Sitejet is easy for clients. (Source: Sitejet) (Large preview)
When they click on the element, a new note field will appear where they can leave their feedback. The note will show up on their feedback sidebar like this:
All feedback notes show up in the sidebar until the client is ready to submit. (Source: Sitejet) (Large preview)
Once they’ve completed adding their notes, they can click the “Submit” button which will then push new to-dos (one for each note) over to your queue.
A list of sample to-dos inside the web designer’s dashboard of Sitejet. (Source: Sitejet) (Large preview)
This way, you don’t have to copy down all of the feedback from an email, text message or phone call with the client and try to decipher where they meant for you to make a change. Their notes happen directly on the website and end up as alerts in your to-do box as well as inside the page editor tool where they reveal themselves within the context of the page.
Collaboration isn’t just easier with your clients either. Sitejet simplifies collaboration with team members as well as external service providers. You can assign them to-dos as well as define permissions and roles which restrict the type of actions they can or cannot take within the platform.
6. Faster Website Generation
With Sitejet, you have numerous options to build a website for your clients. However, if you really want to save time up front, you’ll want to use the platform’s templates, matching presets and website generator.
Templates
Sitejet has dozens of beautifully made templates for you to start with:
What’s nice about this — and something you don’t often find with site builders — is that the best templates aren’t hidden behind a paywall. You have access to all of their templates without any additional fees.
What’s more, because this platform was made to cater to the SMB client, you’re going to find templates built specifically for those niches. Restaurants. Bars. Salons. Real estate agents. And much more.
If you’re normally spending too much time trying to find the right starter design, having to customize the ones available or search hours for the right template on marketplaces, Sitejet is a way out of that time-consuming cycle. You can also create and save your own template if there’s a specific style of site you tend to use for your niche.
Matching Presets
There’s a related feature Sitejet includes that you should also know about. I wouldn’t call it a section template tool, though it kind of looks like one at first glance. Let me show you.
This is the Sitejet builder. You can edit universal website settings, add elements and drag-and-drop elements around as you like:
A look inside the Sitejet builder and editor interface. (Source: Sitejet) (Large preview)
Now, let’s say that this great-looking template took care of most of the work for you. However, you’re not 100% satisfied with the layout of this section. What you could do is customize it using the builder’s system of elements and the edit container. Or…
You can use what’s called “Find Matching Presets”:
Sitejet’s Matching Presets feature is a huge time-saver. (Source: Sitejet) (Large preview)
When you right-click on any section, you’re given a bunch of options for adding elements, editing them, as well as customizing the code. You will also find matching presets.
At the bottom of the screen, the Preset Wizard appears:
This is the Sitejet Preset Wizard when you want to redesign a section. (Source: Sitejet) (Large preview)
When you select one of the Presets, this allows you to change the structure of the section without losing any of the content. For example:
Restructuring the layout and design of a section can happen in seconds. (Source: Sitejet) (Large preview)
It’s an insanely quick way to edit your designs without having to make more than a couple of clicks.
Website Generator
If you really want to save yourself time building websites and you’ve left the content piece in your clients’ hands, have a look at the website generation tool.
To use this tool, you first need to add a new website. When you’re asked to choose a template in the next screen, you’ll click “Choose template later”. This way, all you’ve done is create an empty shell of a website.
Then, locate “More” options next to that website in your dashboard:
Use Sitejet’s website generator to speed up design. (Source: Sitejet) (Large preview)
The “Generate website” tool will then pull all of the “Wishes” images, information and content from the Client Portal into the new website. You’ll see a quick preview of those details and can make last-minute changes before letting Sitejet auto-generate the new website for you:
You get a chance to review and edit the information and content provided by the client. (Source: Sitejet) (Large preview)
When it’s done, you’ll have a brand new website filled with all of the content the client sent to you:
An example of an auto-generated website with Sitejet. (Source: Sitejet) (Large preview)
If you find that anything’s not in the right place or that there are some missing spots that need filling in, you can edit the website as you would one you built from scratch or from a template. At least this way you have a running head start.
Things I Didn’t Talk About
As I mentioned at the beginning of this roundup, I didn’t want to dig too deeply into all of the features of Sitejet since it would take too much time. That said, there are so many great features here that ensure that you can do everything you can with other website builder tools — and more.
For example:
Manage hosting and domains.
Automate backups.
Set up mail transfers.
Whitelabel the CMS with your branding.
Perform website checks.
Design using the page builder or with code.
Track time.
Manage users and permissions.
Review website statistics.
Clearly, it’s a robust all-in-one platform that takes into account every aspect of your workflow, simplifying as much as possible so you can work faster and more efficiently.
Wrapping Up
Let’s be real: when looking for new clients, you’re probably focused on the big dogs with the big budgets. Because those have traditionally been the only ones you could make a hefty profit on.
If you’ve ever felt bad about turning away small businesses, Sitejet makes it possible for you to start saying “yes” to them.
Not only is that great for the smaller players who otherwise wouldn’t have the means to get a high-performance website for their business, this is great for you because it means you can exponentially increase your client base. You can still take on big projects and then fill in the gaps with a bunch of smaller ones who’ll take significantly less time now thanks to Sitejet.
When fonts are matched together correctly, they really make the perfect pair. Pairs are everywhere around us – our socks, best friend, partner, peanut butter and jelly, and the list could go on.
Thinking about fonts without thinking about font pairs is half the concept. After all, we’re all better in pairs, and there’s no exception with fonts. When a font is paired with a good partner, the original font is enhanced, and your ultimate design goal is accomplished. Let’s not get ahead of ourselves though.
The key to picking font pairs is to start with the correct font. Sounds simple, enough. When you think about choosing a font, what comes to mind?
The style and overall design of the project, or rather, the appearance of the words? You aren’t incorrect, yet you’re also not completely correct. Choosing a font has so many layers and complexities to the process, but we’ll map it out for you. First, let’s define the goal of a font.
Change Your Mindset
Fonts are constantly advertised and viewed as just a last minute design. When changing the font for a school paper, or a company proposal, you may not put much thought into the font you change your text to.
Yet, fonts can add credibility to your content, make content more readable, present content for better conversions, and market your information to evoke feelings within your readers, which ultimately increases sales.
Sometimes it’s the little changes that matter the most! The beauty and challenge with fonts are that they’re always displayed.
Meaning, if your font is hard to read, then readers will just click away onto another website with much more readable fonts. The competition is higher than ever to get website visitors on your page and staying – don’t make your font the reason they click away.
The Goal of the Font: Convey the Message
Although fonts do project a style and design, their main goal is to translate the marketing message. Think about it, without a font, your message wouldn’t be conveyed at all! They are the vehicle that translates the words you want your target audience to read. It doesn’t end there. A font translates much more than the physical message.
You’re also communicating a feeling. Think about why we dress up for an interview or an important business meeting. We’re communicating an image without saying anything. That image is backed behind emotions.
If the stakes are high like a proposal meeting, then perhaps you’d dress in business professional in order to seem credible. Think about selling a home. Why did you trust one realtor over the other to work with?
Sometimes overdressing can separate yourself from your audience rather than associate yourself with them or seem trustworthy to your audience. If you’re aware your price range is on the lower side, you may feel intimidated and unsettled if your realtor is overdressed because they may not understand your situation.
Choosing the correct message to portray to your audience is a challenge within itself, but most likely if you have a marketing campaign, you already know this! If you’re a bank, you want to come across as trustworthy.
If you’re a rolling skating arena, you want to appear fun. Finding it hard to see which feeling your business is trying to embody? Think of what emotions your business wouldn’t want customers to associate you with.
Serifs and Sans Serifs
Once you’ve come up with this message, you’re halfway there. Choosing a font is merely finding a style that represents this. Be aware of the different styles of fonts like serifs and sans serif fonts. This could be an easy deciding factor that could narrow down your search! Generally, serif fonts have a traditional style.
These are the fonts that have the little feet at the end of each character. Sans serif fonts were invented after, and are usually considered a much more modern font. These fonts, not containing the feet at the end of each character, display well on digital screens. Upon picking a serif or sans serif font, experiment with the font against your design and how the font is described online.
Serifs and sans serif fonts pair extremely well together because they have what the partner doesn’t!
A great example of this is April Fatface and Roboto. Abril Fatface takes the spotlight, while Roboto takes a backseat, with its simple lines and versatile design.
Another great example is Dancing Script and Josefin Sans. Both fonts have a similar delicate design that looks handwritten. Yet, Dancing Script could only be displayed on headlines or else it would overwhelm the readers, and Josefin Sans effortlessly simple.
Finding Your Font’s Perfect Pair
Once you’ve got a font or an idea of a font you’re looking for, it might be time to use a font combination tool. These are great because they make the pairing process much smoother. If you have no idea where to start or aren’t into design, a font combination tool, like this one by Bold Web Design Adelaide, is a great place to find inspiration or start to realize what you like and don’t like in a font.
Think of pairing fonts like music. There’s a melody and a harmony. One takes precedent: the melody. Without both, the music would feel incredibly empty. It may seem like the melody is more important, and it may relay the main message, but both are needed to make a song. They define each other, as without the melody the support music wouldn’t be called harmony and vice versa.
Pairing fonts is exactly like the melody and harmony in a song. One is the focal point that shines through, which I like to call the focal font. This is the font that usually has more personality, and is used for headlines or larger text. With two focal fonts, your reader would be incredibly overwhelmed when reading through your information.
Pairing fonts is a balancing act, requiring both fonts to work together and not to take up too much attention from your readers. Secondly, both fonts have to be compatible. This relays back to your marketing messaging. You wouldn’t release a marketing campaign with one ad that’s creative and fun, and another that’s scary and serious. Ensure both fonts align with the message and emotion, and compliment each other.
Pairing fonts is a great way to differentiate information from each other. Just as we section content within an article with headers and subheaders, different fonts can be used for the headers and paragraphs to further associate a transition within the content.
Text that you want to stand out can be placed in a standout font, and support with a much simpler font. Even the weights of fonts within a pair can be changed, making a font bold, thin, italicized, and other variations to increase its versatility. The possibilities are truly endless.
Play around and get familiar with the options out there. Once you’ve accomplished this, pairing fonts is a piece of cake. Your fonts will work together like a seamless song.
What Not to Do
Don’t choose a font blindly. Picking the correct font for your business takes awareness and understanding. A font that works for another company, may not work for yours. Rather than looking at fonts as a design decision, think of it as a sales decision.
If you’re just picking a random font from a list without much consideration, you could be throwing away potential leads to your products and services without even knowing. Within the age of digital content galore, you want to set yourself apart from the rest.
A font is the puzzle piece to a unique brand identity and a competitive edge! Don’t put two loud fonts together. A font that definitely has a “personality” should not be paired with another font like it.
Find a versatile font to pair with loud fonts or pair two versatile fonts together. Versatile fonts are simple and readable like Arial or Roboto.
Conclusion
At the end of the day, a font can always be changed if not now, later. Test different fonts and see which ones work well for your company’s design. If you’re working with print materials, print a couple of tests and get your team’s vote.
A design is just an extension of the company, design, and culture. What better way to decide if it’s a great fit than to ask the ones that work there. When you see a good font pairing, it will seem effortless and you won’t be looking at the fonts, you’ll be reading the content.
The fonts will balance each other out – working together to differentiate between text and information. After all, the right font pairs are like two peas in a pod.
Today marks the first time in nearly a decade that I am no longer an MVP. I will be joining the MVP alum in the MVP Reconnect program.
Getting the MVP award every year has become a great side benefit and validation, but the real achievements have been in working with the community and all the things that we’ve accomplished over the last decade!
When I first received the Microsoft MVP award in 2010, it was an achievement I had been working towards and it was something that really validated the work I was doing in the community. It was a goal I had set – to become a Microsoft MVP. When I got it, I was so excited and felt like Microsoft folks were really paying attention to what I was doing. Keep in mind back then that open source wasn’t even a contribution category, but I was doing a lot of talks in the community and working on the Chuck Norris Framework.
After achieving the award for the first time, my focus shifted to primarily doing great things in the community. A lot of that for the last few years has been hands on and I’ve been at the forefront of those efforts. And accordingly, Microsoft continued to validate that what I was doing was important and helpful for developers using Microsoft technologies.
Over the last few years, my role has shifted a bit to building a long term viable business to support the Chocolatey community. This means managing a business and building an amazing team that can help move my vision forward. This last year especially I’ve been focused in that effort of building a great team and that has meant that I’ve had less visible contributions. I’ve been focused enabling my team to do great things, and two of them are MVPs, which is fantastic!
I’m certainly very appreciative of my time as an MVP and have met a lot of amazing folks in the MVP community! I would have loved to have that 10 year blue disk, but Microsoft has rightly saw that my contributions over the last year have not been up to the standard of other folks out there and has made a proper decision on that front.
One thing I will miss is filling out the renewal paperwork every year as it forced me to take some time to reflect on all the great work we were doing in the community, and it put numbers to that work. I think I will look for my own time to do that reflection at some interval, hopefully a bit more often than annually. I always think of this Ferris Bueller quote when I take a moment to reflect. It’s certainly a great quote to apply to your life:
“Life moves pretty fast. If you don’t stop and look around once in awhile, you could miss it.” – Ferris Bueller’s Day Off
Thank you Microsoft for the opportunity and validation over the years – I’m going to continue doing great things in the community and maybe that will bring me back to the MVP award, but maybe it won’t. And that is totally fine.
Today marks the first time in nearly a decade that I am no longer an MVP. I will be joining the MVP alum in the MVP Reconnect program.
Getting the MVP award every year has become a great side benefit and validation, but the real achievements have been in working with the community and all the things that we’ve accomplished over the last decade!
When I first received the Microsoft MVP award in 2010, it was an achievement I had been working towards and it was something that really validated the work I was doing in the community. It was a goal I had set – to become a Microsoft MVP. When I got it, I was so excited and felt like Microsoft folks were really paying attention to what I was doing. Keep in mind back then that open source wasn’t even a contribution category, but I was doing a lot of talks in the community and working on the Chuck Norris Framework.
After achieving the award for the first time, my focus shifted to primarily doing great things in the community. A lot of that for the last few years has been hands on and I’ve been at the forefront of those efforts. And accordingly, Microsoft continued to validate that what I was doing was important and helpful for developers using Microsoft technologies.
Over the last few years, my role has shifted a bit to building a long term viable business to support the Chocolatey community. This means managing a business and building an amazing team that can help move my vision forward. This last year especially I’ve been focused in that effort of building a great team and that has meant that I’ve had less visible contributions. I’ve been focused enabling my team to do great things, and two of them are MVPs, which is fantastic!
I’m certainly very appreciative of my time as an MVP and have met a lot of amazing folks in the MVP community! I would have loved to have that 10 year blue disk, but Microsoft has rightly saw that my contributions over the last year have not been up to the standard of other folks out there and has made a proper decision on that front.
One thing I will miss is filling out the renewal paperwork every year as it forced me to take some time to reflect on all the great work we were doing in the community, and it put numbers to that work. I think I will look for my own time to do that reflection at some interval, hopefully a bit more often than annually. I always think of this Ferris Bueller quote when I take a moment to reflect. It’s certainly a great quote to apply to your life:
“Life moves pretty fast. If you don’t stop and look around once in awhile, you could miss it.” – Ferris Bueller’s Day Off
Thank you Microsoft for the opportunity and validation over the years – I’m going to continue doing great things in the community and maybe that will bring me back to the MVP award, but maybe it won’t. And that is totally fine.
Do you remember the “Breakfast at Tiffany’s” scene where Holly Golightly was standing in awe in front of Tiffany’s window?
While Tiffany & Co., without a doubt, is an established and recognized brand, it still has to take care of its showcase decoration so the product display corresponds to the brand image.
So why should things be different from your e-commerce store?
Unlike physical stores, online shops cannot offer the customers an opportunity to try or touch the products. Hence, online stores rely on design heavily in order to instantly grab the shoppers’ attention and showcase the products in the best manner.
However, it’s easy to miss certain things in design when optimizing the whole store and fine-tuning its performance. But these little things can actually have a big impact on your conversions and revenue. Let’s have a look at the biggest design mistakes that many e-commerce stores make and see the ways of fixing them.
Poor theme choice
The e-commerce theme is a landmark of the store.
The moment the user lands on the site, they will be either immediately attracted or will prefer to leave. And this depends on the first impression a lot.
A theme comprises a variety of elements (e.g. banners), the overall layout, navigation, and much more. The biggest things to look for in a theme are:
Correspondence to the brand: a theme’s look may be in a complete mismatch with the way you perceive your brand.
Responsiveness: the theme should function equally well on all needed browsers/devices.
Optimization: it is highly preferable that a theme can be easily optimized.
User-friendly design: shoppers prefer certain elements to be easily recognizable (i.e. shopping cart in the upper right corner).
The e-commerce merchant can choose either from a ready theme from a Marketplace or a custom one that requires development from scratch.
While readymade themes are usually responsive and can be used right away, they may not necessarily correspond to your brand and may have problems with performance. Custom theme, on the other hand, can be tailored precisely for your brand but usually have high cost and demand more time for development.
An important point here: consider the e-commerce platform that powers your store. Shopify, for example, is not very customizable and it might be better to choose from available pre-designed themes. Magento, on the other hand, is known for its high level of customization. So it will make sense to address a Magento development company to create a perfect theme that will not let you down in terms of looks and performance.
Poor images quality
You want the shoppers to fall in love with your products and buy from you. And for that, you need to present the products in the best manner.
The quality of product images is an absolute must for any e-commerce store. As well, keep an eye on the images’ behavior on different devices and different browsers.
What some e-commerce stores do is providing a zoomed-in product image so the shopper can see the product details. This contributes to increasing the product’s value and keeping the customer interested.
Poor CTAs
We all know call-to-action buttons. They are responsible for encouraging customers to perform certain actions on the site: add the product to the cart, proceed to the cart, view offers, etc.
CTA buttons are basically the beacons of an e-commerce store that navigate the users and help them reach the desired point in the best manner.
However, some e-commerce stores have problems with their CTAs. The most common issues are:
CTAs are not visible enough: they blend with the page background and can hardly be noticed.
The message of a CTA button is not convincing.
Poor placement choice: the button cannot be spotted.
The main rule of a good CTA: make it noticeable. Use bright colors, avoid ghost buttons, and place the CTA near the important page elements (like price or product image).
As well, try personalizing your CTA buttons. People are tired of clichés like “Shop now” – instead, try incorporating your products into the CTA message.
Complex navigation
The UX part of your design is aimed at helping the shoppers discover the products in a convenient and easy manner. Unfortunately, many e-commerce stores have complex navigation that serves as a major reason for shoppers to leave the store.
The issues with navigation include complex filtering, incorrect categories organization, confusing CTA buttons, incorrect organization of the homepage, and much more.
The main thing to remember about navigation is that it has to create a seamless and frictionless sales funnel. And for that, you need to think about the customer’s journey and outline the main points of interaction between the user and the site.
To analyze the performance of your store and identify problem areas, use Google Analytics. This tool will help you see which pages see the highest bounce rate and how the shoppers behave on your site.
Lack of search optimization
Search can be referred to navigation issue but we shall look at it separately.
One of the biggest issues with search is no return of results.
There may be different reasons for no search results: the user incorrectly typed the product name or the product may be out of stock. But whatever the reason is, do not leave the user with “Sorry, no matches found” message.
More and more stores started adopting the strategy of placing their best-selling or relevant products in the results return. This lets the stores upsell or cross-sell and increase the chances for conversion.
A good idea would also be to incorporate the autocorrect for your search to eliminate the risk of no results found and add a popup with product suggestions.
And the last tiny advice on search UX: replace search icon with a search bar and place a hint text in it. Though seemingly simple, a search bar actually generates more conversions and encourages shoppers to use it.
Non-optimized checkout
Shopping cart abandonment is a big problem for almost all e-commerce stores. With an average cart abandonment rate of 75.6%, the e-commerce stores have to double-check their stores for the problem areas that discourage users from making a purchase. And checkout is the most sensitive area in the whole sales funnel.
Checkout is the place where the transaction happens and the order is placed. The user may roam your store forever but as soon as “Place the order” button is hit, there is no way back.
Or is it?
Lack of checkout optimization is what contributes to a high cart abandonment rate and leave you with a decrease in sales. Here is what users hate the most about the checkout:
Too many steps in the checkout process
Obligatory registration
Not enough payment options
Too many unnecessary fields in the checkout form
A user-friendly checkout has to have a minimal number of clear and justified steps. As well, add an option of a guest checkout so users can decide between registration or quick checkout process via an email or social media profile.
Many checkouts have too many fields that can be easily eliminated. Do you really need to have two address lines or one will be enough? As well, replace the “First Name” and “Last Name” fields with a “Full Name” one – the UX Playbook by Google claims that this change actually impacts the shoppers’ behavior.
Another thing that can help you raise the conversion is by adding security badges to the site. The presence of security badges builds trust and helps the users make a purchasing decision.
Non-responsive design & lack of mobile optimization
Different people prefer different browsers and devices – your task is to make the store design suitable for them all.
Of course, you don’t need to adapt the store for the first version of Internet Explorer but do some research and see which browsers and devices are the most popular with your target audience. The store should look and perform equally well on all needed browsers and devices.
Another issue is mobile optimization. Considering the rise of mobile e-commerce and mobile-first indexing, introduced by Google, it seems like all e-commerce merchants should understand the importance of mobile and optimize the store correspondingly.
Yet, we can still go to an e-commerce store from a mobile device and see crooked images, lack of text alignment, or non-clickable elements.
So for all the e-commerce merchants out there, mobile optimization is a primary issue to resolve. And don’t forget that mobile UX is different from a desktop one: images have to be of exceptional quality, size of certain elements like CTAs should be bigger and the navigation has to be ultra-intuitive.
Final word
A good design of an e-commerce store implies that the store is user-friendly and aims to deliver an excellent customer experience. After all, your products may be beyond awesome – but how can customers know that if they are not even able to proceed to the category pages?
By taking care of your store design, you automatically take care of the customers too – and this will not go unnoticed.
You may have heard (or even issued the call) that “we can just use lazy loading!” when looking for a way to slim down a particularly heavy web page.
Lazy loading is a popular technique for gradually requesting images as they come into view, rather than all at once after the HTML of the page has been parsed. It can reduce the initial page weight, and help us hit our performance budgets by requesting images when they’re needed.
Yikes! Well, that’s kinda okay, I guess. It makes sense that the image would bump right up against the text like that because we haven’t set a width on the image. Ideally, though, we’d like that image to have a fixed width and then the text should take up whatever space is left over.
This looks great in Chrome. But wait, what? If we inspect the image tag in Firefox DevTools, we’ll find that it’s not the width value that we set at all:
We could use min-width to force the image to the 50px width we want:
img {
min-width: 50px;
margin-right: 20px;
}
Buuuuuuut, that only sets helps with the width so we’ve got to put a margin in as well.
img {
min-width: 50px;
margin-right: 20px;
}
There we go. That’s better in Firefox and still works in Chrome.
The even longer answer
I realized the image is getting the squished treatment because we need to use the flex-shrink property to tell flex items not to decrease in size, regardless of whether or not they have a width.
All flex-items have a flex-shrink value of 1. We need to set the image element to 0:
If we set the flex-shrink value to 0 and the flex-basis value to the default width we want the image to be, then we can get rid of the width property altogether.
That flex-shrink property solves a ton of other problems and is pretty dang important if you want to start using flexbox. Here’s another example why: I stumbled upon yet another problem like the one above and I mentioned it in a recent edition of the newsletter. I was building a navigation component that would let users scroll left and right through multiple items. I noticed the following problem when checking my work:
That longer navigation item shouldn’t break into multiple lines like that — but I finally understood why this was happening, thanks to the previous issue. If you set the flex-shrink property to 0 then it will tell each item in this navigation not to shrink and instead assume the width of the content instead, like this:
And, yes, we can go the extra step once again to use the flex property instead, this time using auto as the flex-basis since we want the maximum amount of space for all items to be considered when divvying up space in the navigation container.
This month we’re taking a close look at above-the-scroll presentation. It’s the first thing you see, and the first impression a user has when they type in your URL. So, it’s a logical place to spot trends in website design.
Here’s what’s trending in design this month.
1. Text That’s Almost Hard to Read
With so much focus on readability and accessibility, this trend might be a little surprising. Designers are experimenting with hero text elements that are difficult to read.
It’s not that the text elements are unreadable; you just have to stop and think about them for a minute.
Why would this technique work? Text in these instances is more of an artistic element, and while the words have meaning, they draw our attention because of visual components. Text is designed to make you look longer on purpose.
Each of the examples below does this in a slightly different way.
MetaView uses a split screen design with text elements that change color on the split screen. On the left, color is muted and more transparent while it is bolder and lacks transparency on the right. The words are readable but you definitely need a few extra seconds to process them.
Perfection includes two layers of text. An oversized foreground layer makes you think about the letters that are missing from the screen to fill in the words. A pale, soft background layer is behind it and the words are turned 90 degrees, also making you look closely to understand the message.
Next Creative Co. mixes an outline font into the mix with animation and a gradient stroke border. While this might be the least difficult to read element of this set of examples, it shows distinctly how a design like this forces you to slow down to read. Your brain processes “Let’s make it” rather quickly, and almost takes the full duration of the animation to understand the final word in the phrase.
2. In Your Face Faces
It’s hard to find a more immediate way to connect with a user than with a striking image. Using a face to convey emotion creates an even more distinct connection.
The in-your-face-faces design trend does that with stunning close-up images of people. The visuals create an immediate focal point and impact. The user feels something right away before even beginning to process the words or other information on the screen.
What’s nice about this trend is that it is designed to connect users to content.
With each of the examples below, you might find it hard to look away. You look first at the face on the screen and with something like the Coulee Creative design, you may even smile a little. It piques curiosity. You start to scan the rest of the design to find out what it is about.
And this trend has you. It’s easy to get engulfed in a design with such a strong, striking visual from the start. Each of these examples has an extra element as well, with animation that keeps adding interest to the faces.
Coulee Creative includes multiple people making a variety of faces, Muax has a scroller of images (although the pictured image is the most in your face), and Roobinium uses a glitchy animation as the character turns to look directly at the user.
3. All the Text to the Left
For a while, the trend in hero headers was to use large text in the middle of the screen. You’ll still see a lot of that in designs. (It’s one of those concepts that never gets old.) What is beginning to gain steam is a more one-sided layout with all the text on the left side of the screen, while imagery and graphics are on the right. It’s tempting to call it left-aligned, but it’s more than that.
This layout creates a different type of symmetry when appropriately weighted. The elements on the left and right sides of the screen need to feel equal in weight so that the eye travels across the information well.
Responsive design has really powered this trend. (Visit the mobile versions of the Creact and Few designs, below, to see it in action.)
Text and image elements stack on smaller screens. The left-most element – here text – floats to the top of the design on small screens. This provides excellent display for messaging above the scroll on a small device while maintaining the consistent look and design that desktop users experience.
What really makes all this left-hand text work is that it’s not flat. Each of the websites uses stunning typography and color to make the most of what could easily be a boring display.
Conclusion
Just because something is trending doesn’t always mean that the design is “good.” It doesn’t mean that it’s bad either. Trending designs just show new techniques and visual elements that are popping up more regularly.
It can be fun to go back a few months and look at trending elements and see if the trend has grown of fizzled. Of the ones above, I expect the “in your face faces” to stick around for a while. This image style is so impactful.
