That’s why I find my workflow a bit ironic. Yes, I realize change is a part of the profession. And yet I tend to stick with a familiar approach to each challenge.

Nowhere is this more apparent than when it comes to using CSS. It seems like every few years, some revolutionary new feature gets a lot of attention. And while I find it interesting, I’m usually not an early adopter.

Perhaps there’s no harm – provided the techniques I use work as intended. But inevitably, a project comes along that pushes my existing knowledge to the limits. And it’s usually then, after a period of frustration, that I finally dig in and learn something new.

If you’ve ever found yourself in a similar situation, this article is for you. Together, we’ll look at why it’s important to keep up with the latest CSS techniques. And even if your current solutions work adequately, there are still reasons to invest in learning.

New Features Are Often Easier to Maintain

Using older CSS features to create a complex layout traditionally has meant resorting to hacks. That’s not always a bad thing, as it can be a great way to learn the inner workings of the language.

The downside is that cobbling together a layout using CSS floats and clearfixes is neither stable nor elegant. There are no guarantees that these techniques will hold up over time. If your content needs change, for example, you might find that the layout simply breaks.

It’s worth noting that floats and clearfixes came about at a time when CSS didn’t have a simple method for creating multicolumn layouts. Back then, these were among the few acceptable solutions.

However, the additions of both Flexbox and CSS Grid have been game-changers. They’re designed specifically for these types of layouts and have some degree of responsiveness built in. In addition, they typically require less code than those old-school hacks.

Taken together, this should result in code that is much easier to maintain over the long term.

Use of Legacy Browsers Is Plummeting

Among the primary reasons not to adopt modern CSS has been spotty support in legacy browsers. If you needed to cater to those using the likes of Internet Explorer or outdated versions of Safari, you’d be forgiven for not jumping on the latest features.

Fallback solutions were possible, but they might also be a hack in their own right. They were also one more piece of code to maintain.

This wasn’t a huge problem for visual effects like border-radius, where the browser just ignores what it doesn’t understand. But approximating newfangled layouts in old browsers could be very challenging. It often kept me from wanting to implement a feature such as CSS Grid.

But usage for these technological fossils has become minuscule. Internet Explorer has been (partially) retired by Microsoft and is in use by less than half a percent of users. Similar numbers have been reported for legacy versions of Safari as well.

That’s not to say offering a solid fallback isn’t helpful. But the data shows that we no longer need to hold back on implementing new features, either.

More CSS Knowledge = More Versatility

Then there’s the old problem of trying to fit a square peg into a round hole. There are numerous style and layout challenges out there, and they all require unique solutions.

CSS is part of what moves the web forward. That’s reflected in what we see every day. In addition, our clients have also picked up on these shifts in presentation. They now expect us to deliver that same level of quality.

Achieving modern design with old-school CSS isn’t very efficient. Not when there are new approaches that streamline the process. By clinging to the past, we’re making more work for ourselves in the long run. It may also limit our growth potential.

Thus, it stands to reason that the more tools we have in our toolbox, the more versatile designers we become. This frees us to experiment and go beyond the same old looks.

In time, this will benefit both our portfolios and clients. What’s not to like?

Expand Your CSS Superpowers

To be clear, we don’t have to use every new CSS feature immediately after it’s released. There is always a lag in browser support. And some items may not be relevant to our niche.

Still, it’s worth keeping an eye on new developments and becoming familiar with how they work. It’s something that will stay in the back of your mind. When you need it, you’ll have a handy point of reference.

It might also save you from the frustration that comes from using older techniques to solve modern challenges. This is something I continue to wrestle with. Hopefully, this article provides the necessary motivation for all of us!

The post The Importance of Keeping Up with the Latest CSS Techniques appeared first on Speckyboy Design Magazine.

So, what exactly is a Bento layout? Think of it as a puzzle. Different-sized containers fit together to create a seamless look. Inspired by Japanese culture, it’s popping up all over the web.

There’s good reason for Bento’s growing popularity. You can use these layouts in a multitude of ways. Everything from listing blog posts to product features is possible. They’re also perfect for dashboard screens.

We should also mention the role that the evolution of CSS has played. Both CSS Grid and Flexbox make these layouts easier to build. No hacks or workarounds are necessary!

With that, here’s a look at 8 beautiful Bento grid layouts.

Complex Bento CSS Grid Layout

CSS Grid packs a lot of power into a tiny bit of code. For example, this complex grid layout requires only 43 lines of CSS. The layout is both efficient and naturally responsive. Therefore, you won’t have to play around with media queries.

See the Pen Complex Bento Layout

Bento-Style Responsive Dashboard

Here’s a gorgeous dashboard layout that benefits from Bento. The layout offers a great way to display relevant content. Everything is neatly organized and easy to follow. The use of photography and color makes this example stand out.

See the Pen Responsive Dashboard | Bento Style by Ecem Gokdogan

Bento Design Concept Layout

This page layout is a different take on the Bento aesthetic. There’s a sidebar featuring in-page navigation. Clicking a button expands it. Meanwhile, the content container maintains a consistent height.

See the Pen bento design concept by Abhishek Bhardwaj

Bento-Box-V1.0.1

Bento layouts also benefit from minimalism. This layout features fewer bells and whistles. Notice the use of white space and legible typography. The animated charts catch your eye without being overwhelming.

See the Pen Bento-Box-V1.0.1 by Gwenaël Guiraud

Sticky Bento on Scroll

This “sticky” presentation adds special effects to the mix. Watch how certain elements stick as you scroll. The idea is that you can go beyond static grids. Bento can be fun, too!

See the Pen Sticky Bento on Scroll ✨ by Jhey

Bento Grid Using CSS Flexbox

Let’s check out another fun example using Flexbox. This grid has a neon look and includes cool hover effects. Bonus points here for maintaining legibility and responsiveness.

See the Pen bento grid – challenge (Chrome +111) by EaterUsr

Card-Based Layout with Gradient Borders

Here’s an example for those wanting to stand out from the crowd. This card-based layout features animated borders, “wipe” effects, and beautiful hover styling. The layout remains clean – even with all those goodies.

See the Pen Cards (gradient border) by Dan

CSS Grid & :has() Grid Layouts

We can achieve a lot with the CSS :has() pseudo-class. This example uses it to adjust the layout as boxes are added and subtracted. Watch as the layout maintains perfect symmetry throughout.

See the Pen Always great grid – CSS grid + :has() + view transitions by Adam Argyle

Use Bento Grids to Keep Your Layout Nice and Tidy

The idea of using Bento aesthetics in web design isn’t new. However, older CSS layout techniques made them difficult to build. That’s no longer the case.

Perhaps the best part is that modern CSS does all the dirty work. We don’t need to compute complex calculations. CSS Grid and Flexbox can do this for us.

That leaves us free to experiment. The examples above demonstrate what is possible. And you can get as creative as you like.

Want to see more Bento grid examples? Check out our CodePen collection!

The post 8 CSS Snippets for Creating Bento Grid Layouts appeared first on Speckyboy Design Magazine.

Of course, CSS Grid is also incredibly powerful. We’ve seen some developers experiment and push the limits of what it can do.

While that’s impressive, the real beauty of this specification is that it helps us accomplish everyday tasks. The common page and feature layouts that make up a typical website project, and this is the biggest reason to jump on board and utilize CSS Grid.

We’ve put together a collection of 8 common website layout concepts. Each one demonstrates how CSS Grid can make life easier for web designers. And, if you’re concerned about browser support, some also include fallbacks for Flexbox and other layout techniques. Let’s get started!

Discovering the “Holy Grail” of Layouts

At first glance, this “Holy Grail” layout may not look too difficult. In fact, we’ve been seeing it for years. The issue has always been that the available CSS layout methods weren’t very effective at setting it up.

It has traditionally taken any number of hacks to get it just right. Not so with CSS Grid. CSS-Tricks put together a companion article on the process.

See the Pen Holy Grail Layout with Grid by Chris Coyier

Pick a Card UI

Card layout UIs are a big deal these days. And there are so many different ways to make them unique. This set of examples shows how CSS Grid can take the same HTML markup and create completely different looks.

See the Pen CSS Grid: Card Variations by Olivia Ng

Responsive Multi-column Blog with CSS Grid

Here’s an attractive multi-column blog layout that nicely implements whitespace. Each article has room to shine. Plus, it adapts to small screens without a hitch.

This layout is also easy to expand, with more columns and rows just a few attribute tweaks (grid-template-columns, grid-template-rows) away.

See the Pen Grid-Based Blog Index Page Layout 🌷 by Sheelah Brennan

Product Feature List with CSS Grid

This layout is commonly seen in print, but is also a great choice for the web as well. Feature listings flank a lovely product image on either side. Each “feature” is a part of a UL element.

Where CSS Grid really provides an extra boost is in its responsiveness. On smaller viewports, the features are tucked neatly underneath the photo. Go a bit larger (say, a tablet), and the features are pushed over to the right.

See the Pen Center Focus Feature Section // CSS Grid by Brian Haferkamp

Nested CSS Grid Page Layout

Perfect for an online magazine or news-based website, this nested grid layout is quite detailed. And we’re not just talking about its impressive looks.

Scroll down, and you’ll find a fantastic guide to how the layout was built, along with explanations of the different CSS Grid attributes that are utilized.

See the Pen CSS (SCSS) grid with grid layout and fallback to flexbox by Vincent Humeau

Variable Width Content with CSS Grid

Here’s a common wish for designers: keeping the text in a narrow column (great for legibility) while allowing other media to expand beyond those restraints. CSS Grid helps take the pain out of this layout by looking for specific HTML tags and setting them free.

See the Pen Article Layout with Varying Content Width Using CSS Grid by Philipp

CSS Grid Pretty Pricing Tables

Multi-column features such as pricing tables are often created with CSS Flexbox.

So, why use Grid? For one, adjusting your styles for additional columns is a breeze. It’s a solid way to prepare for ever-changing content needs.

See the Pen Simple CSS Grid Layout Pricing Tables by darkos

Masonry Photo Gallery with CSS Grid

Remember when building a masonry grid used to require the assistance of JavaScript? There is no need for the extra bloat here, as CSS Grid can do the job. This snippet shows you how to create a beautiful and responsive layout. In addition to housing images, it could also work well as a blog index page.

See the Pen CSS Grid Responsive Image Gallery by Stephanie

Create Beautiful Layouts with CSS Grid

CSS Grid was created to do extraordinary things and was also built to easily solve more common layout challenges. For instance, none of the items in our collection is particularly exotic. They are all features you would see on blogs and corporate websites.

However, this specification does make them both easier to build and more flexible to maintain. Its properties allow you to quickly create them and make additions as necessary.

More CSS Snippets for Layouts

The post 8 CSS Grid Snippets for Creating Common Website Layouts appeared first on Speckyboy Design Magazine.

But with modern CSS and an occasional dash of JavaScript, we can design containers that really stand out amongst the circles and squares. In fact, taking a short jaunt through CodePen provides plenty of inspiration in this area.

Here are 10 unorthodox container designs that eschew the standard shapes and kick things up a notch in their own way.

Notched Boxes

Chris Coyier of CSS-Tricks fame built this example that, while subtle, offers a much fresher take on the standard box. By simply angling off the sharp edges, we have a more nuanced look. This type of effect provides a much more artistic feel while maintaining usability.

Angled Full-Width Image

Images (or any container) that stretch out over the viewport’s full width can really benefit from doing something a bit different in terms of shape. In this example, the angled borders we see are a nice way of creating a cool visual effect that doesn’t overwhelm the user. Subtle is usually better.

Accent Containers

While we often use containers as places to hold content, they can also make nice design accents. Take this example, where a few shifts of CSS border-radius create an interesting effect that also complements the content below.

Windows (Not That Kind)

CSS clipping paths can do some amazing things. They bring one of the staples of print design into a more interactive medium. Here, we have a clip-path used to create a window-shaped effect around a set of images – complete with beautiful hover animation.

Diamond Navigation Menu

I love this series of diamond-shaped buttons because they turn what could be boring (a collection of navigation links) into something unique. While this may not be 100% simple to maintain in the long-term (adding items would require more CSS), it shows that you don’t have to settle for ordinary.

Diagonal Animation

As they say, why not make your entire page a non-standard shape? Okay, they probably don’t say that. But here we have an example of someone who did create a full-screen animation that bends along with your cursor position. One practical use might be to allow users to “reveal” an object hidden underneath.

The Famous Exploding Polygons

Polygon shapes are being used quite often in web design, but not necessarily in the same way as this example. Here they are used to build a letter (“J,” in this case) that explodes as you hover over it. It makes for an interesting logo and can add a bit of unexpected fun to a website.

A Curvaceous Container

Shaping text around an image is another print effect that isn’t quite so easy to port over to the web. It takes some extra effort, but here’s a look at how stunning it can be. The whole container has much more of a natural flow than one with standard squared-off text.

Corner Shaping

Buttons are another element where we too often settle for standard shapes. But in the right setting, something different can be quite welcome. These buttons not only have various notched-corners, but they also offer a shape-shifting hover animation as well.

The Shape of Things to Come

The use of shaped containers can open up the doors to all kinds of creative looks and layouts. And with the advent of techniques such as CSS Grid, it’s now possible to implement shapes on a much larger scale.

While the examples above may not be a perfect fit for every use case, they prove that the web is slowly but surely moving beyond the basics. So, for your next project, try to literally think outside the box (or circle).

The post 10 CSS Snippets for Creating Unorthodox Shapes appeared first on Speckyboy Design Magazine.

The promise of CSS Grid is that it will simply work as the designer intended, while automatically adjusting to whatever device it’s being displayed on.

Many web designers have experimented with CSS Grid in many unique ways. Here are 10 layouts we found that range anywhere from “useful” to “wow.”

Auto Hexagonal CSS Grid Layout

This is definitely one of the more unique examples of how CSS Grid can help us accomplish something that may have been darn-near impossible in the past. Even more impressive is that this interface was built with less than 150 lines of CSS.

See the Pen Auto Hexagonal CSS Grid Layout by Kseso

Responsive Periodic Table with CSS Grid

While probably not useful (in its current form) to the average designer, this grid is a prime example of the amount of detail that can be achieved with relatively little code. Again, this layout is pure CSS and less than 150 lines.

See the Pen Responsive Periodic Table with CSS Grids by Dudley Storey

CSS Grid Layout with @support Flexbox Fallback

Here’s a layout that is quite useful in real-world situations. It’s also nice to see a Flexbox fallback solution as part of the price we pay for using CSS Grid for some time.

See the Pen CSS Grid Layout with @support flexbox fallback by Gustaf Holm

Wim Crouwel’s CSS Grid Calendar

Wim Crouwel is a Dutch graphic designer known for using grid-based layouts. It’s quite appropriate, then, to recreate one of his most famous works using a whole new type of grid.

See the Pen Wim Crouwel’s Calendar (CSS Grid) by Good Praxis / Chris

CSS Grid Layout Module – Responsive Magazine Layout

Magazine layouts are always a popular pick, and CSS Grid is the perfect way to achieve this kind of look. The best part here is there are no hacks needed.

See the Pen CSS Grid Layout Module – Responsive Magazine Layout by Heather Buchel

CSS Grid Layout – Blog Post Template

Here’s a simple 3-column blog post layout that provides a flexbox fallback. It’s exceptionally lightweight and has lots of styling potential.

See the Pen CSS Grid Layout – Blog Post Template by Stacy

CSS Grid Poster

This poster layout shows the potential for using CSS Grid in combination with CSS animations. Coming in at around 200 lines of CSS, this example looks incredibly intricate.

See the Pen CSS Grid Poster by jakob-e

Stacking CSS Grids for Impossible Layouts

This layout achieves the web designer’s Holy Grail: Equal height columns with no clearfixes or other hacks. The future is now!

See the Pen GRID PILE:Stacking CSS Grids for Impossible Layouts by Morten Rand-Hendriksen

CSS Grid Layout and Comics (as Explained by Barry the Cat)

One of the frustrations of CSS is that things that look like they should be simple rarely are. This cute comic utilizes CSS Grid and SVG graphics to actually achieve simplicity.

See the Pen CSS Grid Layout and Comics (as Explained by Barry the Cat) by Envato Tuts+

React & CSS Grid Image Gallery

Here is a beautifully responsive photo gallery that combines React and CSS Grid. This shows us that galleries can look great, function perfectly, and load quickly.

See the Pen React &CSS Grid Image Gallery by Tobi Weinstock

Get on the Grid

Part of the challenge web designers face is manipulating code to make their creative ideas come to life. You often have to be just as creative in finding hacks and fallbacks as you are in creating concepts. CSS Grid can be a big help in alleviating some of that burden.

Instead of wasting time with workarounds or abandoning ideas because you’re unsure if they’re doable, this new way to create layouts will let you focus on just making it happen.

The experiments above illustrate just how flexible CSS Grid can be and how relatively little code is required to build intricate layouts. So now that you’ve seen what CSS Grid can do, get out there and use it to turn your ideas into something amazing.

More CSS Snippets for Layouts

The post 10 CSS Grid Snippets for Creating Unique Layouts appeared first on Speckyboy Design Magazine.

If you’re looking to learn more about what CSS Grid is and what it does, you’ve come to the right place. We’ll provide a rundown of what you need to know, along with some helpful resources to get you started.

First Thing’s First

One thing we need to note is that, as of this writing, CSS Grid is still a work in progress according to the W3C. That means that the final version of this specification hasn’t been fully released just yet. Overall, browser support is a bit spotty. But that will certainly change as the final spec rolls out.

That being said, it’s never a bad idea to get ahead of the curve when it comes to learning new techniques. Just keep in mind that some things may change between now and the official release. With that fair warning out of the way, let’s dig in and learn more about this important development in web design.

Layout in 2-D

CSS Grid is a system that allows for building 2-D grid layouts. While the term “2-D” doesn’t sound so groundbreaking, it absolutely is in this particular case. You see, CSS Grid will allow you to manage layout according to both columns and rows.

Flexbox, by comparison, is really just meant for columns (1-D, if you will). Using CSS Grid, designers will be able to achieve layouts that were downright difficult before. In fact, some of these things were on our wish lists since the days of table-based layouts.

With tables, it was easy enough to have a column take up multiple rows using the rowspan attribute. CSS didn’t really have a direct equivalent. That led to using multiple nested containers, floats, clearfixes, etc., to achieve the desired effect. This is exactly what CSS Grid aims to fix.

The good thing is that if you are at all familiar with Flexbox, then you’ll be off to a great start with CSS Grid. With both Flexbox and CSS Grid, things are set up via a parent container and subsequent items (children). And, like Flexbox, content order can be set via CSS. This is particularly nice when adjusting the content for mobile devices. What shows up first on a desktop grid may be pushed down lower in the display order on smaller screens.

A Simple CSS Grid Example

Let’s look at a very basic CSS Grid layout. There are three columns and two rows. The third column is unique in that it spans both rows and will display on the right side of the layout.

It actually takes very little code to make this happen. Take a look:

The CSS:

.container {
display: grid;
grid-template-columns: [col1] 33% [col2] 33% [col3] 33%;
grid-gap: 10px;
grid-template-rows: [row1] 47% [row2] 47%;
text-align: center;
color: #FFF;
}

.grid-cell-1 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-2 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-3 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-4 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-5 {
background-color: #898989;
grid-column: 3 ;
grid-row: 1 / 3;
padding: 25px;
border-radius: 6px;
}

A few notes on the CSS:

• In .container, notice that we have the ability to define the width of columns and height of rows. We can also individually name columns and rows with the use of brackets: [name]
• .grid-cell-5 has a couple of interesting attributes. grid-column: 3; tells the browser to start this item as the third column. Meanwhile, grid-row: 1/3; says that the cell will span from the first row until the start of the (non-existent) third row.

The HTML:

Doing this type of layout without CSS Grid would be significantly more challenging. There are, of course, several more complicated layouts that can be achieved. But hopefully, this will illustrate the ease with which something basic can be set up.

The Demo:

See the Pen Simple CSS Grid by Eric Karkovack

CSS Grid Resources

There are a number of outstanding guides and tutorials out there to help you make the most out of CSS Grid. Here are just a few to get you started:

• 10 Creative Examples of CSS Grid in Action
• A Complete Guide to Grid By Chris House
• CSS Grid Layout By Mozilla Developer Network
• Grid by Example By Rachel Andrew
• A Complete Guide to CSS Grid By Codrops CSS Reference
• An Introduction to the CSS Grid Layout Module By Ahmad Ajmi

The post An Introduction to CSS Grid appeared first on Speckyboy Design Magazine.

As designers continue to experiment, they’re not only finding ways to solve common roadblocks that were faced before CSS Grid was around, they’re also taking things a step further. We’re beginning to see the potential for implementing unique layouts that were perhaps darn-near impossible using other methods.

Let’s explore some CSS Grid examples that go well beyond the ordinary:

The Virtual Shoe Rack

This stunning snippet is reminiscent of a shoe display you may see in a retail store – only much more fun. It sports a 3D-like layout, slick hover effects, and is fully responsive. And because this layout both looks amazing and comfortably fits many products into a small space, it might just be an effective way of helping shoppers find what they’re looking for.

See the Pen Isometric eCommerce CSS Grid by Andy Barefoot

Vertically Responsive Poster

Here’s an example of a piece of artwork done completely with a CSS Grid layout and HTML – no images needed. What’s more, it’s also vertically responsive based on the viewport. As the viewport’s height increases, so does the size of the poster.

See the Pen CSS Grid Art Poster (Vertically Responsive) by George W. Park

Fitting In

Who doesn’t love a good game of Tetris? What we have here is a layout inspired by the classic video game. The various pieces use a combination of CSS Grid, clipping paths, and CSS Variables to ensure that each piece fits together through multiple breakpoints.

See the Pen CSS Grid Tetris pieces with CSS variables by Stephen Lee

Mondrian Compositions

Recreating a set of Mondrian compositions provides a worthy challenge for CSS Grid – one that it passes with flying colors. These complex layouts of geometric shapes provide us with an attractive example of the granular control the layout technique offers.

See the Pen 3D CSS Grid Mondrian Compositions by Pete Barr

Apple Keyboard

The finely detailed complexity of a keyboard layout could drive even the most talented designers to tears. But CSS Grid is there to handle those little quirks and helped to make this example pixel-perfect (you may want to view it on a large screen to get the full effect). You can even tap the keys!

See the Pen Apple Keyboard by Jon Kantner

Responsive Photo Gallery

Photo galleries are an area of web design that are ripe for a creative boost. Here we have a gallery that takes advantage of CSS Grid’s layout possibilities, along with image masks that create uniquely shaped photos. The result is something that stands out in a genre where that’s getting harder to do.

See the Pen Responsive gallery with CSS Grids by yoksel

A New Navigation

Navigation can be made infinitely more interesting with the help of CSS Grid. Click into this example menu, and you can see the potential for creating something that is both beautiful and well-organized. And the fact that grids can often be changed without a ton of code means that menus can evolve along with your site.

See the Pen CSS Grid Menu Panels by Ryan Mulligan

Monopolizing the Grid

The things print designers take for granted have left web designers longing for the day when they too could take advantage. A board game like Monopoly is simple enough for print but incredibly complicated for the web. This faithful rendition of the classic game is proof that we now have a whole new set of tools available to us.

See the Pen Monopoly board by John Coppola (@johnnycopes)

Pushing the Web Forward

Perhaps the most impressive aspect of CSS Grid is that it has inspired the imagination of web designers while still being so early on in its useful existence. And while its most important job is in solving the everyday layout requirements of websites, we’re starting to see that it can do so much more.

It will be interesting to see where CSS Grid takes the web as it is implemented more and more.

The post 8 Code Snippets That Demonstrate the Power of CSS Grid appeared first on Speckyboy Design Magazine.

Maybe it’s a bit scary. But there’s a certain excitement that comes with it as well. You learn something new and apply it to your daily work. Most of the time, you’re all the better for it.

For example, consider a new CSS layout that makes multiple columns a breeze. Or a JavaScript library that enables you to build a stunning UI. These are the things that help to push us forward.

Yet, there’s also something that holds us back. A twist of fate so cruel that it laughs in the face of the great new thing you just mastered. We’re talking about legacy software.

This ragtag collection of old browsers, operating systems, and server configurations can be more than just a painful reminder of the past. They can also get in the way of true progress.

But don’t let it ruin your good time. Today, we’ll look at some reasons why you may not need to hold back on implementing the web’s latest and greatest.

Look at the Potential Risks and Benefits

It’s never a good idea to throw a new technology onto a website without careful consideration. Otherwise, you run the risk of negatively impacting both users and your bottom line.

Before you dive headfirst into that cool feature, take some time for analysis. Creating an old-fashioned list of pros and cons can provide you with a macro view of the situation. From there, you’ll have a better idea of whether or not to move forward.

Let’s take CSS Grid as an example. It’s all the rage these days. But is it right for your project? To find the answer, start by writing a list:

Pros

• Makes complex layouts easier;
• Code may be leaner, better performing than other layout methods;
• Lots of modern browser support;

Cons

• No or spotty support in legacy browsers;
• The same layouts may be possible with better-supported methods;

That’s just a partial list, but you get the idea. The mere act of writing (or typing) out your thoughts can lead you to go further in-depth. The deeper you go, the more thorough your analysis will be. The ultimate goal is to make the most informed decision possible.

Usage Statistics Matter

We know there are people out there still using legacy software. And while web designers tend to think in terms of browsers, that doesn’t tell the entire story. Operating systems also play a role. They not only make a difference in what features are available, but they are also likely limited by older hardware configurations as well.

For instance, looking at desktop devices, the version of macOS or Windows a user is running may restrict what browsers are available. On the surface, this might make you think twice about using a newer image format such as WebP.

Mac users who don’t have the Big Sur version of the OS or later or are stuck with a version of Safari that lacks WebP support (Chrome and Firefox support WebP, however). And someone using the aged Windows XP won’t have access to Microsoft Edge.

But that doesn’t necessarily mean that the visitors to your website are among the legacy crowd. By looking at your website’s analytics, you’ll have a better idea of which browsers, operating systems, and devices are being used.

If you find that these users make up a tiny percentage of your overall visits, that may be convincing enough to move ahead with the new technology.

Fallbacks May Be an Option

OK, perhaps you want the best of both worlds. You not only want to adopt the latest web technologies but also keep on supporting legacy users. “Leave no user behind!” is your motto.

This is very much possible with the use of fallbacks. What’s a fallback? It’s a method of switching out code that a specific browser can’t understand with something that it can.

Sticking with our CSS Grid example, we know older browsers aren’t going to do very well with it. But they do understand something like Flexbox or even old-fashioned CSS floats.

Using a tool such as Modernizr, we can detect which features a browser supports. If it supports CSS Grid, wonderful. If not, we can serve up an alternative layout.

The great thing is, you get to decide how it all works. Maybe someone using IE 11 doesn’t need a full-on replica of a fancy layout – just a reasonable facsimile. Either way, this brings some level of comfort in knowing that you’re covering as many users as possible.

Keep Moving Forward

Legacy software is still among us. Fortunately, apps that fail to support modern web technologies are increasingly dying out. As their usage numbers shrink, so do the reasons for holding back CSS Grid, WebP, and other goodies.

Even so, it’s still worth doing your homework with regards to any new technology that interests you. Think about the pros and cons of implementation and use analytics to determine the impact on users.

Fallbacks are also an effective way to mitigate any negative effects for users of outdated software. They’ll still be able to use your site. Meanwhile, everyone else gets the latest features.

The web has come a long way over the past few years. It’s time to start taking advantage of that progress.

The post Don’t Let Legacy Software Stop You from Adopting the Latest Web Technologies appeared first on Speckyboy Design Magazine.

However, implementing these features can sometimes come at the cost of browser compatibility. For websites that still have a significant number of users with older browsers, or for features that are very new, there’s a risk in leaving some people out.

Philosophically speaking, some designers are fine with this – and that’s OK. But implementing fallbacks for these features may be easier than you think. These failsafe measures offer a reasonable facsimile of a particular layout or design element and are compatible with legacy web browsers.

Today, we’ll show you how to utilize the Modernizr feature detection library for this purpose. Here we go!

What Is Modernizr?

Modernizr is one of those handy tools that web designers have been relying on for years. It’s a library that can be customized to “detect” (in reality, it’s running tests) specific features as a web page loads. From there, it adds CSS classes to the page’s <HTML> element, allowing designers to target their code based on what the library finds.

In our case, we’ll be using it to detect CSS Flexbox. However, it’s also able to look for features related to HTML and JavaScript. For instance, you can use it to determine whether a browser supports HTML5. If not, the available HTML5 shiv script can be used to bring it up to code, so-to-speak.

What’s really nice is that you can customize Modernizr to meet the needs of your project. Their website’s UI will let you pick and choose only the items you want detect. Once you’ve made your selections, click on the “Build” button to generate a custom downloadable package.

Our Build

For our purposes (and to keep things simple), we’re building our Modernizr package to detect Flexbox. We’ll also choose to minify the code and add CSS classes as well.

Step 1: Setting Up the Demo

To demonstrate how this all works will require a couple of files – both available on GitHub:

• flexgrid.css – This is our simple CSS Flexbox grid system. You’ll notice it has classes for different alignments and column widths. In addition, there are a special set of .no-flexbox classes that use old school CSS floats as well. This will help us create a similar layout style in legacy browsers.
• modernizr-custom.js – The aforementioned script will detect whether or not CSS Flexbox is supported by the current browser.

Next, we’ll want to create a new HTML document that calls both of the above files in the <head> area. In addition, the document will need an example CSS Flexbox layout and some content.

You can feel free to use the demo file below for experimentation. It contains a simple 3-column layout, along with some minor visual enhancements (more on that in a bit).

Step 2: View the HTML Document in a Modern Browser

Now it’s time to see how our demo looks in a browser. To start, let’s use a modern web browser that supports Flexbox.

At least, we suspect that it supports Flexbox. How can we tell for sure? That’s what Modernizr is here to do.

In our case, we’ll want to look at our demo page’s source, specifically the <HTML> element. If there is a class of flexbox added to the element, we know our browser supports the feature. Go ahead and view the page source in your browser – we’ll wait.

Where’s the Class?

If you tried to view the full source of the page, you may have noticed that the <HTML> element doesn’t contain a class. Don’t worry – this is normal.

That’s because the class is added at runtime, after Modernizr tests for the selected feature. Therefore, it won’t show up in the full source code.

Use Your Browser’s Developer Tools

Instead, open up your web browser’s developer tools (hit the F12 button on your keyboard). That will provide an accurate look at the <HTML> element.

Here, we’re using the latest version of Firefox Developer Edition. According to Modernizr, it supports CSS Flexbox. Yay!

Step 3: Test the CSS Fallback in a Legacy Browser

Everything’s looking pretty great in our modern browser. But how about legacy software?

Our styles are set to use CSS floats in browsers that don’t support Flexbox. That fallback should allow us to create a multicolumn layout, even on ancient setups.

According to Can I use, Flexbox has partial support as far back as Internet Explorer 10, Firefox 2, Chrome 4 and Safari 3.1. Many years have gone by since these browsers were in wide use. However, IE in particular is still hanging on here and there.

Modernizr can be configured to test for partial support – but it gets messy. It leads to writing more CSS fallbacks that take a number of different situations into account. It’s not very efficient. Therefore, we’re looking for all-or-nothing support in our tests.

Let’s take a look at our demo in IE 10 (via a browser testing service) and see what happens.

Not too shabby. Our third column gets pushed down to the next row, which can be tweaked. But what about Flexbox support?

A quick view of IE’s developer tools shows that our <HTML> element displays a class of no-flexbox. That means Flexbox is not supported here, and the CSS fallback is being utilized.

Fixing the Layout for CSS Floats

Our fallback CSS floats will not cooperate with the visual enhancements we made. The third column is pushed down to a second row, which doesn’t look very nice.

That’s because floats add padding and borders to the column width that we previously set in the stylesheet. Flexbox, on the other hand, can adjust to these items without adding to the overall column width. Hence the difference in the results.

There are a few different things we could do to rectify the situation. We might cut the width of the columns or even shrink the margin between columns. Let’s try cutting the column width from 30.66% to 28.66%.

It worked! Our columns are now happily displayed and reasonably similar to the Flexbox versions. Some spacing differences aside, this is at least usable within an old browser. We could go in and make further changes to get even closer to the original.

Detect Browser Features and Adjust Accordingly

While our demonstration focused on detecting CSS Flexbox, Modernizr can do so much more. It can look for other common features such as HTML Canvas, SVG support, CSS Grid and an array of other useful tidbits.

The idea is that, once you know what a user’s browser is capable of, you can adjust your code to follow suit. This makes adopting newer CSS specifications, for example, a much less worrisome process.

Perhaps you won’t need to use fallbacks in every instance. But it’s nice to know that implementing them is easy to do, with the help of Modernizr.

The post How Modernizr Can Help You Implement CSS Fallbacks appeared first on Speckyboy Design Magazine.

Our daily grind was complicated by shutdowns, kids invading the home office, and clients who needed our help in rapidly changing their business models. Even though many of us were stuck in the house, there was rarely a dull moment.

All of that aside, the year saw many developments that had nothing to do with pandemics or other chaos. New tools were brought to market, our favorite software saw important updates and the community was as creative and helpful as ever. In other words: 2020 had plenty of positives for designers and developers to celebrate.

Let’s take a look back at some important and interesting developments that impacted web designers this past year.

Modern CSS Thrives

While there were no revolutionary changes to CSS in 2020, that doesn’t mean it didn’t have a great year. Quite the contrary.

The language benefitted from the continued steady evolution of web browsers. As modern versions of Chrome, Edge, Firefox and Safari are released, support for newer CSS standards and specs grow.

In practice, this means web designers can adopt new techniques with confidence. CSS Grid layouts, for example, are a much safer bet than they were a few years ago. And while fallbacks are never a bad idea, they may not need to be as drastic.

That’s due to the dwindling number of users for legacy browsers such as Internet Explorer. According to StatCounter Global Stats, usage of IE was down to a measly 1.05% of the market as of October 2020. Compare that with the nearly 2% it captured a year earlier.

Chart courtesy of StatCounter Global Stats

The further IE and other outdated browsers are in the rearview, the easier it will be to bring the latest CSS developments to production websites. This allows the language to better fulfill its vast potential. 2020 was a big step in that direction.

Top CSS Articles for 2020

• Avoiding ‘Wasteful’ CSS in Your Projects
• BEM Methodology In CSS: A Quick Start Guide
• Creating 3D Illustrations with CSS
• How CSS Perspective Works
• How CSS Variables Can Improve Efficiency and Consistency
• LCH colors in CSS: what, why, and how?
• Learn CSS Positioning
• Positioning Text Along a Path with CSS
• Styling Layout Wrappers In CSS
• Visualizing CSS Resets

The Headless CMS Develops Its Niche

The utilization of “headless” or “detached” content management systems has continued to gain momentum. This practice involves employing a CMS (such as WordPress) to feed content to an outside application.

This leads to several interesting possibilities. You might send content out to a mobile application – allowing both your app and website to share the same blog posts. Likewise, you could leverage a static website generator such as GatsbyJS or 11ty to create a super-fast user experience – perfect for heavily-trafficked sites. All while keeping a familiar back end UI for your content creators.

And, although this technology is still relatively young, you can see it starting to take hold. GatsbyJS, for one, has come a long way over the past year. GraphQL, its companion query language, is steadily maturing. It aims to be both efficient and high-performing.

Besides, a number of tools are being built to streamline the process of creating a headless configuration. This is vital, as it is not currently a beginner-friendly task. The easier this all becomes, the more widespread and creative its usage will be.

For now, headless CMS configurations are being deployed more and more. Still, unless you’re an expert, diving in head-first and adopting this technology for client projects may not be wise.

Therefore, it’s probably best to start small and experiment. Once you are on solid ground, going headless could be a great solution.

Top Headless CMS Articles for 2020

• An Honest Review of Gatsby
• Building a Headless WordPress Website with GatsbyJS
• Building Serverless Front-End Applications Using Google Cloud Platform
• Don’t Build a Frankenstein Website!
• Going Jamstack with React, Serverless, and Airtable
• Headless CMS: What and Why
• How to Begin Your Journey Developing Headless WordPress Sites
• How To Create A Headless WordPress Site On The JAMstack
• Powering React Native Applications with ButterCMS Headless Engine
• When Does Using Headless WordPress Make Sense?

Prototyping Tools Improve and Evolve

The way we build website and mobile application prototypes continues to change. Many designers are eschewing traditional tools like Photoshop in favor of niche apps like Adobe XD, Figma, and Sketch.

Each of these tools has been built with web and mobile applications in mind. Therefore, designers don’t have to settle for passing along static mockup images to clients. Rather, they can create something fully-interactive that better represents what the final product will do.

Of course, the tools themselves are not new – they’ve been on the market for several years. But in 2020 the argument for using any of these apps has become more compelling.

For one, each has robust developer communities that release helpful goodies such as plugins and UI kits. They help designers extend functionality and increase efficiency. And the apps themselves have released some exciting features, along with smoothing out rough edges.

However, another feature of prototyping apps also became very important: their built-in collaboration tools. They facilitate remote feedback from both clients and team members. With so many of us working from home this year, anything that makes the review process easier is a massive bonus.

Top Prototyping Tool Articles for 2020

• 10 Tutorials to Help You Master Adobe XD
• 20 Free Adobe XD UI Kits for Web & Mobile App Designers
• 20 Free Mobile UI & Wireframe Kits for Sketch App
• 35 Free Web & Mobile UI Templates for Figma
• Adobe XD Has a New Look
• Design To Engineering Handoff
• Gradient angles in CSS, Figma & Sketch
• How to Turbocharge Your Components with Figma Variants
• Part of your World: Why We’re Proud to Build a Truly Native Mac App (Sketch)
• Sketch vs. Figma vs. Adobe XD: Which Design Tool Is Best for Beginners?

The WordPress Gutenberg Block Editor Becomes More Polished

December 2020 marked the Gutenberg block editor’s second birthday. But, unlike most 2-year-olds, it seems like the fits and tantrums are (mostly) a thing of the past. Gutenberg is becoming quite mature for its age.

Looking at the editor’s UI, it’s lightyears ahead of where it was back at the beginning. A lot of development time went into making the interface more intuitive. Getting around is much easier, as is finding and selecting individual blocks.

Accessibility was also a big focus. This particular subject is important in all areas of web development but was also a major criticism of earlier versions of Gutenberg. So, improving both the UI and making it more accessible are big wins for 2020.

The year also saw the introduction of custom block patterns, which make it easier to use and reuse a specific layout. The ability to implement a custom layout anywhere it’s needed is no small achievement. This was one of the missing features that made the block editor a difficult sell for some use cases.

And, while not ready for prime time just yet, Gutenberg-powered full site editing (FSE) is in the works. This will enable users with a compatible theme to edit all aspects of their website through the block editor. The first such theme, Q, was made available for download earlier this year.

All told, WordPress now has a default editing experience that can be seriously considered for just about any project. There are still some advantages to page builders – not to mention the old Classic Editor. But blocks are catching on.

Top WordPress Gutenberg Block Editor Articles for 2020

• Block Navigation Plugin Provides Missing Context-Based Outline for the WordPress Editor
• Create a Custom Color Palette for the WordPress Gutenberg Editor
• Getting the WordPress Block Editor to Look Like the Front End Design
• How to Bulk Convert Classic Blocks to Gutenberg in WordPress
• How to Create a Simple Gutenberg Block Pattern in WordPress
• How to Use the WordPress Gutenberg Cover Block
• Matt Mullenweg and Matías Ventura Demo New Image Editing Tools Coming to Gutenberg
• Styling Wide and Full-Width Gutenberg Blocks in WordPress
• Tips for Converting an Existing WordPress Website to Use the Gutenberg Block Editor
• What is Full Site Editing and how is it shaping a new WordPress?

In 2020, the Focus Was on the Bigger Picture

One thing you may notice about the items above is that they all involve evolutionary change. Nothing here appeared to be a watershed moment for web designers. In fact, posing this subject on Twitter didn’t result in any earth-shattering recommendations either.

Maybe that makes for less-than-compelling headlines. Yet it also means that, in a chaotic year, there was a comforting consistency for the web design industry. The tools and technologies we already use just got better. Nothing to complain about there.

When we look back years from now, a lot of historic events will stand out from 2020. But web designers may see it as a time that set the table for bigger things yet to come.

The post 2020 Web Design Year in Review appeared first on Speckyboy Design Magazine.