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
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, andspanxwhere 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