Mick Redman: design

Showing posts with label design. Show all posts

Thursday, 23 November 2023

Monday, 4 July 2011

This example makes use of the Google Font API, spacing shades of grey. It's not a bad starting position.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Design Template 38</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Quattrocento&v1' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald&v1' rel='stylesheet' type='text/css'>
<style>
body
{
font:0.9em/1.5em 'Quattrocento', arial, serif;
width:60em;
margin:auto;
background:#EEEEEE;
color:#333333;
}
h1, nav
{
font-family:'Oswald', arial, serif;
}
section
{
width:37em;
margin:0 0 0 4em;
}
header, section, aside
{
float:left;
}
aside, footer
{
clear:both;
}
nav
{
float:right;
text-align:center;
margin:0 0 2em 0;
}
aside
{
width:19em;
}
img
{
margin:0 0 0 0;
}
p
{
text-align:justify;
margin-bottom:1em;
}
h1
{
color:#0693E2;
font-size:4em;
text-transform:lowercase;
margin:0.75em 0 0 0;
}
h1 .last-letter
{
color:#AAAAAA;
}
nav a
{
display:block;
float:left;
width:6em;
text-decoration:none;
padding:4.4em 0 0 0;
color:#333333;
}
nav a:hover
{
color:#FFFFFF;
background:#94D5F8;
}
footer
{
padding:1em 0 0 0;
}
</style>
</head>
<body>
<header><h1>Header <span class="last-letter">1</span></h1></header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<aside>
<img src="images/bigl.png" />
</aside>
<section>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<footer><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></footer>
</body>
</html>

Tuesday, 28 June 2011

SIMPLE LAYOUT #37

This example makes use of borders and spacing. It's not a bad starting position.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Design Template 37</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Quattrocento&v1' rel='stylesheet' type='text/css'>
<style>
body
{
font:0.96em/1.5em Sans-serif;
width:60em;
margin:auto;
color:#333333;
}
header, nav, section, footer, aside
{
margin:0.5em;
border:0.5em solid #EEEEEE;
}
header, nav, section, footer
{
padding:0.5em;
}
header, section
{
width:36.5em;
}
header, section
{
float:left;
}
nav, aside
{
float:right;
}
section, footer
{
clear:both;
}
nav
{
text-align:center;
width:18em;
height:3em;
padding-top:2em;
background:#94D5F8 url(images/bluefade.png) repeat-x;
}
aside
{
width:19em;
}
img
{
margin:0 0 -0.35em 0;
}
p
{
text-align:justify;
margin-bottom:0.5em;
}
h1
{
color:#0693E2;
font:4em 'Quattrocento', arial, serif;
text-transform:lowercase;
}
h1 .last-letter
{
color:#AAAAAA;
}
nav a
{
margin:0.5em;
text-decoration:none;
color:#FFFFFF;
}
nav a:hover
{
text-decoration:underline;
}
</style>
</head>
<body>
<br />
<header><h1>Header <span class="last-letter">1</span></h1></header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<section>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<aside>
<img src="http://lorempixum.com/291/300/technics" />
</aside>
<footer><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></footer>
</body>
</html>

Tuesday, 7 June 2011

SIMPLE LAYOUT #36

This latest layout makes use of a seamless, tiled paper texture. Hope you like it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design template 36</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli:light,regular' rel='stylesheet' type='text/css'>
<style>
*
{
background:url(images/sedona.jpg);
}
body
{
margin:auto;
width:60em;
font:1em/1.5em 'Muli', arial, serif;;
color:#E5D6C3;
}
.floatLeft, aside, article, footer
{
margin:0.5em;
}
.floatLeft, aside
{
width:29em;
float:left;
}
section, footer
{
clear:both;
}
section#titleImages
{
float:right;
margin:-7.5em 0.5em 0 0;
}
article
{
width:19em;
float:left;
}
h1, h2, h3, h4
{
font-family:'Playfair Display', arial, serif;
color:white;
}
h1
{
font-size:7em;
margin:0.5em 0 0.25em 0.05em;

}
h2
{
font-size:2em;
margin:1.5em 0 0em 0.25em;
}
h3, h4
{
font-size:1.6em;
margin:0.5em 0 0.25em 0em;
}
p
{
text-align:justify;
}
</style>
</head>
<body>
<header>
<h1>Header 1</h1>
<h2>Strapline for you</h2>
</header>
<section id="titleImages">
<img src="http://lorempixum.com/150/150/food" />
<img src="http://lorempixum.com/150/150/technics" />
<img src="http://lorempixum.com/150/150/people" />
</section>

<section class="floatLeft">
<header>
<h3>Section header</h3>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<aside>
<header>
<h3>Aside header</h3>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</aside>
<section>
<article>
<img src="http://lorempixum.com/300/300/food" />
<figure>
<h4>Article header</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</figure>
</article>
<article>
<img src="http://lorempixum.com/300/300/technics" />
<figure>
<h4>Article header</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</figure>
</article>
<article>
<img src="http://lorempixum.com/300/300/people" />
<figure>
<h4>Article header</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</figure>
</article>
</section>
<footer>This is my footer which goes on quite a long time.</footer>
</body>
</html>

Friday, 3 June 2011

Simple layout #35

The template is very similar to a previous one. I've just changed the colours, fonts, etc. This does give an entirely different impression and can therefore act as an inspiration for doing other things with the design.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 35</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" />
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<style>
body
{
margin:auto; /* center in viewport */
width: 960px;
background:#333333;
}
body, nav a
{
color:#999999;
}
nav
{
text-align:center;
}
nav a
{
float:right;
display:block;
text-decoration:none;
padding:0.25em 0 0.5em 0;
margin:0 0.2em 0 0;
background:#444444;
}
nav a:hover
{
background:orange;
color:white;
}
h1
{
font:6em/1em 'Anton', arial, serif;
color:orange;
}
h2
{
font:2em 'Anton', arial, serif;
color:#A66C00;
}
section p, footer p, img, hgroup
{
margin:0.5em 1em 1em 1em;
}
#glass
{
width:28em;
}
p, a
{
font:normal 0.9em/1.5em Sans-serif;
}
.j
{
text-align:justify;
}
</style>
</head>
<body class="yui3-g">
<section class="yui3-u-1-2"></section>
<nav class="yui3-u-1-2">
<a href="#" class="yui3-u-1-5">home</a>
<a href="#" class="yui3-u-1-5">services</a>
<a href="#" class="yui3-u-1-5">portfolio</a>
<a href="#" class="yui3-u-1-5">contact</a>
</nav>
<header class="yui3-u-1">
<hgroup>
<h1>Header 1</h1>
<h2>Header 2</h2>
</hgroup>
</header>
<section id="glassHolder" class="yui3-u-1-2">
<img src="http://lorempixum.com/400/300/food" id="glass" />
</section>
<section class="yui3-u-1-2 j">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<section class="yui3-u-1-3 j">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section class="yui3-u-1-3 j">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section class="yui3-u-1-3 j">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<footer class="yui3-u-1"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></footer>
</body>
</html>

Thursday, 2 June 2011

Simple layout #34

In this example I have applied a couple of corners to the background. I have then added text colours which would contrast with both foreground and background colours.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two corners</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
<style>
body
{
color:#777777;
}
#topLeft, #bottomRight
{
position:absolute;
width:100%;
height:100%;
}
#topLeft
{
background:url(images/topLeftGrey.png) no-repeat left top;
z-index:-10;
}
#bottomRight
{
background:url(images/bottomRightGrey.png) no-repeat right bottom;
z-index:-9;
}
section#mainContent
{
padding:0.5em 0 0 2em;
}
h1
{
font:3em/2em 'Ultra', arial, serif;
color:orange;
}
p
{
text-align:justify;
font:1em/1.5em 'Maven Pro', arial, serif;
}
article
{
float:left;
width:58.5%;
}
aside
{
text-align:center;
}
aside img
{
width:14em;
}
</style>
</head>
<body>
<section id="topLeft"></section>
<section id="bottomRight"></section>
<section id="mainContent">
<h1>It's all in the detail</h1>
<article>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</article>
<aside>
<img src="images/blueGreen.png" />
</aside>
</section>
</body>
</html>

Wednesday, 1 June 2011

Simple layout #33

I haven't done a simple design layout in a while. Haven't had much time to be honest. This one is very simple. Two fonts, 1 colour, but there is an idea how very small.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 33</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Arvo:regular' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<style>
body
{
font:0.9em/1.5em Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:60em;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:6em;
background:#00A6F2;
padding:0.5em 0 0.5em 0;
}
#middlePart
{
min-height:2em;
}
#bottomPart
{
min-height:2em;
}
#pictureHolder, #wordedContent
{
float:left;
width:48%;
}
h1, h2, h3
{
font-family:'Arvo', arial, serif;
}
h1
{
font-size:4em;
line-height:1em;
}
h2
{
font-size:2em;
}
h3
{
margin:1.5em 0 1.5em 0;
font-size:1.5em;
color:#00A6F2;
}
p
{
font-family: 'Muli', arial, serif;
text-align:justify;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
</head>
<body>
<section id="topPart">
<header class="contentHolder">
<h1>Hello</h1>
<h2>And welcome to my website...</h2>
</header>
</section>
<section id="middlePart">
<section class="contentContainer">
<article id="pictureHolder">
<a href="http://www.ourecohouse.info/"><img src="http://www.publicdomainpictures.net/pictures/1000/nahled/1-1203254406i5t0.jpg" alt="An Egg by Petr Kratochvil" /></a>
</article>
<aside id="wordedContent">
<h3>Let's create something beautiful<br />
From something simple</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</aside>
</section>
</section>
</body>
</html>

Monday, 16 May 2011

Another radial gradient background

Here is another example of using a radial gradient for a background, just because it looks nice.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radial Gradient Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
background:#FF0000;
/* url(images/check.gif); */
width:100%;
height:100%;
}
.contentHolder
{
margin:0 auto;
width:800px;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
color:#FFFFFF;
}
#topPart
{
height:200px;
}
#middlePart
{
height:400px;
}
#bottomPart
{
min-height:200px;
}
</style>
</head>
<body>
<img id="background" src="images/radialGradientBackground.png" alt="gradient" />
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>

More use of radial gradients

Another very simple example of how to use radial gradients. In this case, to add lighting to your headers and footers.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fading Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#topHalf
{
height:50%;
background:#D4E4DF;
}
#bottomHalf
{
height:50%;
clear:both;
background:#B6CAC3;
}
#topContent, #bottomContent
{
margin:0 auto;
width:800px;
min-height:100%;
}
#topContent
{
background:url(images/fadingbgtop.png) no-repeat center top;
}
#bottomContent
{
background:url(images/fadingbgbottom.png) no-repeat center bottom;
}
</style>
</head>
<body>
<div id="topHalf">
<div id="topContent">
<h1>This is a sticky header example</h1>
</div>
</div>
<div id="bottomHalf">
<div id="bottomContent">
<h1>This is a sticky footer example</h1>
</div>
</div>
</body>
</html>

Use of grey and blue

In this very simple layout, I have applied a radial gradient to a plain background, added an arty black and white photo, and used a nice font for the title in blue. It hints at effective design technique.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resize Background Image</title>
<style type="text/css">
html, body
{
margin:0;
font-family:Sans-serif;
}

#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
background:#000000;
}

@font-face
{
font-family: 'zancleeYe/FSRegular';
src: url('fonts/zancle_eyefs-webfont.eot');
src: local('☺'), url('fonts/zancle_eyefs-webfont.woff') format('woff'), url('fonts/zancle_eyefs-webfont.ttf') format('truetype'), url('fonts/zancle_eyefs-webfont.svg#webfontDT7UNJnV') format('svg');
font-weight: normal;
font-style: normal;
}

#mainContent
{
margin:0 auto;
width:920px;
padding:10px;
}
h1, #footer
{
font-family: 'zancleeYe/FSRegular';
color:#B0E0E6;
}
h1
{
font-size:4em;
}
p
{
text-align:justify;
color:#FFFFFF;
font-size:0.8em;
}

#leftHand, #rightHand
{
position:relative;
float:left;
margin-right:10px;
padding:10px;
border:1px solid #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(scripts/PIE.htc);
}
#leftHand
{
width:360px;
min-height:374px;
}
#rightHand
{
background:url(images/japan.jpg) no-repeat;
width:480px;
height:374px;
}
#footer
{
clear:left;
padding-top:10px;
}
</style>

</head>
<body>
<img id="background" src="images/chalkBack.png" alt="chalkBack" />
<br /><br />
<div id="mainContent">
<h1>hello world!</h1>
<div id="leftHand">
<p>Lorem ipsum scripta apeirian perfecto cum ad. Patrioque cotidieque ex nam. Feugiat fastidii vis ne, te instructior voluptatibus mei, pro esse temporibus et. Cu pro possit tractatos, ea dictas eirmod erroribus ius, no nec putant facilisi euripidis. Dolore fierent vis in, pri cu prompta inciderint, vix maiorum ponderum recusabo et.</p>
<p>Ut est augue deseruisse, vix cu eripuit dignissim, duo quando aperiam lobortis ut. Intellegam delicatissimi in eos, ius labore placerat maluisset an. Ad corrumpit ullamcorper per, munere gloriatur mei an. Vix ei nonumy ubique fabulas, eros salutatus vis cu, eum regione voluptaria dissentias at.</p>
<p>Inani quaeque nam ne, cu usu simul maiestatis. At nostro posidonium usu. Puto scaevola philosophia ius ex. Sed eu dicam vulputate, epicuri nominavi officiis mei at. No doctus labores pro.</p>
<p>Eu est tale quot. An munere definitionem pri. Ei nonummy blandit petentium est, no mei sale dolores appetere. Error iriure cu eam, ne soleat bonorum dolores sea. Eos id oratio vulputate reformidans.</p>
</div>
<div id="rightHand">
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

Mobile friendly liquid layout #7

This example combines a tiled background texture, with a radial gradient over the top. This provides the effect of lighting.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mobile friendly liquid layout #7</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<style>
body
{
font-family:Sans-serif;
width:100%;
background:url(images/patch.gif);
}
body, a, a:active, a:hover, a:link, a:visited
{
color:#FFFFFF;
}
header, #text, footer, nav a
{
padding:1em;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
float:left;
width:33%;
min-width:26em;
}
#text
{
overflow:hidden;
line-height:1.5em;
}
footer
{
clear:left;
}
h1
{
font-weight:900;
font-size:4em;
text-transform:uppercase;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
</style>
</head>
<body>
<img id="background" src="images/radialGradientBackground.png" alt="windFarm" />
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Headline 1</h1>
<h1>Headline 2</h1>
<h2>Sub-Header</h2>
</header>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="http://www.effectivewebdesigns.co.uk/demo/mobile-friendly-liquid-layout-5.html#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
<footer>Footer</footer>
</body>
</html>

Thursday, 17 March 2011

Mobile friendly liquid layout #6

Another take on Mobile friendly liquid layout #5.

See demo.

<!DOCTYPE html>

<head>

<title>Mobile friendly liquid layout #5</title>

<!--[if IE]>

<![endif]-->

body

{

font-family:Sans-serif;

background:#FFFFFF;

width:100%;

color:#525252;

}

header, #text, footer, #tasters

{

padding:1em;

}

header, footer

{

height:8em;

}

header

{

float:right;

width:33%;

min-width:26em;

}

#text

{

overflow:hidden;

line-height:1.5em;

}

footer

{

clear:left;

}

h1, h2, h3

{

font-weight:900;

text-transform:uppercase;

color:#FFBC40;

}

{

font-size:4em;

}

{

font-size:2em;

}

#tasters article

{

display:block;

float:left;

width:20%;

}

</style>

</head>

<body>

<h1>Headline 1</h1>

<h1>Headline 2</h1>

<h2>Sub-Header</h2>

</header>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>

<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>

<li>Aliquam tincidunt mauris eu risus.</li>

</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

</article>

<article><h3>services</h3><p>Introductory text about services</p><p><a href="#">more...</a></p></article>

<article><h3>portfolio</h3><p>Introductory text about portfolio</p><p><a href="#">more...</a></p></article>

<article><h3>contact</h3><p>Introductory text about contact</p><p><a href="#">more...</a></p></article>

</section>

<footer>Footer</footer>

</body>

</html>

Tuesday, 15 March 2011

Mobile friendly liquid layout #5

Haven't done one of these in a while so here goes.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mobile friendly liquid layout #5</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#000000;
width:100%;
color:#FFFFFF;
}
header, #text, footer, nav a
{
padding:1em;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
color:#FFFFFF;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
float:left;
width:33%;
min-width:26em;
}
#text
{
overflow:hidden;
line-height:1.5em;
}
footer
{
clear:left;
}
h1
{
font-weight:900;
font-size:4em;
text-transform:uppercase;
}
h1:nth-child(2), h3
{
color:#FFBC40;
}
</style>
</head>
<body>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Headline 1</h1>
<h1>Headline 2</h1>
<h2>Sub-Header</h2>
</header>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
<footer>Footer</footer>
</body>
</html>

Thursday, 18 November 2010

Use of Bokeh

Bokeh are those pictures we see of blurred spots of light. They are a very useful texture, common among good web designs. Below is an example of how they can be used.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Use of Bokeh</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
font-size:0.96em;
background:#000000;
color:#CCCCCC;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
height:40px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#CCCCCC;
text-align:center;
text-decoration:none;
width:80px;
height:40px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
#navigation a:hover
{
background:url(http://farm5.static.flickr.com/4081/4995562250_2dfe171a8d_t.jpg) repeat-x;
}
h1, h2
{
font-family: Georgia, Serif;
font-weight:lighter;
font-style:italic;
}
h1
{
font-size:4em;
}
h2
{
text-align:left;
font-size:3em;
}
#content
{
background:#000000 url(http://farm5.static.flickr.com/4153/5000536973_2d2634aba3_b.jpg) no-repeat right top;
margin-left:20px;
margin-right:20px;
padding:10px;
color:#FFFFFF;
}
#content p
{
text-align:justify;
width:400px;
}
#highlights
{
margin-left:10px;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
text-align:justify;
}
#footer
{
clear:both;
}
#footer p
{
text-align:center;
padding-top:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="navigation">
<a href="#" class="subMenu">home</a>
<a href="#" class="subMenu">products</a>
<a href="#" class="subMenu">services</a>
<a href="#" class="subMenu">about</a>
</div>
<div id="content">
<h1>Important Header</h1>
<h2>Less important header</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
<div id="highlights">
<div class="highlight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="highlight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="highlight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div id="footer"><p>This could be a very long footer.</p></div>
</div>
</body>
</html>

Wednesday, 20 October 2010

Basic font stack

Here is an example of a basic font stack using tried and tested design principles. They are a great start to a web design. Essentially, all you would need to do for your own site is change the font-family references with the CSS to fonts you like and you are away. Then you can start addressing colour, but the sizes are a good idea to keep, maybe just play with the overall font-size within the body declaration. Have fun!

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font stack Using Design Principles</title>
<style type="text/css">
body
{
margin:0 auto;
   width:800px;
   line-height:140%;
   font-size:85%;
}
h1, h2, h3, h4
{
   font-family:Georgia, Times New Roman, Times, serif;
   font-weight:normal;
}
h1, h2
{
   text-transform:uppercase;
}
h1
{
   font-size:5em;
}
h2
{
   font-size:4em;
}
h3
{
   font-size:3em;
}
h4
{
   font-size:2em;
}
p, blockquote, strong, ul, ol, input, small, span
{
   font-family: Arial, Helvetica, sans-serif;
   font-style: normal;
   font-variant: normal;
   font-weight:normal;
   letter-spacing:0.1em;
}
blockquote
{
   text-indent: -0.8em;
   font-size: 1.5em;
}
p
{
   font-size: 1.25em;
   margin-top: 1.25em;
   margin-bottom: 1.25em;
}
input
{
   font-size: 1.0em;
}
small
{
   font-size: 0.75em;
}
span
{
   font-style: italic;
}
strong
{
   font-variant:small-caps;
}
p.justified
{
   text-align:justify;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Pellentesque habitant morbi <small>tristique senectus et netus et malesuada</small> fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p class="justified">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <strong>Vestibulum tortor quam,</strong> feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<blockquote>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ol>
</body>
</html>

Friday, 10 September 2010

Simple layout #4

This is the kind of design which could work as starting position for, as an example, a designer furniture shop. There is a little more code than I would usually try and use on this blog. I wanted to create a gradient using pure CSS rather than an image which meant adding the IE only code. Other than that, it's quite simple.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box design</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
background-color: #F3F3F3;
background-image: -moz-linear-gradient(top, #F3F3F3, #FFFFFF); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F3F3F3),color-stop(1, #FFFFFF)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F3F3F3', EndColorStr='#FFFFFF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#F3F3F3', EndColorStr='#FFFFFF')"; /* IE8 */
}
#container
{
margin:0 auto;
width:800px;
}
h1, h2
{

font-family:Georgia;
font-weight:lighter;
}
h1
{
text-align:center;
font-size:4em;
}
h2
{
text-align:left;
font-size:2em;
margin-left:20px;
margin-top:1em;
}
.box, .twoBox
{
float:left;
min-height:260px;
}
.box
{
width:260px;
}
.twoBox
{
width:520px;
}
#box1
{
background:#77F9CF;
}
#box2
{
background:url(http://farm5.static.flickr.com/4125/4945802498_a53b3eedc5.jpg);
}
#box3
{
background:#7DD0F8;
}
#box4
{
background:#FFA77A;
}
#box5
{
background:#000000;
}
p
{
margin:20px;
text-align:justify;
line-height:140%;
color:#FFFFFF;
}
#footer
{
clear:left;
text-align:center;
color:#A3A3A3;
font-size:0.8em;
}
</style>
</head>
<body>
<h1>The Heading</h1>
<div id="container">
<div id="box1" class="box">
<h2>Sub</h2>
<h2>Heading</h2>
</div>
<div id="box2" class="twoBox">
</div>
<div id="box3" class="box">
</div>
<div id="box4" class="box">
</div>
<div id="box5" class="box">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
</div>
<div id="footer">This could be quite a long footer</div>
</div>
</body>
</html>

Wednesday, 25 August 2010

Simple layout #2

Here is the second design template. There is no real content area. I've left it down to you how you want the main content to display.

See demo.

Well, here goes:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:70%;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
margin-left:120px;
font-size:4em;
font-weight:lighter;
color:#FFFFFF;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align: center;
background:#000000;
height:40px;
width:100%;
opacity:0.9;
filter:alpha(opacity=90);
}
#nav ul
{
margin:0 auto;
width:920px;
}
#nav ul li
{
float:left;
list-style:none;
}
#nav ul li a
{
width: 100px;
   height:28px;
   padding-top:8px;
   padding-bottom:4px;
   padding-left:30px;
   padding-right:30px;
display: inline-block;
letter-spacing: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
color:#FFFFFF;
text-decoration:none;
}
#nav ul li a:hover
{
background:#FF0000;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4089/4945221855_b1675bb80a.jpg" alt="Tiffany Camera 2" />
<br /><br />
<div id="container">
<h1>The Header</h1>
</div>
<div id="footer">
<div id="nav">
<ul>
<li><a href="#">First item</a></li>
<li><a href="#">Second item</a></li>
<li><a href="#">Third item</a></li>
</ul>
</div>
</div>
</body>
</html>

Mick Redman