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.

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.

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.

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.

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.

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.

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.

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.