Layouts Archive

12 Killer Tips for Designing in the Browser

12 Killer Tips for Designing in the Browser

screenshot

How do you mockup a website?

The typical workflow starts in Photoshop and then transitions over to HTML and CSS to mimic the original PSD as best as possible. However, there is a growing trend in web design to scrap the Photoshop step in favor of creating the initial comp right in the browser with your favorite editor. I’m sure right about now your head is buzzing with reasons why this approach would limit your design, but there’s actually a lot more you can do right in the browser than you might think. This article will provide you with the tools and tricks you need to create brilliant, working mockups as your very first step in the design process.

January 8th, 2010 Posted in CSS, Layouts
10 Techniques for a Fantastic Footer

10 Techniques for a Fantastic Footer

A strong footer can leave your visitors with a lasting positive impression.

There are tons of creative ways to boost the cool factor of your footers by focusing on both form and function. Below you’ll find 10 simple ideas to inspire you towards footer greatness.

January 5th, 2010 Posted in Graphics, Inspiration, Layouts, Navigation
10 Expert Tips for Designing a One Page Portfolio

10 Expert Tips for Designing a One Page Portfolio

Once upon a time, designers would lug unwieldy physical portfolios from interview to interview to showcase their work. This tactic is steadily being replaced with sending out emails containing links to an online portfolio. A portfolio website is becoming an essential marketing tool for every designer and can be the single biggest impression upon which you will be judged and hopefully, hired.

This article contains several tips and examples to help you create an amazing single page portfolio.

November 28th, 2009 Posted in Inspiration, Layouts
10 CSS Form Examples

10 CSS Form Examples

Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you’ll be creating stunning CSS forms in no time at all.

March 12th, 2008 Posted in Articles, CSS, Layouts
10 CSS Table Examples

10 CSS Table Examples

Today we’re going to take a look at a selection of beautiful tables styled using CSS. These are sourced from a variety of different sites. If you’re interested in learning how to do this yourself, be sure to take a look at a few of our CSS tutorials!

August 30th, 2007 Posted in Articles, CSS, HTML, Layouts
One Column Slider Layout

One Column Slider Layout

So you know what the aim of this tutorial is, take a look at the end result. This is a fairly technical website, but uses the Moo.fx javascript library for the effects. Make sure that it is downloaded and installed before getting started.

Setting up Moo.fx

First of all, you need to download this Javascript package from the Moo.fx site. Make sure that this is included in the head of each page.

The HTML

You can download a copy of the HTML for the page to take a look and see how the effect is achieved.

The CSS

body {
	color: #222;
	font: 62.5% verdana, arial, helvetica, sans-serif;
	margin: 5px 0 0;
	padding: 0;
	text-align: center;
}
h3 {
	background: #000;
	margin: 5px 0 0;
	padding: 1px 0;
	height: 17px;
	width: 600px;
	cursor: pointer;
	font-size: 0.99em;
}
h3 a:link, h3 a:visited {
	color: #fff;
	
	padding: 2px 8px 1px;
	-moz-outline-style: none;
	display: block;
	height: 14px;
	width: 330px;
	text-decoration: none;
}
#container {
	
	width: 666px;
	text-align: left;
	margin: 0 auto;
}
#header {
	text-align: center;
}
#content {
	padding: 0 10px 25px 33px;
}
p {
	margin: 0 0 1px;
	padding: 5px;
	line-height: 15px;
}
div.wrapper {
	background-color: #EBEBEB;
}
#content div {
	margin: 0;
	padding: 0;
	height: 1%;
}
.stretcher {
	background: none !important;
}

Put it all together

Make sure you reference Moo.fx and the style sheet in the head of your HTML document, and you should be ready to go! Adding new sections to the layout is as simple as adding a new heading and following the structure which is already there.

July 31st, 2007 Posted in Articles, Layouts
Subscribe
Membership