loading...
Cover image for Page layout: full-sized vs boxed

Page layout: full-sized vs boxed

attkinsonjakob profile image Jakob Attkinson ・1 min read

I started working on a personal website. Something like a "presentational" site, but that I'm planning to transform it in much more than that by including a bunch of data from private and public APIs etc. Even blog posts.

While there's a lot of noise about how a page should be designed, I can't seem to be able to decide between a full-size layout or a boxed one.

Full-boxed-layout

My first thought was to go with boxed sized and a nice, faded, background image. However most demo websites and repos on GH that I checked out were going for a full sized pages.

How do you decided between the two and what would you recommend me?

Discussion

markdown guide
 

In my opinion a boxed layout is better, you control the max width of your layout. A full-sized layout need to be boxed on screens over retina screens. Maybe it's cheaper to integrate a layout with a maximum width of 1200px (like bootstrap), your integration will fit in screens having a display of more than 1200px. If you choose full-sized layout you will have to manage displays till retina screens, set max a maximum width etc.

But I think that the real subject is to keep a maximum size in both cases : a typography should never depend a lot of the width of your screen, it could be bad to get a layout with a title of 80px size or more for example. It's the same if you have a display integrated with flex : if you use justify-content: space-between, you need to set a max width on the container. Many other examples can be found.

If your website is responsive, the job is done whatever the display you choose !

 

I like full size because I have the option to go into a box layout and out again. The other way around is a bit harder.

 

I also like boxed more by controlling the max-width.
Also don't forget: mobile first ;D