Jump to content
Sign in to follow this  
Kalo

Laying It Out: A Practical Approach to Grid Systems for Your Website

Recommended Posts

Hey guys,

 

We put together a thorough guide on layouts and grids It's appropriate for both beginners and more advanced web designers.

 

Check it out here and let me know if this was helpful.

 

better-layout.png

 

 

 

Layout is the scary bit of design. It’s coming face to face with the dreaded blank canvas, where you have to start putting words and images on your website… and make it look good.

The prospect of getting started is often enough to give you a new found passion for weeding the garden or reminding you that yes, you absolutely must start going to the gym – right now. But it doesn’t have to be that daunting.

So put away your gym shoes for another day and let’s look at how to start laying out your website with this practical grids and layout guide.

 

Share this post


Link to post
Share on other sites

It misses out on the whole responsive site of things. The preponderance of mobile browsing now means a site should (maybe) be designed for mobile first and also consider both landscape and portrait orientation. Using a grid for layout often results in an awful UX on small screens.

 

Try reading the blog post on a phone in landscape. The actual article is squeezed up on the left and the whole bottom of the page is taken up with the SM bar. And the styling isn't quite right - line spacing, borders, paragraph margins and even the font size.

Edited by fisicx

Share this post


Link to post
Share on other sites

Using a grid for layout often results in an awful UX on small screens.

A grid shouldn't make any difference. It's all about how you choose to display that content on smaller screens. Most grids will collapse to 100% width elements at that point.

Share this post


Link to post
Share on other sites

A grid shouldn't make any difference. It's all about how you choose to display that content on smaller screens. Most grids will collapse to 100% width elements at that point.

And that's often the problem. Suppose you have a 4 content blocks across the screen. Ideally when viewed on a small screen they should reduce in size so you get two rows of two. Or a product category displays a row of 4 on a large screen reducing to 3 and then 2 on smaller screens. Which is why a good place to start with layouts is the small screen then scale up through tablets to desktops. Grid systems don't tend to give you this flexibility.

 

I also take issue in the article about the boring layout. Sometimes boring is good. If I'm reading an article on Brexit I want easy to read content without lots of layout changes.

Share this post


Link to post
Share on other sites

And that's often the problem. Suppose you have a 4 content blocks across the screen. Ideally when viewed on a small screen they should reduce in size so you get two rows of two. Or a product category displays a row of 4 on a large screen reducing to 3 and then 2 on smaller screens. Which is why a good place to start with layouts is the small screen then scale up through tablets to desktops. Grid systems don't tend to give you this flexibility.

 

I also take issue in the article about the boring layout. Sometimes boring is good. If I'm reading an article on Brexit I want easy to read content without lots of layout changes.

 

Having developed many grid systems including the one I released for open source i think I'm well qualified to say that this statement about grids not giving this 'flexibility' is absolute nonsense. All responsive grids do give that flexibility, that is what their primary purpose is. Based on your earlier post I don't think you have a very thorough understanding of how to properly construct or use an existing responsive grid system. Please don't dismiss ideas on concepts without the proper prior research.

 

However, developers should also stop thinking in columns and instead think in terms of fractions instead, it's allows for greater flexibility, like Bootstraps famous 12 column grid, what happens when you want five boxes across? You can't unless you build your own.

Mine makes use of fractional based classes and responsive suffixes for concise yet intuitive classnames https://github.com/rbrtsmith/rbrtsmith-grid

 

Also bear in mind that you shouldn't think like 'mobile should have 2, tablet 4' etc... it all depends on what you are displaying and how you intend the user to interact with it. If you're displaying a grid of Instagram thumbnails then even on the smallest viewports you might want 1/3 or even 1/4 width items, maybe a grid of product cards for a store requires 1/2 width items on the smallest viewports. We should stop making these hard and fast rules and constraints. It's really not that difficult to figure out what works and what doesn't at a given viewport size for that particular component.

 

Finally creative layouts can still be easy to read, it just boils down to how talented the designer and developer are at combining great design and UX. Many focus heavily on design and totally miss the point of UX, which in my opinion is the more important of the two. I'd argue for a 60/40 ratio for UX Vs design.

Edited by rbrtsmith

Share this post


Link to post
Share on other sites

I was trying to find the link to your grid abut failed....

 

My post was a bit hastily written and was really referring to the columns grid discussed in the article. It focused very much on a desktop layout and didn't consider they layout on everything else. As you say every layout is different and my example 4,3,2 for different screen resolution was just an example. There are a whole load of website (probably hundreds of them) built around a bootstrap that are quite frankly rubbish. And most of them use an off the shelf wordpress theme that delivers a poor layout on anything other than a desktop.

 

So yes, I agree with everything you say.

Share this post


Link to post
Share on other sites

I was trying to find the link to your grid abut failed....

 

My post was a bit hastily written and was really referring to the columns grid discussed in the article. It focused very much on a desktop layout and didn't consider they layout on everything else. As you say every layout is different and my example 4,3,2 for different screen resolution was just an example. There are a whole load of website (probably hundreds of them) built around a bootstrap that are quite frankly rubbish. And most of them use an off the shelf wordpress theme that delivers a poor layout on anything other than a desktop.

 

So yes, I agree with everything you say.

 

The link I posed works fine - it points directly to my repository.

Share this post


Link to post
Share on other sites

No, what I meant was I couldn't find the link earlier when I first posted. I wanted to show how to do layouts properly. I'm already using it on two projects.

Share this post


Link to post
Share on other sites

No, what I meant was I couldn't find the link earlier when I first posted. I wanted to show how to do layouts properly. I'm already using it on two projects.

 

How are you finding it?

 

To be fair the article initially posted is better than most. My advise for layouts is that there isn't just one way of doing things, all of the CSS features are useful depending on what you want to do: Floats, inline-blocks, display-table, flexbox, positioning. It's knowing what to use and when, which means learning how all of them work in detail and then lots and lots of practice.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,553
    • Most Online
      4,970

    Newest Member
    Skilton06
    Joined
  • Forum Statistics

    • Total Topics
      65,740
    • Total Posts
      455,352
×