Browsed by
Category: Awesome Dev Tips and Tools

What’s CSS Grid and Why Should You Care?

What’s CSS Grid and Why Should You Care?

Photo by Patrick Hendry on Unsplash

CSS Grid Layout, now supported in all major browsers, is rapidly becoming an essential tool in the front-end developer’s kit. So let’s take a good look at what this emerging framework is, how people use it, how it differs from other frameworks and how it’s bound to change the design landscape for good.

What is CSS Grid?

The CSS Grid Layout is the newest and most advanced CSS layout framework. The defining characteristic of CSS Grid is that it is inherently two-dimensional, while standard CSS layouts are only one-dimensional. Breaking out of the 1D limitation opens a world of possibility for designers that will take years to explore fully. Meanwhile, for many designers, CSS Grid is the long-awaited solution to the problem of designing highly sophisticated responsive page layouts in HTML and CSS without resorting to ad-hoc solutions that almost feel like hacks, often involving loads of JavaScript, PHP and more.

How you can use it

As designers use CSS Grid Layout in more projects every month, the new framework is rapidly going mainstream. As of Fall 2017, it’s already a safe bet to use CSS Grid for a significant fraction of your front-end projects, especially if the project is long-term. If you’re looking for great examples and templates to give you some inspiration, there’s no better place to start than Grid by Example, put together by Rachel Andrew, the brilliant designer responsible for most of the code in CSS Grid.

Difference from Bootstrap and Flexbox

For many designers, Bootstrap and Flexbox have been the solution of choice when facing the challenge of building responsive layouts, given the limitations of HTML and standard CSS.

CSS Grid vs. Bootstrap

Because of Bootstrap’s status as the leading grid framework, many designers are comparing it to the web-native newcomer: CSS Grid. Although Bootstrap doesn’t suffer from some of the backward-compatible concerns of the still-emerging CSS Grid Layout, it’s widely believed that CSS Grid is the future of layout design all the same. Not only is CSS Grid perfectly capable of reproducing nearly any layout built with Bootstrap, it often does it in a more efficient, elegant and open-ended fashion.

CSS Grid vs. Flexbox

Many CSS experts hold the position that CSS Grid Layout and Flexbox are complementary solutions that designers can and should use together. CSS Grid is at its best when building an overall 2D layout, addressing both rows and columns at any level of complexity. Flexbox, in turn, works well for 1D fine-tuning within the overall 2D layout to align and position the smaller pieces of content concerning a single row or column.

How CSS Grid is changing the design landscape

Now that it’s possible to efficiently and elegantly design highly responsive sites from directly within a 2D CSS framework, the bar for building responsive sites has is dramatically lower. We are likely entering an era in which highly responsive sites reach ubiquity almost immediately, and designers begin exploring far more sophisticated layouts that will redefine the notion of responsive altogether.

Lingering challenges

Like every emerging design solution, even one on its way to becoming the new standard, the CSS Grid Layout does face a few stubborn obstacles that may prevent it from becoming the most favored solution for at least a few more months. The most notable issue is browser-compatibility. Although CSS Grid is now compatible with the latest versions of all the key browsers (with the last major holdout Microsoft Edge finally announcing compatibility this month) millions of people still use old versions of browsers, and there are always situations, such as corporate legacy systems, that could raise justifiable concerns. Some have suggested that the answer is to have your CSS Grid-based layout automatically serve up the mobile version of your site in such situations. However, if this (or any other smart workaround) won’t work for you or your clients, then you might want to wait a few months before making CSS Grid your default design solution. All the same, it’s time to learn this emerging framework inside and out, as it’s only a matter of time before CSS Grid plays a big part in your design decisions.

The importance of a new dimension

The CSS Grid Layout is quickly catching on, and forward-thinking designers are beating the drum and singing its praises. This wouldn’t be happening if it wasn’t the case that the extra dimension provided by CSS Grid is far more than a responsive-layout expedient. Rather, it’s a vehicle for a more natural and elegant approach to layouts as a whole.

Wanna nerd out on design and dev? Hit. Us. Up.

Smoothing the Handoff from Design to Dev

Smoothing the Handoff from Design to Dev

Photo by Charles Deluvio on Unsplash

One of the most critical stages in the process of creating a website, feature or app is the handoff from design to development. If the design team fails to prepare for the handoff correctly, much of the beauty and efficiency of their design can get lost in translation. So let’s take a good look at a few best practices to ensure that developers have everything they need to build what the designers have envisioned.

Use apps to help with the handoff

Here are a few apps that help with one or more aspects of the design-to-dev transition:

Lingo

You might want to consider moving your image files out of their numerous independent folders, where they can get lost, and into Lingo. With this visual library app, you can search, track, organize, browse and above all share your visual assets more efficiently.

InVision’s Inspect

If you’re building a mobile app, Inspect will help you achieve a “pixel-perfect” design handoff for both iOS and Android.

Sympli

This design-handoff tool has plugins for both Sketch and Photoshop. Once enabled, the Sympli plugin will automatically create specs, style guides and visual assets for you to share with the dev team. Sympli also has plugins for Android Studio and Xcode, as well as a standalone web app.

Zeplin

Zeplin is a design sharing tool that streamlines the entire design handoff process. The design teams at Slack, MailChimp, Pinterest, Starbucks and Shopify (just to name a few) all use Zeplin.

Use a version control system

When we think of version control systems, we think of developers and Git. However, version control systems work wonders for designers as well. While designers can also take advantage of Git for their versioning, there are some dedicated design versioning tools, such as the widely used Folio. Whichever versioning platform you choose, don’t skip this key preparatory piece of the design handoff.

Only share the intended design

In the course of creating a site, feature, page or app, you’re bound to try out a slew of alternative approaches. It’s tempting to include those files with the handoff. At the very least, it shows how much thought you’ve put into the process. However, including all those extra files can draw attention away from the intended design and confuse the development team. So unless you’re undecided about the design and specifically want to offer the development team selections to choose from, then it’s best to leave the alternatives and earlier versions out.

Don’t forget secondary pages and screens

Without a meticulous handoff checklist and protocol, the handoff process will certainly have at least a few missing files. These generally won’t be pages and screens that belong to the primary user flow. Rather, they will be subsequent pages/screens such as the “forgot password” page/screen that it’s easy to overlook. All the same, they still need design treatments, and if they don’t make it into the mix, there will be trouble down the road.

Pay close attention to your copy

Be sure to have all of your copy carefully organized along with your screens. Moreover, the dev team needs to know the precise context, situation or trigger that will call for each piece of copy.

Perfecting the handoff

The design handoff is a critical stage in the process of creating a website, feature or app. If the handoff from design to dev gets flubbed, the end-user will never get to experience how beautiful or awesome the product could have been. Here’s the TL:DR version of your design-to-dev handoff best practices:

  • Use apps, like Zeplin, to help with the handoff
  • Use version control software, such as Folio, to keep all your versions in order
  • Only pass on the intended design, not alternatives and earlier versions
  • Don’t forget to include all secondary pages/screens
  • Pay close attention to the copy, as well as the context where each piece of copy will arise. If you’re able to incorporate all of these best practices into your design-to-dev handoff, you’ll begin to approach the ideal workflow.

 

Not to toot our own horn, but we’ve got the whole design and dev thing pretty locked down. If you’re the maker of a technical product or service, get in touch with us to find out how we can increase your visibility and improve your customers’ overall experience with our bold designs and strategies.