Look Ma, No Media Queries! Responsive Layouts Using CSS Grid

Not only has CSS Grid reshaped the way we think and build layouts for the web, but it has also contributed to writing more resilient code, replacing “hacky” techniques we’ve used before, and in some cases, killing the need to rely on code for specific resolutions and viewports. What’s so cool about this era in web development is that we’re capable of doing more and more with fewer lines of code.

In this article, we’ll start dipping our toes into the power of CSS Grid by building a couple of common responsive navigation layouts. It’s easier than what you may think, and since CSS Grid was built with responsiveness in mind, it’ll take less code than writing media queries all over the place. Let’s do this!

Layout #1: Hero content and list of articles

See the Pen
Hero Content and List of Articles
by Juan Martín García (@imjuangarcia)
on CodePen.

We’ll kick off this set of examples by creating a common website layout: A full-width hero section, with a grid of cards below.

Both elements will respond to window resizing and adapt accordingly. Though this might seem like a lot of code at first glance, the responsive behavior is done with only six lines of CSS Grid code, and without writing a single @media rule. Let’s break down the code to see what’s going on:

The hero section

Let’s take a look at the code for the .hero element:

<section class="hero"> <h1>You thirsty?</h1> <article> <p>Explore local breweries with just one click and stirred by starlight across the centuries light years great turbulent clouds circumnavigated paroxysm of global death.</p> <a href="#breweries">Browse Breweries</a> </article>
</section>
.hero { /* Photo by mnm.all on Unsplash */ background: url('https://images.unsplash.com/photo-1518176258769-f227c798150e') center; background-size: cover; padding: 4rem 2rem; /* Grid styles */ display: grid; align-items: center; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

We have a bunch of background styles to enable the beer background, a bit of padding to separate the content from the edge of the screen, and then three lines of grid styles:

  1. The first line (display: grid;) is changing the behavior of the .hero element to be a grid container. That means the elements inside .hero are now grid items.
  2. The second line (align-items: center;) is going to vertically center the columns on our grid. But these two lines don’t do anything on their own until we set the columns of our grid.
  3. And that’s where the third line comes in. A lot of stuff is going on in that single property, so let’s go one step at a time.

The repeat() function

Generally speaking, what we usually do to define our columns and rows on a CSS Grid is to add the value for each track after defining the property, like this:

.element { /* This will result on four columns, each one of 1fr */ grid-template-columns: 1fr 1fr 1fr 1fr; /* This will result on two rows, each one of 300px */ grid-template-rows: 300px 300px;
}

Now, that’s quite dull. We can use the repeat() function to make that less verbose and easier to follow. The function takes two parameters:

  1. The number of times to repeat the value.
  2. The value itself.

After refactoring our code to use repeat(), we should expect the same results from these lines of code:

.element { /* this is the same as grid-template-columns: 1fr 1fr 1fr 1fr; */ grid-template-columns: repeat(4, 1fr); /* this is the same as grid-template-rows: 300px 300px; */ grid-template-rows: repeat(2, 300px);
}

Much cleaner, yeah?

The minmax() function

Now, the above examples are explicitly defining sizes for the tracks (1fr and 300px). That might work for some scenarios, but for our beer example here, we need to be able to automatically calculate the size of the track, based on the width of the viewport, and automatically adjust the number of columns shown. To be able to do that, we’ll define a range of values using the minmax() function. What will we be defining? You’ve probably guessed by now: The *minimum* and *maximum* values we want these columns to be able to resize to.

In the hero for our beer example above, we set our minmax() property to be 240px at its minimum size, and 1fr at its maximum size. fr units, if you’ve never heard of them, stand for fractional units. Nobody can explain them better than Jen Simmons on this video and Robin Rendle in this post.

Using the Firefox Grid Inspector to check the change on the track’s size when resizing

That results in our tracks being 1fr when there’s plenty of space on our viewport (aka desktop resolutions), and 240px when there’s not enough space for both columns (like on mobile devices). That’s why they nicely grow when we make our browser wider, since they’re taking the remaining space and equally dividing it across the existing columns. Now, moving to the last piece of the puzzle!

The auto-fit keyword

The auto-fit keyword allows us to wrap our columns into rows when there’s not enough space in our viewport to fit the 240px minimum value without overflowing the content. Sara Soueidan wrote an excellent article about auto-sizing columns using the auto-fill and auto-fit keywords, in case you want to dive a little deeper into what’s going on under the hood. Now, with that last bit of code in place, we should be able to achieve this result:

The column is automatically wrapping when there’s not enough space in the viewport

The article list

Now that we’ve thoroughly reviewed the behavior of the elements inside our hero element, it’s likely that the first two lines of CSS code for the breweries list below it might already seem familiar to you:

.breweries > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-gap: 1rem;
}

That’s right! We’re using the exact same approach: On the first line we define our grid, on the second one we size our tracks using the same magic one-liner, and on the third line we set a gap for these columns. Nothing new under the sun, and what’s really neat about this, is that our code is resilient enough to adjust the number of tracks and their sizes, according to the number of items we have inside our unordered list:

The grid responds to the change in the number of tracks, and adapts the layout

That’s all, folks! A fully responsive website layout, using just six lines of CSS code. Not bad, huh? Make sure you check the source code and play around with this example on CodePen.

Layout #2: Full-width image gallery

See the Pen
Full Width Image Gallery
by Juan Martín García (@imjuangarcia)
on CodePen.

On this next example, we’ll embrace the power of our newly learned combination of repeat(), auto-fit and minmax() to create this responsive image gallery. We’ll also be sizing our tracks using grid-column and grid-row, and learning about the handy property:value combination of grid-auto-flow: dense; that allows us to change the default behavior of the elements that can’t fit on our explicit tracks: Instead of wrapping themselves in new rows or columns, we’ll make them fit into the unused spots on our grid. Let’s get into the coding!

The grid setup

The grid is created using our familiar display: grid; property, where columns are defined using repeat(), auto-fit and minmax(). We also added a bunch rows with a repeat() function and defined a gap to our images, using grid-gap. But the new player here is the grid-auto-flow: dense;. We’ll get to it in a second.

.gallery > .gallery__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); grid-template-rows: repeat(6, 200px); grid-gap: 1rem; grid-auto-flow: dense;
}

We also created a repetition pattern using the nth-child() pseudo-selector to set different sizes for our tracks using grid-column and grid-row. Notice here that we’re using the span keyword to allow the selected item to occupy more than one column or row.

/* This will create 2x images every 4 elements */
.gallery > .gallery__list > li:nth-child(4n) { grid-column: span 2; /* Spans two columns */ grid-row: span 2; /* Spans two rows */
} /* This will create 3x images every 8 elements */
.gallery > .gallery__list > li:nth-child(8n) { grid-column: span 3; grid-row: span 3;
}

And finally, we’ll make sure our images cover the entire area of its container, regardless if it’s 1x, 2x or 3x, using object-fit: cover;. If you have never heard of object-fit, it works fairly similar to how background-image does, but with HTML <img> tags:

.gallery > .gallery__list > li > figure > img { width: 100%; height: 100%; object-fit: cover;
}

Now, the real deal here is grid-auto-flow: dense;. Check what happens when we take that out from our code:

Removing grid-auto-flow: dense; leads to inconsistent placement of the elements on the grid

See those holes on our beautifully crafted grid? That’s because some of the elements on it are taking 2x or 3x spots, and when there isn’t enough space on our tracks to fit them, they’ll wrap into a new row, since that’s the default behavior. By changing it from row to dense, we’re telling the grid to fill any gaps we might have with elements that could fit them, regardless of their source order on the DOM.

That’s why this technique might come especially handy for things like image galleries, but might not be suitable for other use cases where you might need to preserve the order of the markup. Feel free to play around with the CodePen demo to check the differences between where items are placed.

Layout #3: Trello-style card layout

See the Pen
Trello-Style Card Layout
by Juan Martín García (@imjuangarcia)
on CodePen.

Now, on to the last demo, where we’ll take advantage of the ability to nest grids to recreate this Trello Board. We’ll be creating a grid to hold our four different columns, and inside of those, we’ll create a child grid for our cards. Even though this example won’t explore new properties or revolutionary methods, it’ll help us to get a grasp on how easy it is to build complex layouts with a few lines of CSS code. This demo has a lot of extra code to achieve the styling of the Trello layout, so we’ll focus solely on the grid styles.

The columns

To create the four columns, we’ll use display: grid; on the container and use our magical one-liner for our grid-template-columns. We’ll also be defining a gap between them, and use align-items: flex-start; to ensure that our columns don’t stretch to the bottom of the screen.

.column__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-gap: .5rem; align-items: flex-start;
}

Now, the original Trello is not responsive by default: If you resize your browser on a Trello Board, you’ll notice that you’ll end up having a horizontal scroll on your columns, rather than wrapping them on a new row. We’re not following that behavior here since we want to build responsive layouts, but in case you’re curious, and want to emulate Trello’s functionality, you can achieve that by adding two more lines of CSS code:

.column__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-gap: .5rem; align-items: flex-start; /* Uncomment these lines if you want to have the standard Trello behavior instead of the column wrapping */ grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr);
}

We learned about grid-auto-flow in our previous demo and discovered that it let us control how the auto-placement algorithm work, and how implicit elements should be added in the flow of the grid. The default behavior is row, meaning that any extra element that won’t fit on our grid will wrap into a new line. We changed that to be dense on our previous demo, and we’ll change it to be column on this one: That way, any new column added here will end up in an implicit column, and have a horizontal scroll. We’ll also define a width for those auto-generated columns with the grid-auto-columns property.

Modifying the grid-auto-flow property will make this demo behave like the real-world Trello

The cards

For the cards grid, we’ll use a similar approach. We’ll display: grid; on the container. We won’t define any columns here, since we don’t want to have any, and we’ll put grid-template-rows: auto; to use to avoid all cards having the same height — we want some of them to be bigger and some of them smaller, based on the type of content being added to them.

.card__list { display: grid; grid-template-rows: auto; grid-gap: .5rem; margin: .5rem 0;
}

And, again, that’s all folks! Two more lines to set a gap and a margin to the cards, and we’re done! Everything else in the Pen is standard CSS to achieve the Trello look and feel.

So then… are media queries dead?

Back in the day, when we were building layouts using display: inline-block or floats, media queries made a lot of sense in order to change the size of our elements as the viewport got smaller. But now, with the incredibly powerful layouts that we’re able to create with a couple of CSS lines, you might feel tempted to think that media queries are doomed. I strongly disagree with that: I believe that we should change the way we think about them, and therefore use them differently.

As Rachel Andrew stated about a year ago, we should use media queries to fix our layout when it breaks, rather than targeting devices: There are so many out there! With the advent of Media Queries Level 4 and 5, we’re not only able to detect screen sizes now, but pointer types as well. As a result, we can dig into a user’s system preferences and adapt our code for those who prefer reduced motion or whether we should use inverted colors. That means media queries are not dead; on the flipside, I’d say it’s an exciting time for using media queries, but we need to learn to use them right. In the meantime, building robust layouts using modern techniques such as Flexbox or CSS Grid, will save you a bunch of time, code, and headaches.

The post Look Ma, No Media Queries! Responsive Layouts Using CSS Grid appeared first on CSS-Tricks.

5 Ways Web Design Impacts Customer Experience

Impact Your Customer Experience

5 Important Aspects of Design

Web design is one of the most important parts of any Internet marketing strategy.

It has a huge impact on the digital customer experience in several different ways. Your site’s aesthetics, usability, and other crucial factors are essential to your company’s long-term online success.

But how dramatically does it actually impact your bottom line?

In this post, we’ll take a look at five major aspect of web design and how you can improve all of them.


1. Appearance

Web design most obviously impacts your site’s appearance. You choose how your site looks, which plays a huge role in your company’s first impression on new online visitors.

Often, you’ll hear marketing experts (including us) talk about web design in two extremes:

  • Older websites that look like they were made in 1996

  • Newer, sleeker websites that adhere to modern web design standards

Many websites fall between those two options, but they represent opposite ends of a spectrum.

It’s possible to have a site somewhere in the middle — one that looks attractive, but maybe it was last updated in 2007.

Regardless of how your site looks, the goal is to have it as current and up-to-date with modern design trends as you can.

Modern web design trends include:

  • Responsive design

  • Parallax scrolling

  • Big, bold fonts

  • Eye-catching “hero” images

  • Multimedia

Responsive design means using code on your website that makes it look and function the same, regardless of the device someone uses to access it.

So whether someone comes to your site from a smartphone or a desktop computer, they’ll get a great experience and find the information they want.

Parallax scrolling means overlaying two visual elements on a page and moving them at different speeds as someone scrolls.

Then, when someone looks through a page on your site, they’ll get a cutting-edge visual experience that keeps them engaged and reading.

Big, bold fonts have been in vogue for a few years now. Essentially, the concept refers to using sans-serif typefaces that are easy to read on screens.

That makes your customer experience smoother, and it lets your readers get the most value out of every sentence on your site.

Eye-catching “hero” images are giant, full-width graphics at the top of articles that give you a summarizing visual representation of the text below.

They got the name “hero” because these images champion the article with which they’re associated. They’re great for generating clicks for social media, and they’re ideal introductions to concepts on your site.

Last, multimedia refers to images, videos, interactives, and other visual elements that help break up text and educate your visitors.

Multimedia is fair game for just about any page on your site from a blog post to a 100-page downloadable guide.

When you include it, you make your content much more scannable, engaging, and enjoyable for readers.

But this all has to do with your site’s appearance. Web design impacts a lot more than just how a website looks.


2. Professionalism

Professionalism refers to the impression you make on your site’s visitors before they ever start reading your site.

When someone arrives on your site, you want them to understand that you’re a modern, respectable business. This impression is largely based on how your web design represents you.

Several web design elements contribute to professionalism, including:

  • A culture page

  • Photos of staff

  • Customer results

A culture page is part of your site that’s exclusively dedicated to talking about your company’s approach to daily operations.

Do you have certain values at your company? Do you maintain certain traditions? Do you celebrate anything unique?

These are all great additions to a culture page since they show what your company does besides work. Even your customers will be interested to see that your employees are happy.

Speaking of employee happiness, photos of staff can also go a long way in reinforcing professionalism.

Whether you choose to show them together at a happy hour or hard at work is up to you. Either way, you’re adding faces to your business that shows visitors you’re more than a brand name — you’re a thriving company.

Last, you can showcase customer results. If you can quantify your work in any way — even if it’s how many air conditioners you repaired last year — you can highlight that information on your site.

This demonstrates professionalism because it shows that you have your customers in mind, even those who haven’t converted yet.

Visitors who see that will understand that you’re a customer-focused business that values itself in terms of what you can deliver.

Still, professionalism needs another element that web design can offer — and it’s essential no matter what kind of business you own.


3. Clarity

Clarity means designing your website so visitors can find what they want as quickly as possible. This is often an overlooked way to vastly improve the visitor’s experience.

Most often, this means improving your navigation. Intuitive and familiar navigation styles allow your visitors to quickly find the information they want.

Today, navigation comes in a few well-known styles:

  • Breadcrumb

  • Drop-down menu

Breadcrumb navigation is inspired by the story of Hansel & Gretel.

Whenever someone clicks to a new page, your site automatically adds their previous page to a navigation bar. Then, a user can click back to that page in an instant if they want.

A drop-down menu lets someone hover their cursor over a menu title and see the pages that category contains.

Then, they can click on the page that interests them to get the information they want.

These navigation strategies can work together, too. Your homepage can use drop-down menus, and once someone clicks to a new page, you can use breadcrumb navigation on that page to let users go back to where they were.

Naturally, you have lots of other options for navigation. But these are the two most popular and useful in the web design world.


4. Load time

Load time refers to how long someone has to wait for a page on your site to display on their device(s).

Load time is a major Google ranking factor, and it’s become crucial to online success as more consumers move toward using the Internet on mobile devices.

The modern Internet user is concerned with websites that load in the blink of an eye and — more importantly — use minimal data.

So how can you reduce your site’s loading time?

  • Optimize image sizes

  • Remove auto-play multimedia

  • Use white space

First, you can optimize image sizes on your website to make sure your site loads as quickly as possible.

To do that, use .jpg files for your images. This is the best way to show high-resolution photos or graphics while minimizing the size of the file.

Next, you should remove auto-play multimedia like video and audio.

That means your users won’t use big chunks of their mobile data when they go to your site on their smartphones.

Plus, auto-play multimedia is an irritating way to promote content anyway. Most users will leave your page if they get there and there’s automatically a video in their face.

Instead, make your multimedia require manual activation on every page.

Last, you can use white space more frequently to reduce data demand.

White space is any unused space on your pages. No text, no images, no videos — nothing.

White space spreads out your text and elements to make them easier to see, especially for mobile users.

This makes it easier for visitors to understand everything on a page so they don’t have to re-read content.

In a nutshell, that makes white space work on two levels. It helps your pages load in a flash and it makes them more readable.

Overall, that makes web design crucial to the speed of your site. You can also use these strategies together to help your individual pages load as quickly as possible.


5. Conversions

Conversions are arguably the most important part of web design.

After all, your business won’t thrive online without them.

Web design can impact conversions in a thousand different ways, and they’re all important, but these three are some of the most impactful:

  • Color

  • KISS principle

  • Faces

Color sounds general, but in web design, it refers to a color scheme that intelligently uses contrast to highlight selling propositions.

So if your site uses a cool color scheme, use warm colors like red or yellow for your calls to action. That helps them stand out so people can find them more easily and convert.

The KISS principle is an acronym for “Keep It Simple, Stupid.”

The idea is that simpler designs are better designs. When you have an easy-to-follow, organized website, you make it that much easier for visitors to convert.

You don’t need loud backgrounds or showy graphics to sell your company online — it’s actually better to stay simple.

Last, faces may sound a little odd as a web design principle. But the idea is that human faces help visitors relate to your business.

You could use stock images, but this works best when you use your own staff.

Essentially, you show someone the human side of your company to make them feel more comfortable contacting you.

It may not sound like much, but that goes a long way in establishing trust, fostering a positive relationship, and eventually earning a new customer.

By using all three of these concepts at once, you make your site much more efficient at earning new customers.


How does your site’s design impact customer experience?

Do you know of any other ways to improve visitors’ experience on your site with web design?

Let us know!

Responsive Web Design
Responsive Web Design
Unify Your Experience

When thinking about getting a redesign for your website or having a brand new site created, have you thought about the way it will look across all devices?

Responsive web design tends to be overlooked by businesses when planning a new site. With new technology comes new screen sizes and greater probability that your website may not appear as you want it to across the board. Whether your viewer is using the newest high resolution retina display iPad or an old phone, you want your website to display clearly so your brand message can be perceived appropriately.

Unify Your Website’s Experience on All Platforms

Responsive web design is the idea of designing and developing a website with flexible layouts that adapt to each user’s device. Websites with responsive design will adapt and display on any device or screen size, making for an enjoyable experience for your viewers.

With responsive design, you pay for one build and get a custom website that not only looks great on desktops, but also netbooks, laptops, tablets, and smartphones. A responsive design is also prepared for the next big piece of technology that comes out, no matter what its screen resolution is.

Responsive designs for your website allow you to not have to create a custom site for each and every device out there. Devices may be in landscape while others are in portrait and some could even be just completely square. With most smartphones, you are also able to change your screen from being portrait to landscape at the flip of the device. One design is not able to handle all of that, unless it is a responsive design.

PixelForge is an Experienced Responsive Web Design Company

A responsive design site consists of a combination of flexible grids and layouts, along with images and strategically created CSS media queries. PixelForge has a team of experienced responsive web designers that know the best ways to create your website to display beautifully on screens of every size.

Our team stays current with all the responsive design best practices, and is constantly reading and learning about new ways to achieve the perfect kind of design for responsive and mobile sites. Our experience and knowledge helps keep our responsive web design cost low, since you won’t need to pay for any research, experimentation, or trial development. We can create amazing responsive sites right away, with no “trial and error” required.

An Example of Responsive Web Design by PixelForge

One example of the responsive design services that we have offered to clients can be seen for Manitoba Clinic. The Clinic needed a responsive design that could properly display its services, operating hours, and other relevant information to visitors on all devices.

The completed website makes it very easy for visitors to view the Clinic’s services or make contact from any device, no matter the size. The viewing experience is also very consistent, so if someone first accesses it from a laptop, then checks it again on their phone, they will have a very good idea of how to find the same information again. This seamless experience is one very big perk of responsive design for websites.

To see more responsive websites that we have designed for clients, refer to our portfolio.

Choose PixelForge for Your Web Design Project

PixelForge is a responsive web design agency with a specialized interactive team that will provide you with the complex design and development skills that are needed to make your website shine. As a full service Internet marketing company, we can help you create a website that renders properly on devices of every size, attracts more visitors, and results in higher conversions for your business. Contact us today to get a custom quote for our responsive web design service.


Curious about the cost of responsive design or how it can help you boost conversions? Contact us to get a custom quote for your own responsive web design project.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google