Coding Flexible Web Layouts in HTML5 and CSS

by CSS, Web Design

Web standards are in evolution and continuing to refine how we structure our content. There are many open source platforms which allow rapid prototyping and development of new features in just a few days. As web developers it can be difficult to keep up with such fast-paced times.

Luckily with the rise of advanced standards we’re seeing less requirements to create amazing website layouts. No longer are you required 8+ hour coding sessions just to churn out a product draft. Along with the tips below we’re also sharing some popular and free HTML5/CSS templates to download.

Expandable templates are the easiest way to cater all visitors to a site. They also contain useful source code to study and brush up on the latest syntax. As such, layouts which expand and contract based on browser resolution will fare much better in the general consensus of the web.

Back to Basics

It’s important to remember that website layouts do not require a confusing hierarchy. In fact we can break down the entire process into 2 languages – HTML markup and CSS styles. Both of these are frontend development languages used to put together a displayable website in a browser.

With each of these you are doing a separate job to bring together one final product. HTML is used as a markup language. This means you can define page elements, blocks, headers, forms, and all the elements needed on a page. CSS is used for styling these elements with widths, background colors, and anything else imaginable.

Define Web Page Transparency

Each type of flexible layout will provide its own benefits and drawbacks. Liquid layouts will expand and adapt into any screen resolution. This means 100% width will fill 100% of the browser window, pixel for pixel.

Elastic layouts are slightly different in that they expand based on text size. This means their width is only as large as the amount of content contained within. This isn’t a recommended path to go in today’s web as pages are updated with new content daily. You’d be reaching for a level of standards that could never be achieved.

A hybrid layout works by expanding a website to a certain limit point upon which the container will max out. This is beneficial if you have a design which can expand to larger screen resolutions but will break past a certain point.

Design Differently

The most popular CSS grid systems available usually touch upon fixed-width layouts. This means you will be running a page with 960px width no matter how many columns you implement. The retraction I have is why limit your website to private standards?

By default browsers will render a website in 100% width and let it grow to fill the screen. If a layout requires an exact limit to width because of graphical limitations it may be worthwhile to stick with base standards. However don’t approach a new design project under this assumption as you’re greatly limiting your creativity.

Based on this assumption, we should conclude that not all design mockups will allow for flexible layouts. This is absolutely true, and should be taken into consideration right from the start. It takes a trained eye to understand which mockups can scale and which can’t. Think outside the box and you’re sure to find answers to any questions you formulate.

Layout Width Affects Height

We have been discussing layouts expanding horizontally up until now but nobody seems to consider the flip side. Arguments for keeping pieces of content above-the-fold stand strong with user-backed testing and analytics data.

No flexible layouts will give you perfect control over your page height. That’s just a level of control you must release. Liquid layouts will provide an easier time for controlling the height of your page than any other. As the page expands individual lines of text and images will wrap differently and cause vertical spacing to recede or inflate.

This isn’t the case with elastic layouts where an increase in page size also increases text size. Not only are lines of text now taking up more space, but the individual letters themselves are taking up more width/height via increasing font sizes.

The best way to avoid these gaps is to keep text structured and blocked-in. This ensures all areas will scale nicely and nothing will break out of the “block grid”. Generally percents are well to be avoided typography as ems represent typography in simple elegance.

Website Graphics and Images

Images can become a problem if they aren’t implemented properly (and this sounds strange since images have always been simple!). I suppose nothing has really changed to drop images altogether… the first addition is a min-width setting on your parent container. This will keep all content set to a specific width at the very minimum – your site will never drop below this value no matter how small the browser window is.

If you have a 500px content area with 480px images sewn throughout each page you will want to ensure your layout doesn’t drop below this point. Obviously there is room for possible expansion where images would have more width to fill.

Another trick is using background images to repeat simple patterns. This technique works well with navigation menus, tabbed links, and page backgrounds with tiled patterns. As for smaller boxes of content you may consider a background gradient repeated horizontally across the top or bottom. This will not only keep your design fresh but the background image can expand on forever without skipping a beat.

HTML5 Website Layouts

Below is a small gallery collection of amazing website templates. All are coded with standards-compliance in mind and offer download free of charge. Most are also free to edit and customize with permission or credit attributed to the original author. If you’re interested in studying a bit more into HTML5 check out our collection of tutorials and study resources.

Webdezign free HTML5 template

CSS3 & HTML5 One-Page Website Template

52Framework

Gotta’ Love HTML5 & CSS3

HTML5 iPhone App Website Template

Free HTML5 WordPress Theme

Elegant Website Template with HTML 5 And CSS3

A free HTML5 and CSS3 theme

Template Monster Photography Portfolio Template

EarthDay HTML5 and CSS3 Template

Conclusion

These tips should get you started in mapping out your flexible web layout. If you consider yourself a newbie in the field spend some time researching popular CSS frameworks. There are plenty out there and they can jump-start you into a terrific starting point.

The end goal is to combine these layout structures into innovative CSS properties. With the release of CSS3 we’re seeing many new properties and styles never been implemented before. Over time I’m thinking we’ll see new standards released to control page size, layouts, and block elements with ease.

You might also like…

30 Pure CSS Alternatives to Javascript →
50 Refreshing CSS Tutorials, Techniques and Resources →
40 High Quality CSS and XHTML Web Layout Templates →
40 Professional and Detailed Web Layout PSD Templates →
20 Free Web UI Element Kits and Stencils →
25 Completely Free Fonts Perfect for @fontface →
The Complete Web Design Style Series (700 Designs in 14 Categories) →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →

Author: (94 Posts)

Jake Rocheleau is a passionate web designer and social media entrepreneur. He is frequently researching the latest trends in digital design and new-age Internet ideas. He's also an advocate for the social media revolution - follow his updates on Twitter @jakerocheleau.

  • http://www.linkedin.com/in/pbarnhart Phil Barnhart

    I think that the excellent HTML Boilerplate (http://html5boilerplate.com/) should definitely be on this list. Besides being a good jump-start, there are implemented best practices and suggestions for a multidevice layout that degrades gracefully for older mobile devices.

  • http://jeremyhixon.com Jeremy Hixon

    Great article. Something I’ve been trying to adapt to personally over the past month or so. I really like the concept on http://cssgrid.net/ as well. I’ve been trying to get a handle on ways to use it in some of my own work. But I also spend lots of time trying to sell designers on fluid designs so as not to constrain content to a fixed space or include any more scroll bars than necessary.

  • Andrew Peacock

    With the arrival of the media property for CSS style sheets it does not seem like fluid layouts have much use anymore. Because one can now target specific screen sizes, scaling is no longer an issue, as it can all be done within a stylesheet.

    By using a fluid layout the design will still be aimed at a specific screen size, as it would be difficult to design for a resolution of 1920×1200 and of 1024×768. I assume that if displayed in the smaller resolution the design may be tight and squeezed together, but when displayed in the larger that there would be lots of extra space.

    I believe that once the media property of stylesheets is supported cross-browser, fluid layouts will become extinct.

  • http://www.stevesims.com Steve – Freelance website designer

    I don’t know how you find the time to write such jam-packed articles Jake. All good stuff and I’m working my way though the examples above, to get a few tips to use with our own website designs – Thank you

  • http://www.skyledger.com Spicer Matthews

    Jake,

    First of all great write up.

    Second, I really really like the desk (in the first image). That is just the desk I am looking for.

    Would you mind sharing who makes that desk?

    Thanks.
    ~Spicer

  • Peter Jackson

    Another great HTML5/CSS3 site about html5/css3 that I read is http://mycoffeecupisempty.com – worth 5 minutes of your time, just like this blog article. I love these great resources.

  • http://www.colddesign.it Giacomo Colddesign

    Great article.. thanks.:!!!!

  • Pingback: wpmag.com - WordPress News, Themes, Tutorials, Plugins, Questions, ...

  • Pingback: La veille du week-end (neuvième) | LoïcG

  • http://www.deepspacedesign.co.uk/ web designer

    I think that the excellent HTML Boilerplate should definitely be on this list. Besides being a good jump-start, there are implemented best practices and suggestions for a multidevice layout that degrades gracefully for older mobile devices.

  • Pingback: Showcase of HTML5-Powered Sites | Content Store

  • http://craigwebbart.com Cwebba1

    I was reading through the boilerplate jargon expecting to get to the good part about code. Surprise! All there is at the bottom is a bunch of dodgy third-party templates, each with their own agenda. Even your endorsement is suspect. This isn’t a tutorial – it’s just a blog.

  • http://www.vibegraphics.co.uk Web Design

    Great article, very useful information. 

  • Jolynn

    What do you think about this fellas input 
    http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css   He does everything in em’s. What is best? Use percentages or em’s for everything. I was using percentages for the basic layout structure and em’s for fonts, then px’s for images.  Which is the best to follow, between his article and yours this is very confusing.