6

When I first taught myself how to make websites (html/css) I used exact pixel width and height for all div elements. I've also practiced making websites with nothing but percentage width and height.

I can use either technique fairly easily, but I wanted to know is there a standard technique or structure to building the basic layout of a website?

My recent favorite is to make my main div container an exact pixel width with auto height (centered on the page) and then have all divs inside set to a percentage width and auto height. This works just fine for me, but if there's a widely acknowledged standard to making a website from scratch I would love to know.

7
  • 1
    not a programming question. should move to stackoverflow
    – Reactgular
    Jun 21, 2013 at 3:25
  • 3
    Keeping this as a comment because its not really my area. What seems common now is using scaffolding such as Twitter Bootstrap, and a '12 column' layout (where widths are given not in pixels or percentages, but the number of columns out of 12 they span). Jun 21, 2013 at 3:40
  • 3
    This is a programming question as I am writing code that makes up a website -- this would not be a stack-overflow question. Jun 21, 2013 at 3:47
  • 2
    Agree with @ThisBetterWork this is moer about best practise than about a specific technique or technology.
    – user69037
    Jun 21, 2013 at 4:05
  • 1
    @GrandmasterB Thank you for your suggestions, I have heard of the 960 and 12 column grid layouts and will check out twitter bootstrap. Jun 21, 2013 at 4:15

1 Answer 1

3

As GrandMasterB mentioned, the current trend is to use scaffolding and responsive column-based layouts that make it much easier to write web applications for multiple target environments all at the same time: PCs, tablets, smartphones.

The most used is Twitter's Bootstrap... to the point where you can almost instantly recognize a website using it. To the point where a blog post has been written to stop using it... And as such, a lot of websites with Bootstrap themes (free or/and premium) have popped out of nowhere such as Bootswatch for example.

The other one that I've personnally used is Zurb's Foundation which is also nice and offers the same gric/column based layout. Similarly to Bootstrap, you can customize the CSS and Javascript components included before downloading the source files.

I don't know if this trend is going to stop or if it will fall into "another way of writing web apps", but there are many pros while working with such frameworks:

  • Part of the responsive design is already done for you (and if you don't do too much complicated stuff, that part is going to be very close to 100%)
  • It's easy to pick up (for exmaple: most important CSS classes in Bootstrap: row, and spanx where x is a number between 1 and 12)
  • It's easily customizable with additional fonts, icons, theme colors
  • It's pretty !
  • You save a lot of time for more important stuff rather than micro-managing pixel by pixel all your DOM elements (you can still do that, sure, but if you do things well, you should not have to)
  • They come with JQuery-based components
  • It's still being worked on, and updated with modern CSS3 and HTML5 features while keeping compatibility with older browsers
  • It's incredibly easy to integrate Bootstrap to a MVVM framework such as KnockoutJS for example.

And last but not least... Both Bootstrap and Zurb Foundation have excellent documentations

Edit: found a website comparing Bootstrap to Zurb Foundation and to another one that I didn't knew of, Skeleton (still grid/column based): http://responsive.vermilion.com/compare.php

2
  • Thank you for this information! I made a quick twitter bootstrap website and can definitely see all the benefits you mentioned. Although, it worries me a little to think that hand crafted sites may not be necessary anymore. Jun 21, 2013 at 17:36
  • @ThisBetterWork Thanks, I totally understand that feeling :-) It's very useful to have deep knowledge of CSS 2/3, but now that I know Bootstrap very well, I really don't see myself getting back doing things the long way. I however am happy to be quickly able to jump into important stuff.
    – Jalayn
    Jun 21, 2013 at 17:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.