Website Layouts

Layout

Layout Format/Structure

Layout Types

HTML Tables

The <table> element was not designed to be a layout tool!

CSS Frameworks

If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.

CSS Floats

It is common to do entire web layouts using the CSS float property. Float is easy to learn – you just need to remember how the float and clear properties work. Learn more

Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.

CSS Flexbox

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.Learn more

Disadvantages: Does not work in IE10 and earlier.

CSS Grid View

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Learn more

Disadvantages: Does not work in IE nor in Edge 15 and earlier.

Layout Features (for viewports)

Responsive

Responsive design is built from static blocks with fixed width, expressed in pixels.

Let’s assume that we have a two-column layout consisting of the article (blue;right;W:200px) and the sidebar (yellow;left;W:150px) top of background (grey;back;500px).

Additional styles (sidebar above article) for when the browser window cross the 500px set breakpoint

Fluid

A fluid website usually fills the whole width of a browser. It uses relative units to fluidly adapt its layout to any browser/device. Let’s make our columns fluid:

The fluid layout can be very tricky in more complex projects, so usually a more practical way to go is fluid-responsive.

Fluid-Responsive

Generally speaking, the idea behind a fluid-responsive layout is that it uses fixed widths in pixels for defined breakpoints and fluid relative units (for example percents) between these breakpoints (breakpoint 500px):

Elements

Div & Span

A “block-level element”An “inline element”
can contain all other elements!cannot contain block-level elements!!
can only be inside other block-level elementscan be inside any other element
defines a rectangular region on the pagedefines a “snake” on the page
tries to be as wide as possibletries to be as small as possible
begins on a “new line”, and has an “carriage return” at the end, like a <p>doesn’t create any new lines.

Styling

Sizing

One point(pt) is equal to 1/72 of an inch.

One pixel(px) is equal to one dot on the computer screen (the smallest division of your screen’s resolution)

Both pt and px are fixed-size units, so cannot scale i.e. looks bad when zoomed

Both em and % are scalable

Generally, 1em = 12pt = 16px = 100%

Generally, when creating a new design, use percent on the body element

(body { font-size: 62.5%; }),

then use em/percent on any other CSS rules and selectors to size it from there.

Media Queries

Always Design for Mobile First

If the browser window is smaller than 768px (768px is the breakpoint), each column should have a width of 100% but if larger will have the For desktop width percent:



/* For mobile phones: */ 
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Make Website Responsive

  1. Create a normal website
  2. Add these to the <head> section
    1. <meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”>
    2. <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
    3. <meta name=”HandheldFriendly” content=”true”>
  3. This will set the view on all screens at a 1×1 aspect ratio and remove the default functionality from iPhones and other smartphone browsers which render websites at full-view and allow users to zoom into the layout by pinching.
  4. Now, add media queries to allow your site to look good on all kinds of displays, from smartphones to big screens. 
    1. Since media queries depends on your website layout, use the code below as a good starting point. After editing, add to your .css file.
      1. /* Tablet Landscape */

@media screen and (max-width: 1060px) {

   #primary { width:67%; }

   #secondary { width:30%; margin-left:3%;} 

}

/* Tabled Portrait */

@media screen and (max-width: 768px) {

   #primary { width:100%; }

   #secondary { width:100%; margin:0; border:none; }

}

  1. In this example, #primary is the main content area, and #secondary the sidebar.
  2. I also defined two sizes: 
    1. The first have a maximum width of 1060px and is optimized for tablet landscape display. #primary occupies 67% of its parent container, and #secondary 30%, plus a 3% left margin.
    2. The second size is designed for tablet portrait and smaller sizes. Due to the small sizes of smartphones screens, I decided to give #primary a 100% width. #secondary also have a 100% width, and will be displayed below #primary.
  3. After done, check your layout’s responsiveness here

2 – Medias

A responsive layout is the first step to a fully responsive website. Now, let’s focus on a very important aspect of a modern website: medias, such as videos or images.

The CSS code below will ensure that your images will never be bigger than their parent container. It’s super simple and it works for most websites. Please note that the max-width directive is not recognized by older browsers such as IE6. In order to work, this code snippet have to be inserted into your CSS stylesheet.

img { max-width: 100%; }

Although the technique above is efficient, sometimes you may need to have more control over images and display a different image according to the client display size.

Here is a technique developed by Nicolas Gallagher. Let’s start with the html:

<img src="image.jpg"
    data-src-600px="image-600px.jpg"
    data-src-800px="image-800px.jpg"
    alt="">

As you can see, we used the data-* attribute to store replacement images urls. Now, let’s use the full power of CSS3 to replace the default image by one of the specified replacement images if the min-device-width condition is matched:

@media (min-device-width:600px) {
   img[data-src-600px] {
       content: attr(data-src-600px, url);
   }
}
@media (min-device-width:800px) {
   img[data-src-800px] {
       content: attr(data-src-800px, url);
   }
}

Impressive, isn’t it? Now let’s have a look to another very important media in today’s websites, videos.

As most websites are using videos from third parties sites such as YouTube or Vimeo, I decided to focus on the elastic video technique by Nick La. This technique allows you to make embedded videos responsive.

The html:

<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

And now, the CSS:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe, 
.video-container object, 
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Once you applied this code to your website, embedded videos are now responsive.

3 – Typography

The last step of this tutorial is definitely important, but it is often neglected by developers when it comes to responsive websites: Typography.

Until now, most developers (including myself!) used pixels to define font sizes. While pixels are ok when your website has a fixed width, a responsive website should have a responsive font. Indeed, a responsive font size should be related to its parent container width, so it can adapt to the screen of the client.

The CSS3 specification included a new unit named rems. They work almost identically to the em unit, but are relative to the html element, which make them a lot easier to use than ems.

As rems are relative to the html element, don’t forget to reset html font size:

html { font-size:100%; }

html { font-size:100%; }

Once done, you can define responsive font sizes as shown below:

@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }

Please note that the rem unit is not recognized by older browsers, so don’t forget to implement a fallback.  That’s all for today – I hope you enjoyed this tutorial!


Reference

  1. “How to Create Extra Space in HTML or a Web Page.” Computer Hope’s Free Computer Help, 6 July 2021, www.computerhope.com/issues/ch001662.htm.

--- :: Skyferia Tech's Related Posts :: ---