Web page layout: getting from sorta competent to kinda good
August 12, 2013 10:00 PM Subscribe
Hey competent web devs! How do you do page layout? Help me get my page layout skills to...well maybe not 2013, I'm not that ambitious, but, maybe late 2009?
I'm a server-side developer (C#, that kind of thing), trying to get better at web development (data viz, specifically). So there a bunch of stuff I need to learn:
* CSS (Ok, I get it)
* Javascript (lots of idiosynracies, but it's just another programming language)
* jQuery (♥) and, since I like data viz, d3.js (♥♥♥)
* Web page layout (argh my god I hate page layout and I dread having to debug it)
After lots of struggling and tutorials, I'm at the point where I can layout a basic page (3 column layout, header, footer, etc.) but my layout is usually brittle: too much text, or a font change, or a new version of IE, and it all gets jumbled. But I notice if I go to a real site, say, nytimes.com, and I mess around with their font sizes via Chrome's developer tools, somehow the page layout remains relatively stable. So it can be done!
How do I get to that level? What tools should I be using? I realize frameworks like jQuery abstact a lot of the browser-specific stuff, but I still need to build the basic page structure one div at a time, right? Or do I? Is it silly that I'm still sitting in front of a text editor, manually typing out div id = "left", because no one does that anymore? Do most people use some kind of GUI editor these days, or some additional layout framework?
I'm a server-side developer (C#, that kind of thing), trying to get better at web development (data viz, specifically). So there a bunch of stuff I need to learn:
* CSS (Ok, I get it)
* Javascript (lots of idiosynracies, but it's just another programming language)
* jQuery (♥) and, since I like data viz, d3.js (♥♥♥)
* Web page layout (argh my god I hate page layout and I dread having to debug it)
After lots of struggling and tutorials, I'm at the point where I can layout a basic page (3 column layout, header, footer, etc.) but my layout is usually brittle: too much text, or a font change, or a new version of IE, and it all gets jumbled. But I notice if I go to a real site, say, nytimes.com, and I mess around with their font sizes via Chrome's developer tools, somehow the page layout remains relatively stable. So it can be done!
How do I get to that level? What tools should I be using? I realize frameworks like jQuery abstact a lot of the browser-specific stuff, but I still need to build the basic page structure one div at a time, right? Or do I? Is it silly that I'm still sitting in front of a text editor, manually typing out div id = "left", because no one does that anymore? Do most people use some kind of GUI editor these days, or some additional layout framework?
but I still need to build the basic page structure one div at a time, right? Or do I? Is it silly that I'm still sitting in front of a text editor, manually typing out div id = "left", because no one does that anymore? Do most people use some kind of GUI editor these days, or some additional layout framework?
Yeah, you more or less do. There are some things like Blueprint which will get you started if you want to do complex dynamic layouts, but you'll always need to do the basic groundwork of knowing and understanding how layout works. And css layout is almost totally distinct from javascript, so jQuery isn't really relevant to that part of it. Things like Bootstrap will give you a site that looks like Bootstrap- not really that relevant for building a professional site with a custom look.
It really just takes a ton of trial and error. There are so many gotchas and weirdnesses in CSS/HTML that I started in the late '90s and I still don't know them all. One thing you have going for you these days if you can probably drop support for IE8 and older and no one will care.
But, you just need to learn it. Figuring out how "floats" interact with non-floats, and how "inline" differs from "block" is a great way to start. That, and how absolute and relative works, including putting absolute positions inside relative ones.
But really, it's incredibly weird and idiosyncratic. Just try to center something vertically and you'll see. That should have been the first thing they built, right? Yeah, not so much.
posted by drjimmy11 at 10:29 PM on August 12, 2013
Yeah, you more or less do. There are some things like Blueprint which will get you started if you want to do complex dynamic layouts, but you'll always need to do the basic groundwork of knowing and understanding how layout works. And css layout is almost totally distinct from javascript, so jQuery isn't really relevant to that part of it. Things like Bootstrap will give you a site that looks like Bootstrap- not really that relevant for building a professional site with a custom look.
It really just takes a ton of trial and error. There are so many gotchas and weirdnesses in CSS/HTML that I started in the late '90s and I still don't know them all. One thing you have going for you these days if you can probably drop support for IE8 and older and no one will care.
But, you just need to learn it. Figuring out how "floats" interact with non-floats, and how "inline" differs from "block" is a great way to start. That, and how absolute and relative works, including putting absolute positions inside relative ones.
But really, it's incredibly weird and idiosyncratic. Just try to center something vertically and you'll see. That should have been the first thing they built, right? Yeah, not so much.
posted by drjimmy11 at 10:29 PM on August 12, 2013
If you do end up adding a lot of repeated items to a page, like say a gallery of photos, you'll want to use Javascript templates. My personal preference is Underscore, though there are a million that do basically the same thing.
posted by drjimmy11 at 10:31 PM on August 12, 2013
posted by drjimmy11 at 10:31 PM on August 12, 2013
LayoutIt offers a Bootstrap-based way to avoid your layout troubles. But more to the point, learn some CSS grid system--Bootstrap, 960, Zurb Foundation, anything. Just learn one and a lot of your layout pain goes away.
posted by Monsieur Caution at 10:34 PM on August 12, 2013
posted by Monsieur Caution at 10:34 PM on August 12, 2013
Finally, I'll commend you for wanting to learn. There's an incredibly common (and incredibly infuriating) attitude among backend developers that presentation coding is "easy" or "not real programming" and that it can be hacked together with some out-of-the-box product in 4 minutes and then you can go back to "real" work.
If you learn to do it for real, from the ground up, you'll have a big leg up on a lot of people.
posted by drjimmy11 at 10:36 PM on August 12, 2013
If you learn to do it for real, from the ground up, you'll have a big leg up on a lot of people.
posted by drjimmy11 at 10:36 PM on August 12, 2013
Response by poster: Huh, didn't know about Bootstrap / LayoutIt, thanks. I can see how that would get you up and running quickly, though it still seems worth understanding the underlying CSS. I guess the answer is: more practice and study. I don't mind putting in the work, as long as I think I'm not wasting my time because no one writes raw layout anymore.
Thanks everyone for the responses!
posted by molybdenum at 11:40 PM on August 12, 2013
Thanks everyone for the responses!
posted by molybdenum at 11:40 PM on August 12, 2013
Response by poster: I have to comment, though: using Bootstrap means adding 200K of .css and .js to my page to get...a grid layout? Couldn't I do that in 1999 using HTML table tags? Grumble...
posted by molybdenum at 11:44 PM on August 12, 2013 [2 favorites]
posted by molybdenum at 11:44 PM on August 12, 2013 [2 favorites]
You might benefit from this slide show:
http://www.slideshare.net/Wolfr/design-for-developersonlineversionlong
posted by Dansaman at 11:48 PM on August 12, 2013 [2 favorites]
http://www.slideshare.net/Wolfr/design-for-developersonlineversionlong
posted by Dansaman at 11:48 PM on August 12, 2013 [2 favorites]
Couldn't I do that in 1999 using HTML table tags?
No. You get a lot more than a grid layout.
posted by victory_laser at 1:55 AM on August 13, 2013
No. You get a lot more than a grid layout.
posted by victory_laser at 1:55 AM on August 13, 2013
A pre-built grid is a good way to go, but you'll probably need to know how to do this anyway.
This:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
is the best resource on css positioning on the internet. It's 10 measly slides, but if you sit there for 20 minutes and really try to understand exactly what's happening you'll know everything you need to know. Well that and you should understand the box model and how padding works.
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
posted by miniape at 4:58 AM on August 13, 2013 [2 favorites]
This:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
is the best resource on css positioning on the internet. It's 10 measly slides, but if you sit there for 20 minutes and really try to understand exactly what's happening you'll know everything you need to know. Well that and you should understand the box model and how padding works.
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
posted by miniape at 4:58 AM on August 13, 2013 [2 favorites]
I don't think Bootstrap et al. are great for a beginner looking to understand this stuff, because they just do it for you. There is always value in going through and figuring out the idiosyncrasies of a framework to understand why it does what it does, but so many of them do so much that you can get overwhelmed pretty quickly.
'Responsive design' and 'fluid layout' are the search terms you want (all the cool kids are doing it these days), and the basic idea is that you lay things out using percentages and ems instead of pixel dimensions. You do not need a fancy framework to do this; you can play around yourself with some dummy text and boxes to see how it works. Tutorials are a dime a dozen and any one of them can get you started.
posted by ella wren at 5:47 AM on August 13, 2013
'Responsive design' and 'fluid layout' are the search terms you want (all the cool kids are doing it these days), and the basic idea is that you lay things out using percentages and ems instead of pixel dimensions. You do not need a fancy framework to do this; you can play around yourself with some dummy text and boxes to see how it works. Tutorials are a dime a dozen and any one of them can get you started.
posted by ella wren at 5:47 AM on August 13, 2013
Seconding Ella wren: If you're serious about learning this going forward, you need to learn how to do layouts with percentages. Don't let it freak you out; it's more opaque to learn than using pixels, but in many ways it's easier to make layouts that don't break.
The idea behind the new responsive designs is simple: more and more people will be viewing your site on a small screen - either a tablet or a phone. The answer used to be making two different sites - one for desktop users and one for mobile users. That's not ideal for a lot of reasons. So now the answer is to make one site that rearranges itself as the screen gets larger or smaller. Using percentages for all your measurements automatically take care of many of the issues, and the idiosyncrasies that pop up are dealt with with a little extra CSS called @media queries.
There are lots of tutorials out there. Just jump in and play around. Don't get discouraged; you'll get the hang of it.
posted by Benny Andajetz at 6:56 AM on August 13, 2013 [1 favorite]
The idea behind the new responsive designs is simple: more and more people will be viewing your site on a small screen - either a tablet or a phone. The answer used to be making two different sites - one for desktop users and one for mobile users. That's not ideal for a lot of reasons. So now the answer is to make one site that rearranges itself as the screen gets larger or smaller. Using percentages for all your measurements automatically take care of many of the issues, and the idiosyncrasies that pop up are dealt with with a little extra CSS called @media queries.
There are lots of tutorials out there. Just jump in and play around. Don't get discouraged; you'll get the hang of it.
posted by Benny Andajetz at 6:56 AM on August 13, 2013 [1 favorite]
Here are a few resources that should help get you started:
Links:
posted by backwards guitar at 7:18 AM on August 13, 2013 [6 favorites]
Links:
- http://css-tricks.com Great resource for modern web development. Watching his videos would be useful.
- Shop Talk Show Podcast (The rapid fire episodes in particular)
- The Treehouse Show
- Build Podcast These are pretty advanced topics, but probably worth looking at once you get rolling.
- Hardboiled Web Design
- The A Book Apart books are good. Responsive Web Design would be particularly useful.
- CSS Preprocessors are definitely worth knowing. I prefer SASS with Compass. I'd recommend using it with CodeKit or LiveReload on Windows.
posted by backwards guitar at 7:18 AM on August 13, 2013 [6 favorites]
I think you're falling into a trap that I've seen several devs go into when they start poking around with front-end. It's not only about learning the technical aspects of how this thing is written and where. You need to take a few steps back and think about how things work, how they can all go wrong, and plan for as many contingencies as possible.
Sure, you need to know how to implement those things with CSS or jQuery, but a lot of what you need to start with is visualizing how this needs to work, then how it needs to look to work.
but my layout is usually brittle: too much text, or a font change, or a new version of IE, and it all gets jumbled.
A principle of design is graceful degradation. Start with pencil on paper. Think about what should happen if this div has more content than this div. Should you have scroll bars? Should it paginate? Should it truncate? Should it shoot the rest of the content into a "read more" link? Should that link be a pop over? A new browser window?
A key to having HTML degrade gracefully is to keep content in HTML and layout in CSS. Your:
posted by fontophilic at 7:52 AM on August 13, 2013 [1 favorite]
Sure, you need to know how to implement those things with CSS or jQuery, but a lot of what you need to start with is visualizing how this needs to work, then how it needs to look to work.
but my layout is usually brittle: too much text, or a font change, or a new version of IE, and it all gets jumbled.
A principle of design is graceful degradation. Start with pencil on paper. Think about what should happen if this div has more content than this div. Should you have scroll bars? Should it paginate? Should it truncate? Should it shoot the rest of the content into a "read more" link? Should that link be a pop over? A new browser window?
A key to having HTML degrade gracefully is to keep content in HTML and layout in CSS. Your:
<div id="left"></div> should be <div id="navigation"></div> . This way when [iteration #47, page sub-template, new client's site, etc] calls for a horizontal navigation, instead of left, your HTML is sound. Using child selectors in CSS is key too. Check out CSS Zen Garden for a demonstration of what I'm talking about.posted by fontophilic at 7:52 AM on August 13, 2013 [1 favorite]
Adding a few more resources which might be of interest to you:
Impressive Webs
Philip Walton
Learn CSS Layout
And the latest Bootstrap 3 download contains and 'examples' folder which looks awesome. You can probably mix and match elements from a lot of pages just with those raw materials.
posted by quadog at 6:42 PM on August 31, 2013
Impressive Webs
Philip Walton
Learn CSS Layout
And the latest Bootstrap 3 download contains and 'examples' folder which looks awesome. You can probably mix and match elements from a lot of pages just with those raw materials.
posted by quadog at 6:42 PM on August 31, 2013
« Older Should I worry about an explainable discrepancy in... | How to handle an impending layoff/ failing a trial... Newer »
This thread is closed to new comments.
posted by oceanjesse at 10:03 PM on August 12, 2013