How do you layout ?

[pwired]

How do you guys layout your webpages ?

What I do is setting up 4 or 5 blocks positioned relative and stacked upon each other.

Inside the blocks I put elements like text, pics, searchbars, navigation, body, footer

etc. but positioned absolute.

I use css to stack all blocks on top of each other by giving each block a 5 pixels higher top.

So block 1 gets top: 0px;

block 2 gets a top: 5px;

block 3 gets a top: 10px;

CSS

#container_header {
position:relative;
left: 5px;
top: 0px;
width:970px;
height:140px;
border:2px solid gray;
}

#container_menu {
position:relative;
left: 5px;
top: 5px;
width:970px;
height:285px;
border:2px solid gray;
}

Each block has a border so I can see where the block is during development.

When the page is ready I set border to 0px so the outline disappears.

When I need to see the blocks again I simply give border a value and color.

All blocks have the same off-set to the left of the page and the same width.

The height can differ per block.

When a block needs more height, the underlaying blocks move along down automatically

because of the use relative positioning for the blocks.

For example these four blocks positioned relative and stacked upon each other:

<div id="container_header">
Stuff goes here positioned absolute for example logo and rotating banner
</div>

<div id="container_menu">
Stuff goes here positioned absolute for example a top navigation menu
</div>
 

<div id="container_body

Stuff goes here positioned absolute for the body

</div>

<div id="container_footer
Stuff goes here positioned absolute for the footer
</div>

I guess not all of us here are using responsive webpage design everytime, so how are you guys laying out your webpages otherwise ?

[yellowled]

I always try to avoid absolute or relative positioning unless I actually need it. That's not a judgement, it's just that in my experience, it usually opens Pandora's layout box. I also actually do (almost) every project responsively these days, or at least have it prepared to become responsive. So it's usually a flexible layout using percentage widths and floats or a flexible grid system. Also, I almost always use a mobile-first approach, which means I start with a “non-layout” and work my way up. Simply works better for me with responsive design.

[pwired]

Thanks yellowled. Thing is that I am getting better and better in processwire's api and controllers but am still stuck in the positioning relative and absolute design. I have read about flexible's grid system and responsive design. Is it difficult ? Would you know a good place to start ?

[kongondo]

PWired,

This article at A List Apart is a must read if you haven't seen it and are interested in responsive design.

I wouldn't say responsive design is "hard". It's about being consistent and sensible . I am a firm believer of not re-inventing the wheel. For instance, no matter how good I was at coding (which am not, hehe), I wouldn't bother coding a PHP application to do what PW did because it's already doing all that I want and does it well. So I use the existing tool. This is not to discourage anyone from coding their own app. One should do so if there is a particular need not being met, IMHO. What am I saying? There's already dozens of HTML and CSS frameworks out there that do responsive design out of the box such as Bootstrap and Foundation. I love Foundation and it is what I use. I don't care about floats and DIVs misbehaving because Foundation takes care of that for me. Of course we might get into the argument about some frameworks using non-semantic classes, but I think at times that argument just gets in the way. Besides, leading frameworks now take such matters into account. These things have been tested with screen readers and perform really well. Just Google the subject. In a similar vein, in PW, most of the time I don't care about sql queries since PW takes care of that for me. I would suggest to find a good framework and use it. Of course you don't have to use all the bells and whistles it comes with. Download a custom build, the bare necessities and code away. 

So, no, it doesn't have to be hard. And you can still learn the basics of responsive design even as you use a framework. It's all about ems, %s and @media queries in CSS3 really

These may be of interest...

1. Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained | Design Shack
2. Fluid Images — Unstoppable Robot Ninja
3. css3-mediaqueries-js - css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library) - Google Project Hosting
4. Beginner’s Guide to Responsive Web Design - Treehouse Blog
5. What The Heck Is Responsive Web Design?
6. Responsive Web Design Patterns | This Is Responsive
7. Responsive Web Design: What It Is and How To Use It | Smashing Coding
8. How to Design a Mobile Responsive Website - UX Booth | UX Booth
9. Media Queries for Standard Devices | CSS-Tricks
10. 37 Responsive CSS Frameworks Every Developer Should See | Web Design Principles
11. A List Apart: Articles: Responsive Images: How they Almost Worked and What We Need

Edit:

Difference between responsive, adaptive and fluid

http://teamtreehouse.com/library/websites/build-a-responsive-website/introduction-to-responsive-web-design/fixed-fluid-adaptive-and-responsive

Edit 2: Forgot to add - of course you'll still have your custom CSS file called after your framework's CSS to have the final say on styling particular elements. But you knew this already

[onjegolders]

That was a great answer by kongondo.

My answer. Responsive design is not harder than non-responive, in fact it's a great deal simpler.

Of course not everything has to be responsive but using a framework (like Foundation, which I much prefer to Bootstrap) gives you piece of mind in terms of how browsers behave plus it's just easier not having to worry about exact dimensions and floats when you can just specify a number of columns and away you go. 

[fmgujju]

Regarding the Mobile-First approach, I really like this HTML5Rocks Tutorial. Creating a Mobile-First Responsive Web Design

[OrganizedFellow]

Whether you choose HTML Kickstart, Foundation, Bootstrap, Goldilocks, something else or you roll your own.

Everyone will have their favorite CSS framework. Rather than try this one or that one, I suggest you learn ONE and learn it really WELL!!!

I used to think that all Twitter Bootstrap sites looked like every other Twitter Bootstrap site. But lately I've been seeing some pretty awesome designs.

I'm also a big fan of Foundation. Been using it since version 2.

[teppo]

Great answers, folks!

One thing to add for anyone wanting to learn responsive design is to take a good look at Responsive Web Design by Ethan Marcotte -- guy who coined term "responsive web design" and wrote that wonderful article at ALA @kongondo linked above.

Book itself is ~150 pages of easy-to-read (and easy-to-understand) practical tips, explanations and examples. Highly recommended (especially, but not limited to, for beginners) and well worth those couple of bucks it'll cost you. You can't get closer to "the source" than this.

Keep in mind that even if you're going to let a framework do all the "heavy" lifting for you, it's still worthwhile to understand what's actually happening behind the scenes.

(Oh, and while I'm at it, I'd go as far as recommend getting that Responsive Web Design + Mobile First book bundle A Book Apart is offering. Mobile First is another book you'll definitely want to read at some point!)

[OrganizedFellow]

Keep in mind that even if you're going to let a framework do all the "heavy" lifting for you, it's still worthwhile to understand what's actually happening behind the scenes.

GREAT advice!

That's why I think it's a good idea that everyone (at least once in their design lives) code their own css framework. 

[kongondo]

I used to think that all Twitter Bootstrap sites looked like every other Twitter Bootstrap site. But lately I've been seeing some pretty awesome designs.

I'm also a big fan of Foundation. Been using it since version 2.

About websites looking the same: As you rightly say, lately, you've been seeing awesome designs. Technically speaking, actually, all websites look the same if you remove the CSS, to expose the bare HTML, hehe! It's all a bunch of blocks - (mainly DIVs; or Tables! Help! Does anybody still use Tables for layout?!) - arranged on a canvas.

I moved to Foundation from Blueprint which seemed to have expired? I am still on Foundation 3; I don't understand the new classes in 4 and don't have time to learn, ATM

[pwired]

Thanks kongondo (and others with links and books) taking time writing a real good explanation and the links. I had a look at your suggested Foundation, says they have inbuild prototyping as well. I'm gonna try that first and hopefully at the end of this week I can port one of my old websites to processwire with Foundation and make it have my first pro magazine look.

[yellowled]

I don't think there's anything to add to kongondo's list. That's pretty impressive. 

I am not a fan of frameworks, especially not for responsive webdesign. I'm with Teppo here – understanding what's working how and why is very useful, especially if you're not familiar with it yet. Also, keep in mind that while RWD is not limited to mobile/smallscreen devices, they are primary objective. Most framework come with a lot of “baggage”, i.e. stuff that your site won't need. So technically, you'd have to remove a lot of stuff to keep your site slim. Personally, that's now how I like to spend my time …

Also, most of these frameworks have kind of a “branding”. I have yet to see a site build with Bootstrap without being able to tell that it's been built with Bootstrap without even looking under the hood. It takes a lot of effort to drop the Bootstrap stuff – I guess that effort would be spent better in actually designing the site …

[diogo]

I may have a completely wrong idea about frameworks, but I really enjoy building my websites from a blank state. It doesn't take much time to prepare a custom layout base from scratch, and it helps my design process that I'm completely naked of limitations. I just design, and leave the problem solving for later... I came to the conclusion the you can do everything you want, if not with css, then by adding some javascript.

So, to answer the original questions: I have a different approach to each site, depending on what I came up on the design fase.

[MarcC]

I like Initializr's approach because it's less frameworky but still a nice place to start on a responsive layout. I have yet to try Foundation, so maybe it'll change my mind. It seems like a nice project. I just don't like to pull more things out than I put in.

[kongondo]

I think the idea with frameworks is to help you stop writing the same code over and over every time you have a new project. Of course you can stop doing that by using your "own framework" or bare-bones if you like. For guys who don't use CSS frameworks, I believe you have some code in your snippets stash that you reuse for various projects? That is your framework.

Interestingly....I think CSS is the last frontier where people still want to have total freedom. For PHP we have some well-established classes that have withstood the test of time (e.g. PHP Mailer class) that are used over and over by loads of people. For javascript, it's almost a cliche in some quarters if you say you use jQuery (Duh!) [What happened to mootools btw?]. Of course I am not comparing PHP to CSS , just thinking out loud here. Bottom line, we use what floats our boats....until Internet Explorer comes along and sinks us all! ...until we conquer it (or forget it  )

[diogo]

@kongondo, for me there is a big difference between a php framework and a css framework, but this is maybe because I am a designer, and although I worry about the server side, the website design is my ultimate goal. Anyway, php is hidden, and if a framework gives you enough flexibility to achieve what you want while removing a lot of work from you, that's great! PW gives us exactly that, but honestly, I couldn't care less about how I achieve things in php, I just want things to work, and have a professional looking backend for my clients. As a designer, the frontend is what I'm selling to my clients and where I really want to make a difference. I don't want to start designing thinking of an imposed grid. I want to use a grid if it fits my design, but not to use it if it doesn't. Of course I keep some snippets of code, but I don't get too attached to them because every time I need to do something someone came up with an even nicer solution already, and it really doesn't take much time to look for things when you need. As for jQuery, I wouldn' also compare it with css frameworks, because it has more to do with how you write javascript then what you do with it. IMO the fair comparison would be with be with jQuery UI for instance.

Anyway, I'm glad the frameworks are there, and that they make things easier when you need, I just don't think that it is possible that you choose one and become really good at it without becoming somehow dependent on the tool and without it influencing and limiting your designs. In the end, all comes to what you want to offer with your work, and I'm not saying that some choices are more valid than others.

[kongondo]

@Diogo,

We'll put. True...there are times I find myself constrained by a framework and step out of it for minute to do my thing and pick it up a couple of lines down..

[onjegolders]

Diogo, I think it depends how you use the framework.

Personally I get great use out of the responsive grid and a few defaults like form elements. I certainly try and avoid using the very obvious Bootstrap TopBar or anything like that.

I wouldn't say that any of the actual design is compromised by my use of Foundation. Also on their site, you can select which parts to include in the download so that you don't end up with the bloat.

The biggest advantage for me is not having to worry (or worry as much ) about floats and cross-browser issues and it lets me spend more time on the actual design process

[yellowled]

jQuery is a great example of how a frontend framework can be useful – it makes writing JS way easier (some people would not agree that this is a good thing), takes care of browser issues (unless you use the new jQuery 2.0 and still have to support oldIE) and even makes using JS safer. But it does not impose things on the user like a lot of CSS frameworks do. That is, until you start using jQuery plugins, because some of them require specific CSS to work.

The thing with CSS framework is, most of them include a UI component, much like jQuery has jQuery UI (but doesn't bundle it). It would be perfectly okay to use e.g. Bootstrap's layout module, but most people just download the whole thing and use it. (I'm not even sure if you can download just “the good parts”.)

So a pretty good indicator for a usable CSS framework would be that it's modularized in a way that you can choose which modules you want to use. If if even has a generator which gives you an individual build, great. But if it is split into modules but still ships the whole nine yards in any download package … 

[onjegolders]

Yellow, Foundation definitely does this, it has a generator. Not sure about TB. Then you have tons of other lightweight frameworks like Skeleton which Ryan uses.

[Luis]

TB let you customize your package easily via checkboxes. No need of styled buttons? No deal, just drop them and so on

[MatthewSchenker]

Hello Everyone,

Like a lot of you, I have considered CSS frameworks.  I've experimented with Botstrap, Foundation, and Skeleton.  My favorite is Foundation, but at this point, I seem to always end up NOT relying on any of them because every project is too different from any other, and I feel like my own library of styles I built up just keeps working for me. But I feel like it is probably time for me to jump on one of these systems.

As someone mentioned earlier, PHP frameworks is a whole other story.  With that, I do think we should use established frameworks since it gets into important security considerations and can mean a much bigger effect in performance.

Getting back to CSS frameworks, I just found a new one (at least to me): http://responsive.gs/

Thanks,

Matthew

[yellowled]

Right, there's a “Customize” section on the Bootstrap page. I wasn't aware of that since I never use it. 

[petsagouris]

And while on the CSS Framework discussion it is quite easy to use a preprocessor to get what you need and customize the framework exactly as you need it. Twitter Boostrap uses LESS and Foundation uses SASS. This lets you take what you need from them.

[diogo]

Just want to notice how a question about layout became a discussion about frameworks. I rest my case