Jump to content


Photo
- - - - -

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


  • Please log in to reply
8 replies to this topic

#1 Kalo

Kalo

    Forum Newcomer

  • Members
  • Pip
  • 69 posts
  • Gender:Male
  • Location:Southeast UK
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 16 June 2016 - 12:47 PM

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.

 

 



#2 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,326 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 16 June 2016 - 04:05 PM

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, 16 June 2016 - 04:10 PM.


#3 Jack

Jack

    NaN

  • Moderators
  • PipPipPipPipPip
  • 3,079 posts
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 16 June 2016 - 04:16 PM

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.



#4 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,326 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 16 June 2016 - 04:22 PM

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.



#5 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 3,928 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 16 June 2016 - 07:25 PM

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/r.../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, 16 June 2016 - 07:42 PM.


#6 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,326 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 16 June 2016 - 07:48 PM

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.



#7 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 3,928 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 16 June 2016 - 07:52 PM

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.



#8 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,326 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 16 June 2016 - 08:44 PM

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.



#9 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 3,928 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 17 June 2016 - 06:03 AM

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.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users