A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation.
CodePen Embed Fallback
How it works
The trick? First, it’s to make an unordered list an inline element with no markers or spacing:
Next, we display list items inline so they flow naturally as text in a sentence:
li {
display: inline;
}
Then we add commas between list items by selecting their ::after pseudo-element, and setting it’s content property with a comma (,) value.
li::after{
content: var(--separator);
}
Oh, but wait! What about the ol’ Oxford comma? Use :nth-last-of-type() to select the second-to-last list item, and set its ::after pseudo-element’s content property to ", and" before the last list item.
li:nth-last-of-type(2)::after{
content: ", and ";
}
We’re not done. @ShadowShahriar considers an edge case where there are only two items. All we need is to display an “and” between those two items, so:
li:first-of-type:nth-last-of-type(2)::after {
content: " and ";
}
That way, when we can swap those out for other ways to separate list items later. Nice touch.
This caught my eye not only for its clever use of pseudo-element trickery, but also for its simplicity. It’s using tried and true CSS principles in a way that supports semantic HTML — no extra classes, elements, or even JavaScript to help manipulate things. It almost makes me wonder if HTML could use some sort of inline list element ( anyone???) to help support sentences convey list items without breaking out of a paragraph.
Do you ever get bored with design projects? Feel like you keep designing the same things on repeat?
This collection of trends – from fun angles to illustrations where you wouldn’t expect them to cool three-dimensional concepts – is sure to help you think a little more out of the box. It might be just the right inspiration to cure some of that design boredom.
Here’s what’s trending in design this month.
1. Angles for Attention
Working with angles is a fun technique because you can essentially point website visitors to what you want them to see on the screen.
Angles can be aggressive and have an obvious visual goal. They can also have an easier feel without so much direct intent. This trend can look a lot of different ways, making it a versatile option for designers.
Each of the three examples here takes a different approach to angles.
Bake Inc. uses various angles with imagery and whitespace to draw the eye past the visual elements to the brand name at the bottom of the screen. If you click through to the design, you’ll see that there isn’t just one angle-image design, but it’s a collection of changing images and angles that work beautifully in concert.
Instabase uses a collection of animated geometric shapes as the main visual element on the screen. Note the directional pull of the triangle in the bottom left of the group of shapes. It helps lead the user to the “Request a Demo” call to action on the other side of the screen.
Readymag’s Custom Cursor is one of those aggressive angles. The giant cursor is what the design is about, but because of the size and shape of the object, users are directed to the word “cursor” as well. That adds extra emphasis to what the design is about. With the combination and the oversized element and giant angle that are so in your face, you can’t help but get a quick understanding of what the design is about.
2. Unexpected Illustrations
This might be the most fun we’ve seen with a website design trend in a while – projects and companies are using illustrations in some of the most unexpected places.
The design surprise happens when an industry that you don’t expect uses this type of imagery. A simple illustration takes the design to another level, or illustrations mix with other elements to paint a whimsical overall scene. Those are the things you can find with each of these three examples.
Krivitzky is a website for a business law firm. This is not at all the type of website where you’d expect illustrations (including a dragon). While the design is fun to interact with, it’s hard to say if it works. If you needed representation, would this appeal to you? In terms of legal websites, this is a total disruptor and forces your attention. That could be a good thing.
Studio Mesmer is one of those simply understated designs that’s almost perfect. The stark black background makes the simple illustration that much more striking. The eye also has a nice hover animation effect for an added surprise.
Kenn & Kitt mixes an illustration with real imagery to paint a more whimsical scene. What’s nice about the illustrated elements of the website design is that it helps connect the website to the product packaging, which uses illustrations while feeling “real” with the photo of a dog. It’s a bright and sunny combination of photos and illustrations that feels whimsical but has the right vibe for the product category.
3. 3D Depth
The three-dimensional website design trend keeps ebbing and flowing. And right now, it is flowing with full-screen 3D elements for maximum depth that makes you feel like you can almost dive into the screen.
While most of these designs use illustration with animation to create the 3D scene, you don’t have to abide by this example. The goal is to create something that looks and feels immersive so that users will want to take part in the experience.
The Match Maker has an 80s gamer vibe where you can feel yourself going down the tunnel on the screen. Additional hover animations move the screen, even more to help you get into the game.
Hafele Discoveries uses a wide-angle style animation with back and forth motion. The fish-eye style of the design adds an element of depth, which is further magnified by the foreground box with text and call to action elements. The design concept is attention-getting, but the motion can be a little dizzying if you leave it on the screen too long.
FiveT Hydrogen takes a more “traditional” approach to a three-dimensional website design with an illustration/animation that includes elements of depth. This is magnified on the scroll action of the design with shadows and layers and a variety of elements – real and illustrated – that make you feel like part of what’s happening on the screen. It’s an immersive learning experience about clean hydrogen that almost forces users to keep scrolling. The 3D effect is what takes it to another level.
Conclusion
Not every design trend is right for every project. Take a good look at what you are trying to accomplish and match it with a design concept.
If you want to try one of these trends, but they are a little too out there, experiment with a small area of the design or a landing page first. That’s a good place to test ideas and conversion rates to see if the design technique will work for your audience.
Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.
The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!
That’s a heartwrenching title from Michael Williamson. I believe it though. It’s kinda like a maximized version of the blogging phenomenon where if you work on a post for weeks it’ll flop compared to a post that’s some dumb 20-minute thought. Or how your off-handed remark to some developer at the perfect time might cause some huge pivot in what they are doing, changing the course of a project forever. For Mike, it was a 3,000 line-of-code side project that had more impact on the world than a career of work as a software developer.
I’ve tried to pick companies working on domains that seem useful: developer productivity, treating diseases, education. While my success in those jobs has been variable – in some cases, I’m proud of what I accomplished, in others I’m pretty sure my net effect was, at best, zero – I’d have a tough time saying that the cumulative impact was greater than my little side project.
Impact is fuzzy though, isn’t it? I don’t know Mike, but assuming he is a kind and helpful person, think of all the people he’s likely helped along the way. Not by just saving them minutes of toil, but helped. Helped grow, helped through hard times, helped guide to where they ought to go. Those things are immeasurable and awfully important.
Material Design is Google’s design language for creating digital experiences.
Initially developed in 2014, Material Design is a subset of flat design, or minimal UI design, while also flirting with skeuomorphism with its rules for surfaces and interaction. The latest iteration of Material Design, Material You was unveiled in May 2021 and is expected to redefine the language significantly.
With so many agencies and in-house teams adopting Material Design, understanding its prescriptive styles has become essential knowledge for web designers.
What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries.
Or get around it with a small fix. I suppose we could call it a “hack” since it’s a workaround in code that arguably we shouldn’t have to do at all.
The issue
Before I show you the fix, let’s examine the issue. We can see it by looking at two different approaches to CSS backgrounds:
a background using a linear gradient
a background using an image
Linear gradient
I want to keep the background gradient in a fixed position on scroll, so let’s apply basic CSS styling to the body that does exactly that:
Here are the results in Chrome and Firefox, both on Android, respectively:
Chrome Android
Firefox Android
The gradient simply scrolls along with other content then jumps back. I don’t know exactly why that is — maybe when the URL tab goes up or disappears on scroll and the browser finds it difficult to re-render the gradient in real time? That’s my best guess since it only seems to happen in mobile browsers.
If you’re wondering about iOS Safari, I haven’t tested on iOS personally, but the issue is there too. Some have already reported the issue and it appears to behave similarly.
The grey section at the top just indicates the presence of an actual URL bar in Chrome Android.
Another interesting thing to note is that when background-attachment: fixed is applied, the height is ignored even if we explicitly specify it. That’s because background-attachment calculates a fixed background position relative to the viewport.
Even if we say the body is 100vh, background-attachment: fixed is not exactly in accordance with it. Weird! Perhaps the reason is that background-attachment: fixed relies on the smallest possible viewport while elements rely on the largest possible viewport. David Bokan explains,
Lengths defined in viewport units (i.e. vh) will not resize in response to the URL bar being shown or hidden. Instead, vh units will be sized to the viewport height as if the URL bar is always hidden. That is, vh units will be sized to the “largest possible viewport”. This means 100vh will be larger than the visible height when the URL bar is shown.
Firefox does not appear to support the local value when applied on a textarea element.
Chrome has an issue that occurs when using the will-change property on a selector which also has background-attachment: fixed defined. It causes the image to get cut off and gain whitespace around it.
iOS has an issue preventing background-attachment: fixed from being used with background-size: cover.
Let’s fix it
Call it a temporary hack, if you will. Some of you may have already tried it. Whatever the case, it fixes the linear gradient and background image issues we just saw.
So, as you know, we are getting in trouble with the background-attachment: fixed property and, as you might have guessed, we are removing it from our code. If it’s looking at the smallest possible viewport, then maybe we should be working with an element that looks for the largest possible viewport and position that instead.
So, we are creating two separate elements — one for the background-gradient and another for the rest of the content. We are replacing background-attachment: fixed with position: fixed.
.bg {
background: linear-gradient(335deg, rgba(255,140,107,1) 0%, rgba(255,228,168,1) 100%);
background-repeat: no-repeat;
background-position: center;
height: 100vh;
width: 100vw;
position: fixed;
/* z-index usage is up to you.. although there is no need of using it because the default stack context will work. */
z-index: -1; // this is optional
}
Now, wrap up the rest of the content — except for the element containing the background image — inside a main container.
We can use the same trick hack with background images and it works fine. However, you do get some sort of background scrolling when the URL bar hides itself, but the white patch is no longer there.
A fixed-position element with a height set to 100% behaves just like the element with background-attachment: fixed property, which is clearly evident in the example below! Just observe the right-most bar (purple color) in the video.
Even though, David Bokan in his article states that:
That is, a position: fixed element whose containing block is the ICB will resize in response to the URL bar showing or hiding. For example, if its height is 100% it will always fill exactly the visible height, whether or not the URL bar is shown. Similarly for vh lengths, they will also resize to match the visible height taking the URL bar position into account.
If we take into account that last sentence, that doesn’t seem to be the case here. Elements that have fixed positioning and 100vh height don’t change their height whether the URL bar is shown or not. In fact, the height is according to the height of the “largest possible viewport”. This is evident in the example below. Just observe the light blue colored bar in the video.
So, it appears that, when working with a container that is 100vh, background-attachment: fixed considers the smallest possible viewport height while elements in general consider the largest possible viewport height.
For example, background-attachment: fixed simply stops working when a repaint is needed, like when a mobile browser’s address bar goes away on scroll. The browser adjusts the background according to the largest possible viewport (which is now, in fact, the smallest possible viewport as URL bar is hidden) and the browser isn’t efficient enough to repaint on the fly, which results in a major lag.
Our hack addresses this by making the background an element instead of, well, an actual background. We give the element containing the content an absolute position to stack it on top of the element containing the image, then apply a fixed position on the latter. Hey, it works!
Note that the viewport height is calculated excluding the navigation bar at the bottom (if present). Here’s a comparison between the presence and absence of navigation bar at the bottom in Chrome Android.
Is there a downside? Perhaps! We’re using a general
instead of an actual tag, so I wouldn’t say the markup is semantic. And that can lead to accessibility issues. If you’re working with an image that adds meaning or context to the content, then an is the correct way to go, utilizing a proper alt description for screen readers.
But if we go the proper route, then we’re right back where we started. Also, if you have a navigation bar at the bottom which too auto hides itself, then I can’t help it. If the hack won’t cut it, then perhaps JavaScript can come to the rescue.
There is a conversation that has been percolating for as long as I’ve been in the web design and development industry. It’s centered around the conflict between design tools and development tools. The final product of web design is often a mockup. The old joke was that web developers make websites and web designers make paintings of websites. That disconnect is a source of immense friction. Which is the source of truth?
What if there really could be a single source of truth. What if the design tool works on the same exact code as the production website? The latest chapter in this epic conversation is UXPin.
Let’s set up the facts so you can see this all play out.
UXPin is an in-browser design tool.
UXPin is a powerful design tool with all the features you’d expect, particularly focused on digital screen-based design.
The fact that it is in-browser is extra great here. Designing websites… on a website is an obvious and natural fit. It means what you are looking at is how it’s going to look. This is particularly important with typography! The implementer of this card component can see exact colors (in the right formats) are being used, as well as the exact pixel dimensions, etc.
Over a decade ago, Jason Santa Maria thought a lot about what a next-gen design tool would look like. Could we just use the browser directly?
I don’t think the browser is enough. A web designer jumping into the browser before tackling the creative and messaging problems is akin to an architect hammering pieces of wood together and then measuring afterwards. The imaginative process is cut short by the tools at hand; and it’s that imagination—or spark—at the beginning of a design that lays the path for everything that follows.
Perhaps not the browser directly, but a design tool within a browser, that could be the best of both worlds:
An application like this could change the process of web design considerably. Most importantly, it wouldn’t be a proxy application that we use to simulate the way webpages look—it would already speak the language of the web. It would truly be designing in the browser.
It’s so cool to see this play out in a way that aligns with what great designers envisioned before it was possible, and with new aspects that melt with today’s technological possibilities.
You can work on your own React components within UXPin.
This is where the source of truth magic can happen. It’s one thing if a design tool can output a React (or any other framework) component. That’s a neat trick. But it’s likely to be a one-way trip. Components in real-world projects are full of other things that aren’t entirely the domain of design. Perhaps a component uses a hook to return the current user’s permissions and disable a button if they don’t have access. The disabled button has an element of design to it, but most of that code does not.
It’s impractical to have a design tool that can’t respect other code in that component and essentially just leave it alone. Essentially, it’s not really a design tool if it exports components but can’t import them.
Now, fair is fair, this is going to take a little work to set up. Might just be a couple of hours, or it might take few days for a complete design system. UXPin only works with React and uses a webpack configuration to integrate it.
Once you’ve gotten in going, the components you use in UXPin are very literally the components you use to build your production website.
It’s pretty impressive really, to see a design tool digest pre-built components and allow them to be used on an entirely new canvas for prototyping.
They’ve got lots of help for you on getting this going on your project, including:
As it should, it’s likely to influence how you build components.
Components tend to have props, and props control things like design and content inside. UXPin gives you a UI for the props, meaning you have total control over the component.
Knowing that, you might give yourself a prop interface for your components that provides you with lots of design control. For example, integrating theme switching.
This is all even faster with Storybook.
Another awfully popular tool in JavaScript-components-land to view your components is Storybook. It’s not a design tool like UXPin—it’s more like a zoo for your components. You might already have it set up, or you might find value in using Storybook as well.
The great news? UXPin Merge works together awesomely with Storybook. It makes integration super quick and easy. Plus then it supports any framework, like Angular, Svelte, Vue, etc—in addition to React.
What if designers could use the very same components used by engineers and they’re all stored in a shared design system (with accurate documentation and tests)? Many of the frustrating and expensive misunderstandings between designers and engineers would stop happening.
And a plan:
Connect to any Git repo.
Learn about all the components in that repo.
Make those components available to the UXPin visual editor.
Watch for any changes to the repo and reflect those changes in the visual editor.
Let designer’s design and deliver accurate specs to developers for using those components.
The main goal of a website is getting conversions. You can’t reach that goal if your visitors don’t have a great experience. Therefore, it is necessary to create web designs based on your users’ requirements.
Google Analytics is one of the best free tools that helps you to know about your audience behavior to convert more customers and avoid high bounce rates.
What is UI/UX, and Why is it Important?
UI/UX (User Interface/User Experience) is used to maximize user experience and usability. Designers use this discipline to analyze how users interact with a website and provide solutions that address their pain points. Moreover, UI/UX delights users and improves the overall experience.
As the competition increases each day, having a good website design has become essential to stay relevant. Visitors are more likely to leave if the site has problems with loading, mobile friendliness, etc. Therefore, issues with web design will adversely affect your brand value and sales. UI/UX design helps you tackle these problems by creating highly user-friendly websites that work on all devices and provide the best experience.
How Google Analytics Helps UI/UX Design?
A good design and user interface are critical for your website’s success. Visitors tend to leave a site if it’s not user-friendly. Google Analytics is a powerful tool for web developersthat provides a wealth of information about how your visitors are navigating or using your website. The tool has various specific key performance indicators that will help you improve your UI/UX.
Google Analytics can keep track of every user behavior from the point they land on your site to the moment they leave. With this data, you can optimize your website’s user experience for increased sales or conversions.
Let’s look into how Google Analytics will help web developers to improve UI/UX.
1. Easy to Set Up
You can easily set up Google Analytics on your website with a snippet of code. You will receive this tracking code once you create an account in Google Analytics. With the code, you can access your website data on the Google Analytics dashboard.
2. Track Pageviews
Pageviews let you know every time a unique user lands on a webpage, as well as the number of times the user views that page. Moreover, this feature allows you to track visitor activity on your web pages like their regular journey, type of device and browser they use, etc. This data helps developers know the interaction happening on different pages to address and fix related issues.
3. Analyze Traffic
Google Analytics provides comprehensive reports about the channels that drive traffic to your website. You can analyze the traffic to your site besides accessing other data like engagement, bounce rate, conversions, etc.
4. Analyze Behavior
Google Analytics supports web design servicesby offering rich insights about user behavior . For example, you can understand how users come to different pages, their behavior at particular points, and what they do on a page while staying on it. Moreover, you can find out the factors that lead to high bounce rates, which CTAs drew users’ attention, and which pages received the most attention.
5. Track Events
The event tracking feature of Google Analytics is very beneficial to UI/UX designers. You get access to well-defined micro-interaction data that is not included in the default page view tracking. You can measure the success of multimedia elements, downloadable content, video plays, etc.
6. Guide to Testing
Google Analytics data alone cannot provide you with all the information to improve your website. User testing is also critical. It is done by developing a set of actions commonly performed by your website’s target audience. The data from Google Analytics can be helpful in this stage, as you can compare different issues.
7. Time on Page & Bounce Rate
Time on Page data lets you know where your visitors spend most of their time on the website and where they are not. The data can help you identify UI/UX elements that will benefit user engagement and the harmful elements. That is, the analytics data will help you identify specific parts of your website that need design improvement.
The Bounce Rate data provided by Google Analytics lets you know the percentage of users leaving your landing page before exploring other pages. A strong UI/UX design can help reduce bounce rates by captivating users with the website’s aesthetics.
8. Set Goals
Google Analytics lets you set specific goals to help you know how well your website fulfills the target objectives. For example, you can opt for several critical business goals in the admin section like checkout items, ebook downloads, newsletter signups, account creation, lead capture, etc.
9. Conversion Tracking
UI/UX designers need to know the path taken by users before becoming paying customers. With the conversion data from Google Analytics, web designers can create user journey maps. Then, you can use these maps to modify elements for maximum success.
10. Performance Data
Google Analytics provides device performance data to help you make sure that your design works well across desktops, tablets, mobile devices, etc. If there is an issue with a particular device, you can immediately adjust the UI. You also get to know whether the website has issues loading on different browsers.
11. Audience Insights
Audience insights are very important for good UI/UX. You can access useful information like interests, locations, demographics, devices, etc. This data can help you create designs that your users want. For instance, if you have more visitors at night, you can include a dark mode. Likewise, gender and age data helps you tweak content based on specific interests.
Conclusion
Designing based on guesses doesn’t work if you need conversions. Instead, you need to follow a data-based design to meet your business goals. With so many amazing features available free of cost, Google Analytics is, without a doubt, the finest tool a web development company can have. As we saw, the rich data and insights offered by the tool can help you fine-tune your UI/UX to boost user engagement, improve sales and stay ahead of the competition.
When I think about what front-end development really is and feels like, this is at the heart of it: designing around a huge set of unknowns, and really embracing that notion as a strength of the web rather than a weakness or unfortunate truth we have to work around.
Cathy Dutton digs into this with real code and examples over on A List Apart. A recurring theme is the idea that content (certainly an unknown, since content changes) can and should drive design decisions. It is even floated that container queries might not be all they are cracked up to be since they are still based on a parent, not content.
It’s hard to say for sure whether container queries will be a success story until we have solid cross-browser support for them. Responsive component libraries would definitely evolve how we design and would improve the possibilities for reuse and design at scale. But maybe we will always need to adjust these components to suit our content.
We can’t design the same way we have for this ever-changing landscape, but we can design for content. By putting content first and allowing that content to adapt to whatever space surrounds it, we can create more robust, flexible designs that increase the longevity of our products.
The perfect link — Rian Rietveld defines them: “When you click on them, they take you somewhere else.” Not much code in here (we’ve got that), just a lot of practical accessibility advice. For example, the alt text for a linked image can allude to the fact that it is a link. Just an image: “A cherry tree in full bloom.” Link: “Wikipedia on cherry blossoms.”
Google Announces Seismic Change to Docs — George Joeckel covers the unfolding news that Google Docs is going to be rendered in , which feels like a massive WTF moment when it comes to accessibility. At one point, the vibe was that there would be a separate product for people with screen reader needs. Separate but equal isn’t a good situation. Looks like the based rendering stuff is on hold for now, so community feedback FTW?
prefers-reduced-motion and browser defaults — Speaking of prefers-reduced-motion, Bruce Lawson on the paragraph-of-the-year: Yes, it was a meeting request from Marketing to discuss a new product page with animations that are triggered on scroll. Much as a priest grasps his crucifix when facing a vampire, I immediately reached for Intersection Observer to avoid the browser grinding to a halt when watching to see if something is scrolled into view. And, like an exoricst sprinkling holy water on a demon, I also cleansed the code with a prefers-reduced-motion media query.
Using CSS to Enforce Accessibility — Adrian Roselli covers this great tactic where you don’t get the proper CSS styling unless you’ve also implemented the appropriate accessibility attributes (e.g. [role="region"][aria-labelledby][tabindex] for a scrolling table). This is a powerful idea and happens to showcase the power of CSS nicely in a way that styling solutions that avoid using selectors don’t benefit from.
Accessibility testing with Storybook — Varun Vachhar covers how you can run Axe over your component library even as you code. Accessibility issues, like color contrast problems, are bugs. Might as well give yourself the same tooling opportunities to fix them at the same time you’d fix any other bug.
Making A Strong Case For Accessibility — Todd Libby covers how you can fight for accessibility at work. Attempt 1.) Ethical. Attempt 2.) Financial. Attempt 3.) Legal. 4.) Humanization. Attempt 5.) Don’t ask, just do it.
