Webtint

Logo Design Colorful Inspiration: Purple

Johnny — Mon, 08 Mar 2010 20:32:41 +0000

Purple

Purple is a general term used in English for the range of shades of color occurring between red and blue. In additive light combinations it occurs by mixing the primary colors red and blue in varying proportions. In subtractive pigments it can be equal to the primary color magenta or be formed by mixing magenta with the colors red or blue, or by mixing just the latter two, in which case a color of low saturation will result. Low saturation will also be caused by adding a certain quantity of the third primary color (green for light or yellow for pigment). There is a disagreement over exactly which shades can be described as purple, some people preferring more precise terms such as magenta or heliotrope for particular shades. A difference in retinal sensitivity to red and blue light between individuals can cause further disagreement.

- Wikipedia

Roundup

Logo Design Colorful Inspiration: Blue
Logo Inspiration #2: 50 Fantastic Logo Concepts
Keeping it Colorful: The Theory of Color

Apple Design: A History

Johnny — Sat, 06 Mar 2010 15:25:24 +0000

It all started in 1976

Steve Jobs and Steve Wozniak formed Apple Computers in 1976, starting a whole new brand which has went on to affect our digital lives profoundly, with iPods and Macbooks, they changed how things were made and more importantly (in recent years) how things are designed. In recent years Apple has reached nearly pop culture status with it’s iPod and computers.

However, Apple hasn’t always been a master of product creation, and a lot of Apple’s early stuff really didn’t concentrate on designing products, but rather how they looked. In fact, when creating the Apple I, design definitely wasn’t the first thing on Steve Wozniak’s mind.

The progression from Apple I to Apple III, showing how Apple changed the design as the company became more prosperous.

Of course, Apple wasn’t only thinking about the design of its products after the Apple III, but more along the lines of how computers would work in the future. In 1983 Apple released the Apple Lisa, introducing a GUI interface with things like a desktop, a mouse and icons. Apple continued its adventures in the realm of design, but it wasn’t really until 1997 or 1998 when Apple started churning out products with real design value.

Apple’s Modern Era

From 1998 onwards Steve Job returned to Apple after having left in 1986. More importantly though (for design anyway), in 1997 Apple hired Jonathan Ive as the head of the Apple Industrial Design Group. Ive has went on to be the creator of product designs like the ubiquitous iPod and the unibody Macbook Pro.

A Quick Product History

See further down the page for an evolution on Apple’s design process.

1997-2000

From 1997 to 2000 Apple was trying to get back on its feet, and even made a deal with Microsoft to get Office on Macs. In 1998 Apple introduced the iMac and the the following year the Power Mac G4.

2001-2004

2001 was a huge year for Apple in a way, as they introduced the iPod, Mac OS X and the Apple Retail Store. All of these things have gone on to be huge. In 2003 Apple released the Power Mac G5. Subsequently in 2004 the iMac G5 was released, based on the Power Mac G5’s technology.

2005-2008

In 2005 Apple changed to Intel processors. The following year the first products implementing Intel chips were released, including the iMac and Macbook Pro. In 2007 Apple Computers changed its name to simple “Apple”, and announced the iPhone. To coincide with the iPhone, the iPod Touch was released.

2008-2010

Apple continues to update their main product to improve them, including the iPod, Macbook Pro, iPhone, and the iPod Touch. Also they released the iPad in 2010 (with no Flash support).

A Timeline of Product Design

This timeline provides key products which show the evolution of Apple’s Design in recent times (when most design ‘revolutions’ happened).

Design Process

Over time Apple has converged the design of their products. From the original iPod, iMac and Powerbook vary a lot in their designs. As time progresses the product line’s design process has merged, concentrating on minimalism in order to provide their users with the most usable and attractive experience.

The design process of Apple’s products have certainly changed a lot over the years; in the earlier years of Apple Computers design was probably one of the last things on their minds when creating their products. However nowadays Apple has got a sort of reputation for beautiful products, and they’re determined to fulfill that reputation.

On top of that, as time has progressed technology has got a lot better, and this gives Apple more design opportunities. This has allowed them to create thinner products that look awesome.

Creating a Brand

Apple has succeeded in turning their company into a brand, with products that have unified design principles. Compare Apple to Microsoft: Microsoft isn’t a brand, it’s just a company that creates software for other companies to use. Apple on the other hand doesn’t allow other companies to use their software. This has allowed them to create a design that is instantly recognizable, and the black/silver modern look that Apple’s products have has became their sort of trademark colors, showing modernity and class.

Further proof that Apple is a brand comes from the fact that their website and logo match their product designs, and have changed to match them in recent times. I think that Apple is a brilliant example of how people will buy a product because of how it looks and how it’s branded. People will keep buying Apple products because, well, they’re Apple products, and generally they look amazing.

The Apple design has pushed the boundaries of how things are designed. The iPhone has been praised over other handhelds because of its UI and product design, and most smart phones are compared to the iPhone when released. Hopefully in the future they’ll continue to break into new design concepts, and improve gadgetry by both providing competition for everyone else, and giving us their own products to use.

A Decade of Design: What 10 Years Did to the Web
Is HTML 5 really going to replace Adobe Flash?
22 Examples of awesome steampunk design

How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout

Johnny — Sat, 27 Feb 2010 01:24:38 +0000

Graceful Degradation

Since HTML5 and CSS3 aren’t going to be supported in all the browsers, especially not older ones like IE6, we can try and make it work in everything, but it won’t look the same in all of the browsers. For instance, rounded corners wont work in IE or Opera, but it wont affect the usability of that web page. Likewise, the flexible box model only works in Firefox and Webkit.

What we can do is we can set up a failsafe so that the web page will work in every browser correctly, but not in the same way. For instance, I made it so that in Webkit browsers, the page uses the flexible box model. However everywhere else it just switches to the old fashioned way and floats the elements to either side to create columns.

Overall this is the best way to handle issues like this. Instead of compromising a users experience, just make it work but in a different way. The experience doesn’t have to be linear across all browsers.

A HTML5 Document

The basic HTML5 layout, or the skeleton of it if you will, is nothing that new. Your mind will not be blown.







HTML5 and CSS3 Layout

One of the most notable differences is the addition of the new doctype, , which is way easier to use than the old ones HTML has provided us with. Then we just do all the normal stuff, such as define the charset, title and link.

New and Fancy

Traditionally web pages are designed like this.

With HTML5 we replace all those divs with specific elements, such as

and

. This is a big step up from having to define our own elements with id’s and stuff, and makes HTML a lot more specific. When HTML4 was released, it wasn’t released with the web of 2010 in mind. HTML5 on the other hand was.

Don’t think the div is an unnecessary piece of baggage on the HTML5 specification, as it still has as many uses now as it did when HTML4 was released. Most HTML5 tags work in Webkit (well, in Chrome 5 anyway), so that’s the browser I’ve been using to make all of this flow together. However, Firefox doesn’t center the flexible box model correctly, and IE is, well, IE, so I’ve had to throw in a bunch of hacks to make this work correctly.

First off, stick this script in the head of your document.

HTML5 tags wont work in IE, so the little javascript bit fixes that. The CSS files are there so we can fix some errors later on with the design. Oh, and by the way, this is the pretty basic design we’re going to be doing today. I’ve tried to keep it simple so that you can get a good idea of what HTML5 and CSS3 can do, rather than over complicating the process.

The Body

The body is probably the bit that you’re most worried about. HTML5 tags are a tad different from their HTML4 counterparts, but really only by their names with most of the new tags acting like

and tags.

Header

Lets work on the header. We’re going to be using the

tag for this one. It’s new to HTML5, and is defined as the following:

The header element represents a group of introductory or navigational aids.

So basically the header tag contains some navigational elements and the logo or introductory text. For the navigation we’ll be using the

tag, and we’ll just be using a

for the logo. So the skeleton of the

element is going to look a bit like this:


	
		...
	
	
		...

Then it’s just a case of adding the content to these elements. For the #logo div, we can stick a logo image in, or we could use headings. If you’re going to use headings, and have multiple headings (i.e.

and

), we can use the tag. The definition for the tag is..

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

So for example, you could have this in the logo area:


	Webtint
	Web Development Blog

‘course, I’m just going to use an image instead, but heck, if you want to use the logo I stuck together feel free by getting it from here.

Inside the

we’ll just use an unordered list.

		
			home
			tutorials
			resources
			articles
			forums
			contact

The Content

For the content area, I’ve went for a structure like this:


	
		
			
				 ...
				 ... 
			
			 ... 
			 ... 
			


		
	
	
		...

New tags that you’ve probably noticed include the

and

tags. There’s also an

tag nested inside the section, and a

tag as well.

First off, the section tag is defined as “The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading”. Since the

is going to encompass the articles titles and their summaries,

seems like a suitable tag to use here.

The

tag is defined as “self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable”, for example a blog post, so it’s perfect for the usage we’re going to be using it for. The

tag inside that is defined as “The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like”.

Finally, the

tag is defined as “The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography”. This is great, because the sidebar is related to the content, while being separate.

After all that it’s just a case of adding the content. Here’s one I made earlier.

The Title
Posted by Johnny on February 28th

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.
Comment on this (5) • Tweet this • Stumble Upon

The Title
Posted by Johnny on February 28th

The Footer

The footer is a lot easier to make, and I think that generally I’ll leave this up to you to expand. For the time being though, I’ve decided to just go with a simple copyright. You could add more to these columns if you wanted.



	
		Copyright Webtint © 2010

The final HTML code looks a bit like this:

HTML5 and CSS3 Layout

home
tutorials
resources
articles
forums
contact

The Title
Posted by Johnny on February 28th

Cascading Stylesheets Numero 3

Now at the minute, if you go and look at your document, you’ll see that it isn’t looking like much, and that’s because we haven’t added any CSS yet. The CSS file I’ve compiled is very basic and simple, adding only the bare essentials in order to make it as compressed as possible. Here’s the full CSS file for your amusement:

body {
	font-family: Arial, Helvetica, sans-serif;
	background: #f1f1f1;
	padding: 0;
	margin: 0;
	color: #222;
	font-size: 62.5%;

}

header {
	width: 960px;
	margin: 0px auto;
	display: block;

}
	#logo {
		padding: 35px 0px 35px 40px;
		background: #fff;

		-moz-border-radius: 0.8em;
		-webkit-border-radius: 0.8em;

	}
	#logo a:active {
		background: transparent !important;
	}

nav {
	width: 950px;
	margin: 0px auto;
	overflow: hidden;
	font-size: 2.0em;
	font-weight: bold;
	padding: 0px 0px 0px 10px;

	display: block;
}

	nav ul {
		padding: 0;
		margin: 0;
	}

	nav ul li {
		list-style: none;
		float: left;
		padding: 0px 35px 0px 10px;
	}
	nav a {
		text-decoration: none;
		color: #000 !important;
		display: block;
		padding: 20px;
	}
	nav a:hover {
		color: #444;
		background: #fff;
	}

#content {
	width: 960px;
	margin: 0px auto;

	display: -webkit-box;
	-webkit-box-orient: horizontal;

	font-size: 1.4em;

}

footer {
	display: block;
}
	#main-footer {
		width: 960px;
		margin: 0px auto;
		padding: 15px;
		font-size: 1.8em;
		font-weight: bold;
		text-align: center;
	}

.hfeed, x:-moz-any-link, x:only-child {
	float: left;
}

aside, x:-moz-any-link, x:only-child {
	float: right;
}

article {
	text-align: justify;
	line-height: 1.5em;
	color: #222;

	display: block;
}

#main-content, .hfeed {
	padding: 10px 20px 20px 40px;
	width: 500px;
	background: #fff;

	-moz-border-radius-bottomleft: 0.8em;
	-webkit-border-bottom-left-radius: 0.8em;
	-moz-border-radius-topleft: 0.8em;
	-webkit-border-top-left-radius: 0.8em;

	display: block;

}

aside {
	padding: 10px 20px 20px 40px;
	width: 340px;
	background: #fff;

	-webkit-border-bottom-right-radius: 0.8em;
	-moz-border-radius-bottomright: 0.8em;
	-webkit-border-top-right-radius: 0.8em;
	-moz-border-radius-topright: 0.8em;

	display: block;

}
	aside ul {
		list-style: none;
		padding: 0px 0px 0px 6px;
	}

	aside ul li {
		line-height: 1.5em;
		font-size: 1.2em;
		border-bottom: 1px dotted #d9d9d9;
	}
	aside ul li a {
		padding: 10px 0px 10px 10px;
		display: block;
		font-weight: bold;
	}
	aside ul li a:hover {
		background: #f1f7f9;
	}

/* Some Headings for You */
h1 { font-size: 3.0em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.8em; }

hgroup h3, hgroup h3 a { color: #9aa8ad !important; }
hgroup h1, hgroup h1 a { color: #51add3 !important; }
h3 a { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { line-height: 0.5em; }

a {
	color: #2a708e;
	text-decoration: none;
}

a img {
	border: 0;
}

a:visited { color: #104258; }
a:active { background: #eaf7fc; }
a:hover { color: #0c1e2f; }

hr {
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	border-top: 1px dotted #d9d9d9;
}

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

You may have noticed the few lines that go like this:

.hfeed, x:-moz-any-link, x:only-child {
	float: left;
}

aside, x:-moz-any-link, x:only-child {
	float: right;
}

These are firefox hacks, as firefox was handling the flexible box model in a weird way, so I decided just to use the old fashioned way, and use floats. Speaking of the flexible box model, click here to learn more about it. Since the flexible box model has only been implemented in webkit browsers in my CSS, the only references you’ll see to it are these:

	display: -webkit-box;
	-webkit-box-orient: horizontal;

Another CSS3 feature I’ve included is rounded corners, which you may see floating about the script in forms like this:

	-webkit-border-bottom-right-radius: 0.8em;
	-moz-border-radius-bottomright: 0.8em;
	-webkit-border-top-right-radius: 0.8em;
	-moz-border-radius-topright: 0.8em;

Rounded corners are only really supported in Firefox and Webkit at the minute, so that’s the only places they’ll work. Another thing you might notice is that on all the new HTML5 tags, I’ve added display: block;. This is because firefox (again) was acting up and this seemed to remedy the problem. This leads us on to our next problem. Internet Explorer

Internet Explorer Hacks

You might remember earlier that we included some links to stylesheets for IE hacks. You’re going to want to create those files now. A lot of you may not know this, but I have a great disdain for all things Internet Explorer, mainly because of it’s awful support for web technologies. So lets try and fix that up with a little CSS magic.

In the iehacks.css file, add this:

#content {
	background: url(images/spacer.gif) repeat;
}

aside {
	float: right;
	padding-top: 40px;
}

.hfeed {
	float: left;
	padding-top: 40px;
}

hr {
	border-bottom: 1px solid #fff !important;
	border-left: 1px solid #fff !important;
	border-right: 1px solid #fff !important;
}

This is just to fix a few problems with alignment and all that. This applies to all versions of IE. The spacer.gif image is a 1×1px white square. You might want to make that or save it from here. After that, open up ie67hacks.css and add the following:

aside ul li {
	position: relative;
	right: 40px;

}

Again, alignment issues. After that it’s just a case of putting it all together and hoping it stays put. For all you out there who don’t want to go to the bother of picking things out from this article, I’ve stuck together a demo and a downloadable zip for you below.

Coding a Web Layout in XHTML and CSS
8 Awesome Things That CSS3 Will Do
How to Make a nice, eye catching web/blog layout

Starting a Blog: Making a Good Shot at it

Johnny — Tue, 23 Feb 2010 13:19:17 +0000

Don’t assume you know everything

When I started my first blog, I assumed I knew everything. I’d been in the web design community for a good amount of time in forums and stuff like that, and I felt like I had nothing else to learn. So my first lesson to you is:

Don’t just assume you know everything. Only a fool thinks they know it all.

Always try and learn new stuff. After all, knowledge is power. This is especially important in the web design community where ideas are constantly created and people are making new stuff all the time. It’s important that you stay up to date with what’s happening and then try and take from it what you will. This way you’ll improve not only your blogging but your basic knowledge of what’s going on in the niche you work in.

Don’t burn out

When I started my blog, it was like, I had so many ideas, I just wanted to get them out there to show everyone. After about a month though I burned out, and all my ideas didn’t really count for anything because all I had was a concentrated amount of traffic in a small area of time that died out after I ran out of things to post. So that’s what our second lesson is today folks:

Don’t think you need to post something as soon a you write it. As tempting as it might be, saving your posts could help get you out of a sticky situation, such as lack of ideas or a period when you just can’t post.

Now obviously if you’re a very creative person and you can just come up with idea after idea like some sort of machine, it’s okay for you to post, post and post. Posting everyday will dramatically improve your traffic, but that’s not for everyone. If blogging is just a hobby for you at the moment posting everyday might not be plausible, and saving posts for those times when you can’t post is a great idea.

Patience is a virtue

If you’re anything like me (I’ll assume you are), whenever you have an idea you want to follow it through immediately, and try and get it working as soon as possible. So as a new blogger you might want to get your projects out the door as soon as possible (this even goes for posts). This brings us to our third rule.

Patience is a virtue, and teamed with persistence you’ll be able to get far in this world

When I started this blog I wanted to get it up and going really quickly, and this is probably what stopped me from having a good start in the blog world. It’s important that you don’t give in to these urges and set everything up correctly.

Quick Tips

Get a good design and code it to be fast and efficient
Make sure everything is done, such as the sidebar and the gaps in your CSS
Install all the plugins that you’re going to require
make it expandable so you don’t have to redesign when you get bigger

Another important thing to remember is if this is your first blog you’re not going to hit the big time straight away. Just keep churning out quality content and eventually you’ll get noticed. Of course to get noticed, you might need a little help..

Take social media seriously

When I first started blogging, the idea of sharing and socializing seemed a bit odd. I mean, blogging is just about writing, right? It’s about me helping people out in some way or another. Of course it was only after a few weeks that I realized how important socializing really is.

Now there are a ton of ways that you can socialize with your community, but I’ve found that the best way is with Twitter, crowd sourcing websites like Digg, and Stumble Upon. Twitter and Stumble Upon especially, giving you constant traffic often. Digg is pretty good if you have a good article which can hit the front page.

URL Shorteners are becoming a more popular way to get traffic to your site. I personally use Su.pr, Stumble Upon’s proprietary URL Shortener as it comes with the bonus of adding your link to stumble upon, where you can end up getting tons of visitors.

Put your back into it

This sort of ties into my other points. To make something successful you have to put work into it. Don’t just sit back and expect the visitors to flow in. Keep posting and try and make the most of what you have. In the past I’ve had websites where I’ve gave up because I haven’t had success as fast a I would’ve liked, and it’s not uncommon for someone to just say “Screw it” and give up because their blog isn’t improving in levels of subscribers or visitors.

Of course this kind of attitude isn’t going to get you anywhere. Once you make your blog stick with it. I remember starting a website about a year or 2 ago, and giving up after a few weeks. About 6 months later I was left wondering what it could’ve been if I’d stuck with it, which is sort of what spurred me to start this blog. So that’s sort of what our fifth little tip is about:

Stick with what you build, even when times are tough. Put work into it and try and make it better, instead of starting again.

Make a schedule

A schedule for posting and doing stuff is great. At the minute, for me, things are very hectic when it comes to the site, and this can cause a bit of stress and just a general cluttered environment. Although I don’t obey this little rule, it doesn’t mean you shouldn’t.

A schedule will not only benefit you but also your readers. Users like when things are nice and regular, like, so they know that every Tuesday there’ll be a post, and you’ll know “Oh, I don’t have to work on that until Sunday because I don’t have to post it till Tuesday”. This can take a lot of stress of you and will definitely have a positive outcome on the amount of work you perceive yourself to have.

So what are your thoughts? What do you think are the most important blogging lessons you’ve learned? Leave a comment below.

10 Things: How to Get More Exposure in the Blogosphere
7 Ways to Increase the Usability of Your Website
How to be a Better Web Designer With the Help of Avatar

Logo Design Colorful Inspiration: Blue

Johnny — Sun, 21 Feb 2010 14:37:58 +0000

Why Use Blue?

Designer’s often use blue because of its calming ability and its neutrality in design. It can provide a clean canvas for all your designs, or it can be the paint you use to make your design come to life. It goes with most other cold colors pretty well, giving you a lot of flexibility.

Blue is a colour, the perception of which is evoked by light having a spectrum dominated by energy with a wavelength of roughly 440–490 nm. It is considered one of the additive primary colours. On the HSV Colour Wheel, the complement of blue is yellow; that is, a colour corresponding to an equal mixture of red and green light. On a colour wheel based on traditional colour theory (RYB), the complementary colour to blue is considered to be orange (based on the Munsell colour wheel). The English language commonly uses “blue” to refer to any colour from navy blue to cyan. The word itself is derived from the Old French word bleu.
- Wikipedia

Roundup

Logo Design Colorful Inspiration: Purple
Keeping it Colorful: The Theory of Color
Logo Inspiration #2: 50 Fantastic Logo Concepts

Future of CSS: The Flexible Box Model

Johnny — Tue, 16 Feb 2010 18:47:02 +0000

Support

As always with this new fangled CSS, support is pretty thin on the ground. Here’s a list of the properties and how they’re supported, in no particular order. (As of February 15th, 2010)

	Gecko Firefox	Webkit Chrome/Safari	Trident Internet Explorer	Presto Opera
box-flex	Yes*	Yes^✝	No	No
box-direction	Yes*	Yes^✝	No	No
box-align	Yes*	Yes^✝	No	No
box-flex-group	Yes*	Yes^✝	No	No
box-lines	Yes*	Yes^✝	No	No
box-ordinal-group	Yes*	Yes^✝	No	No
box-orient	Yes*	Yes^✝	No	No
box-pack	Yes*	Yes^✝	No	No

* Only Supported with the prefix -moz (i.e. -moz-box-pack ^✝ Only Supported with the prefix -webkit (i.e. -webkit-box-pack)

‘course, as you’ve probably realised it wouldn’t have mattered what order they were in anyway, since only Firefox and Chrome/Safari support the flexible box model at this point. This is a bit troublesome, since we can’t go ahead and use this in all our projects because it’s not supported by Internet Explorer (>60% of market) or Opera (about 2%). In the future though this is really gonna improve how we make websites (when it’s supported by everyone).

In fact the way that Gecko and Webkit support the box model is completely different, so I’ve tried to give you as much solid information as I can from observations on both platforms.

How it Works

Nowadays websites are often split into many columns, to accomplish a sort of newspaper-esque layout. Of course, we can accomplish this with the float property in CSS2, but CSS2 really wasn’t designed with an easy way to make columns. Traditionally web designers would design columnar layouts like this:


#left-column {
      float: left;
}

#right-column {
      float: left;
}

Initiating your Box

With the flexible box model things are a little different, but different in a good way. Words can’t describe how wonderful I think this specification is, so I’ll use code instead. Here’s a piece of code that I want to columnize, so to say.


	
		This is some content.
	
	
		Only there are four columns!
	
	
		Four columns!
	
	
		Amazing.

And here’s the CSS:

.container {
        width: 1000px;

	display: -webkit-box;
	display: -moz-box;

	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;

}

.blue {
	background: #357c96;
	font-weight: bold;
	margin: 2px;
	padding: 20px;
	color: #fff;
	font-family: Arial, sans-serif;
}

It’s as easy as that! (It’ll be even easier when we don’t have to do browser specific elements). You can totally ignore the .blue class, that’s just some styling. The container class sets the display mode to box, and sets box-orient to horizontal. This gives you something like this:

You can also set the box orient to vertical if you wish for vertically stacked divs.

Box Flex

As you probably have already figured out, the actual structure of these elements looks like this:

As you can see there’s a bit of a gap at the end of the 4th column element. This is where the box model is so useful. Whereas before you would have to juggle around with pixels until you finally got a good combination where the columns filled the space. With the flexible box model you can stretch out certain elements to fill the space.

.flexible {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
}

If we were to add this flexible class to the 3rd column element, you would end up with this:

The remaining space is divided amongst the elements by their box-flex. Since there is only one box-flex element, all the extra space is given to the element with a box-flex of 1. If you had 2 box-flex elements with a value of 1, the space would be distributed evenly between these two.

For instance, lets say you gave the first 2 column elements in our example the ‘flexible’ class. Both elements would have a box-flex value of 1, so you would end up with something like this:

If you’re more mathematically minded you can think of it as if the two columns are in a 1:1 ratio, so the space is spread out in a 1:1 ratio.

So, for example, if there was 400px of extra space, each element would get an extra 200px. Similarly if one of the box-flex properties were 3, the two elements would be in a 3:1, so one box would get 300px extra, while the other would gain 100px. This allows you to easily expand your boxes to your needs.

Orientation

Orientation i another key element to the flexible box model. Lets take a look at our earlier example. We could reverse the order (so it would be going 4, 3, 2, 1 instead of 1, 2, 3, 4) by adding this to our container element:

        -moz-box-direction: reverse;
        -webkit-box-direction: reverse;

You can use the box-ordinal-group element to alter the position of columns too. Simply put, the element with the highest box-ordinal-group will be moved to the end. If you have set box-direction to reverse, the end will be the left hand side, otherwise the right hand side will be the end. An example of a box ordinal group may be as follows:

        -moz-box-ordinal-group: 2;
        -webkit-box-ordinal-group: 2;

Alignment

Aligning boxes is pretty easy to do. There are two properties you want to watch out for. box-align and box-pack.

If you have your boxes orientation set to horizontal, then box-align will decide how that element is aligned vertically inside your box. Similarly if it’s set to vertical, it will decide how its aligned horizontally. The box-pack element is the complete opposite, applying to horizontal when your box is orientated horizontally, and vertical when your box is orientated vertically. Using both you can center your box elements in any way you want when there’s some extra space left over.

A Recap

Here are all the elements again, their default properties and the properties you can apply to them.

	Default	Possible Values
box-flex	0.0	number
box-direction	normal	normal \| reverse \| inherit
box-align	stretch	start \| end \| center \| baseline \| stretch
box-flex-group	1	integer
box-lines	single	single \| multiple
box-ordinal-group	1	integer
box-orient	inline-axis	horizontal \| vertical \| inline-axis* \| block-axis* \| inherit
box-pack	start	start \| end \| center \| justify

*inline-axis and *block-axis are equivalent to horizontal and vertical respectively.

And here’s a quick reference table so you can see what each element does.

	Function
box-flex	Allows the boxes children to “flex out” and expand into the space left over at the end. Can be put into a ratio by giving one element a box-flex of 2, and another a box-flex of 1, giving them a 2:1 ratio
box-direction	The direction the boxes children should go in. Normal or revere.
box-align	Set how the boxes children are aligned in the box. If the orientation i horizontal it will decide the alignment vertically and vice-versa
box-flex-group	Assign a group to flexible elements
box-lines	Normally the column will continue on forever in the orientation you chose. If you set box-lines to multiple, the columns will go onto a new line whenever it runs out of space in the parent box.
box-ordinal-group	Determines how the boxes children are ordered. A smaller box-ordinal-group will go to the beginning of the box, while a bigger one will go to the end. The start is the left if the direction is normal, and vice versa if it’s reverse.
box-orient	How the boxes children should be aligned. Horizontal to stack them horizontally, and vertical to stack them vertically.
box-pack	Sets the alignment of the box along the box-orient axis, so if box-orient is horizontal it will chose how the boxes children are aligned horizontally, and vice versa.

Where do I go from here?

8 Awesome Things That CSS3 Will Do
How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout
A complete guide to CSS Selectors

Cleanr: A Free Wordpress Theme from Webtint

Johnny — Sat, 13 Feb 2010 14:53:45 +0000

A Free Theme

Cleanr is a free theme I’ve been working on for a little while now, and I thought I’d share the fruits of my efforts with you, the design community and anyone else who wants it. So Cleanr is a clean theme that I’ve designed. I called it Cleanr because it reflects the whole Web 2.0 trend, and just calling it Clean was a bit to common of a name.

Expandable

I was trying to concentrate on ways to make the the theme more expandable, so users would be able to alter and add to the theme as they saw fit. I wanted it to be a sort of canvas for you guys to add. The sidebar is widgetized, and everything an easily be added and deleted as you wish.

Simple

I’ve made everything as small as possible so that you basically just have a simple layout that allows for fast loading and easy alterations. Usability was key when designing this, and everything is easy to use and easy to read. Basically I was aiming for something that was easy to use for the web designer and the user.

Browser Compatibility

I’ve tested it in all of the following browsers:

	IE6, 7, 8	Firefox 3.6	Safari 4	Chrome 4	Opera 10
Status	Yes	Yes	Yes	Yes	Yes

And everything seems to be working fine. However my testing is probably far from thorough, and if you find a bug, or a problem, don’t hesitate to tell me in the comment area below, and I’ll try and fix it as soon as possible.

Copyright

There’s a little copyright at the bottom of the theme. Now I don’t mind if you delete the “Theme made by Webtint” bit, but it’d be awful nice if you kept it in there. Wordpress doesn’t mind if you delete the “Powered by Wordpress” text either. If you wish to continue using the social icons though, Komodo Media wishes you to keep the copyright for their icons down there.

You’re free to use this theme anywhere you want as long as it’s not for commercial reasons like selling the theme to make money.

And Finally

I’d love to see where (if) you guys are using this, so if you are please link in the comments! Now go and spread the word!

50+ Wonderful Wordpress Themes
22 Must Have Wordpress Plugins
26 must have (FREE) social media icon sets Consisting of over 500 individual icons

Wonderful Wallpapers #4: Valentine’s Day

Johnny — Tue, 09 Feb 2010 22:26:15 +0000

Valentine’s Day

Wonderful Wallpapers #3: Christmas
Wonderful Wallpapers #1: Mashup
Wonderful Wallpapers #2: Typography In-Depth

Is HTML 5 really going to replace Adobe Flash?

Johnny — Fri, 05 Feb 2010 19:59:18 +0000

Not Quickly

Flash probably won’t disappear very fast, even if it disappears at all. Flash is (as you’ll probably know) embedded into the web, and Steve’s dream that HTML 5 is going to replace all of that is pretty unrealistic. Sure, HTML 5 will most likely replace video players and stuff like that, and big websites like video sharing giant Youtube will probably switch to HTML5 eventually because of its speed.

Don’t believe me? I even have statistics to back me up. According to Adobe, Flash is currently supported on 99% of computers. Did IE6 just disappear? No, it’s still here.

The Impact of Not Supporting Flash

It’s just unrealistic not to support flash and expect a user to get a full web experience, and Apple are promising a full internet experience. As this quite humorous blog post points out, a load of stuff just doesn’t work without Flash. These aren’t small sites either, ranging from CNN to Facebook and beyond. Okay, so you could argue that these sites might eventually switch over to a HTML5 alternative, but that still leaves all those elements that can’t necessarily be done in HTML5, or even as well in HTML5.

Flash Games and Movies

Flash games and movies aren’t going to disappear for a long time. Too many people enjoy them and there are way too many websites based around them. Imagine if all browsers cut support for Flash. I could never play Gemcraft again. Sure, HTML5 might eventually be a viable way of creating good games for the internet, but that won’t change the fact that there will still be flash content.

Chances of Flash just disappearing like nothing ever happened are slim to none. Not to mention websites based around Flash. If I visit a Flash website I want to see that damn Flash website. I don’t want my brand new full internet experience iPad extravaganza to tell me that it won’t work. It’ll totally ruin the experience of the internet.

Right now?

The fact is, even if the iPad supports flash in the future (unlikely) and all flash elements from the web disappear because of HTML5 (very unlikely), right at this moment, people who are thinking about buying the iPad won’t be able to view Flash objects. That means people like me and you, who go out and spend their hard earned money on a device which, lets be honest, is most likely going to be used for easy internet access, will not be getting the full internet. They’ll be getting the internet minus Flash.

The Benefits of the Web Minus Flash

Although I think that Flash should be supported in some form or another in every web enabled device (just because Flash is a big part of the web at the current time), there are still some benefits of the Internet without Flash. Flash is a proprietary technology for which there is really no alternative. One company having such a grasp over the internet isn’t right, and that’s why HTML5 is a sort of godsend for the web as it’s going to reduce the need for things like Flash. However, unlike what Steve hoped for, it’s not going to totally eliminate it.

On top of that, (and as the guys over at Apple pointed out) Flash has quite a few problems of its own. It can sometimes slow down your computer, and might even crash which is awful, especially when you’re busy.

Flash is Still Useful

Here I am, moaning about how Flash may slowly wither and die like a flower in the winter, when in reality Flash has so many uses beyond video and trendy user interfaces. Flash is used in animations and on mobile devices, and well, I don’t think many Flash Artists will be swapping CS4 for HTML5 anytime soon.

Sure HTML5 will replace a few aspects of Flash, but it won’t replace them all. Flash is more likely to evolve as it’s such a big product over at Adobe, they’d be crazy to let it die. Only time will tell if Flash ends up being an old antiquated technology that goes down in the history books, or a still important part of our web in years to come. What’s your opinion?

What HTML 5 will do for you
5 Ways the Face of the Web will Change
19 Intuitive, Beautiful Flash Websites

Everything you need to know about shorthand CSS

Johnny — Tue, 02 Feb 2010 23:26:26 +0000

The Benefits of Using Shorthand CSS

Most CSS bugs and problems are caused by an over bloated, over developed CSS file and messy HTML, so rewriting your CSS file can help squish those bugs.
Shorthand CSS will load faster
It’s tidier, so it’s easier to read. That way you can make alterations to it later on.

Shorter, Easier, Better

There are a bunch of techniques that everyone uses in CSS which are considered shorthand. Heck, you’ve probably used them before.

The Comma

The comma is probably one of the easiest and most used element in shorthand CSS. It allows you to apply a bunch of properties to a few classes at once (or maybe even more than a few, if you’re feeling particularly adventurous!). It’s pretty straight forward. Whereas the CSS newbie might commit such an unforgivable offence as this:


.class1 {
       font-family: Arial, Helvetica, sans-serif;
       padding: 20px;
       margin: 10px;
       color: #000;
}

.class2 {
       font-family: Arial, Helvetica, sans-serif;
       padding: 20px;
       margin: 10px;
       color: #000;
}

The CSS Master looks at this, laughing maniacally at such a foolish ploy. The better way to write this would be using a comma, seeing as they both have the same properties.


.class1, .class2 {
       font-family: Arial, Helvetica, sans-serif;
       padding: 20px;
       margin: 10px;
       color: #000;
}

As you’d expect, that applies all the properties to both class1 and class2.

More than one value

Some CSS elements (such as padding) allow you to apply them to certain sides (like padding-left or padding-right). Instead of doing something like this:

padding-top: 5px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 35px;

You can condense this into the form:

padding: 5px 15px 25px 35px;

Which I’m pretty sure you’ll agree is a lot smaller. Here are a few examples of what variations on this technique will do. This is the same for margin, as well as any property that follows this pattern.

padding: 5px 15px 25px 35px;

Top padding is 5px.
Right padding is 15px.
Bottom padding is 25px.
Left padding is 35px.

padding: 5px 15px 35px;

Top padding is 5px.
Right and left padding are 15px.
Bottom padding is 35px.

padding: 5px 15px;

Top and bottom padding are 5px.
Right and left padding are 15px.

padding: 5px;

All sides are 5px.

Of course, this is the basis of all shorthand CSS, which basically comes down to combining properties and values to make your CSS shorter.

Color

Color is another way to get rid of those extra bytes that aren’t needed. A common way to write color in CSS is to use a 6 digit hexadecimal code that represents the color. For instance, you probably know that white is #ffffff, and black is #000000.

CSS has an easy way for you to shorten down those pesky 6 digit codes to 3 digits. It follows a general rule. Each two digits can be represented by one digit if its a repeating digit. You can only do this however if the color has 3 pairs of repeating digits. For example, you can’t write #114322 as #1432 or #00fff1 can’t be written as #0ff1.

color: #ffffff; /* can be written as #fff */
color: #00ffff /* can be written as #0ff */
color: #112233; /* can be written as #123 */
color: #9900c; /* can be written as #90c */
color: #ff00ff /* can be written as #f0f */

On top of that, there’s a bunch of words that can be used as triggers for different colors. You can find a full list here.

Even Shorter

It’s possible to make your CSS even shorter by combining properties that are similar to each other.

Background

The background property can easily be condensed. Here’s a recap on the background properties:

	Default Value	Possible Values
background-color The color of the background	transparent	color (in rgb/hex/name) transparent inherit
background-image Set an image as the background	none	none url inherit
background-repeat In what way the background will repeat	repeat	repeat repeat-x repeat-y no-repeat inherit
background-attachment If the background moves or not	scroll	scroll inherit fixed
background-position The position you want the background in	top left	top left top center top right center left center center center right bottom left bottom center bottom right x y (i.e. 5% 10% or 5px 10px) inherit

The condensed background property looks something like this:

background: background-color background-image background-repeat background-attachment background-position;

/* So you might have something like this */

background: #fff url('image.jpg') repeat-x scroll bottom right;

Sort of similar to the way padding and margin are done right? If you leave out any properties (for instance, if you left out the background-color at the start or background-repeat in the middle, or whatever) CSS will just go to the default values for those properties. Same goes for all shorthand properties of this nature.

Border and Outline

A border is a visible line around an object. An outline is almost like a border, only it doesn’t add to the height or width of the element it’s around. The syntax for both are almost identical, except outline doesn’t have side specific properties (i.e. outline-left doesn’t exist). Direction can be any side: left, right, top and bottom.

Border Properties

A quick recap on border properties. The Default value on linked images is in italic brackets. The outline properties are exactly the same, only border is changed to outline, and the direction properties don’t exist.

	Default Value	Possible Values
border-width The width of the border	medium	thin medium thick measurement inherit
border-direction-width	medium	same as border-width
border-style The style of the border	none	none hidden dotted dashed solid double groove ridge inset outset inherit
border-direction-style	none	same as border-style
border-color The color of the border	inherit	color (rgb/hex/name) transparent inherit
border-direction-color	inherit	same as border-color

The shorthand version of this looks something like below:


border: border-width border-style border-color;

/* so you might have something like.. */

border: 1px solid #000;

/* or for that matter */

outline: 1px solid #000;

/* It's also possible to add directions to the border property (not the outline though) */
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;

Generally I’d advise using this syntax when using the border and outline property because things start to get weird when you leave stuff out for borders and outlines. Remember I said earlier that if you leave out certain properties, CSS will just set them to default? Well, things aren’t that easy with border and outline ya’ see.

/* These work */
border: dashed;
border: solid red;
border: 2px solid;

/* These don't work */
border: 6px;
border: blue;
border: 6px blue;

So the border-style is always required.

Lists

Lists are another element of CSS that can be easily shortened down

	Default Value	Possible Values
list-style-image Selects an image for the points	none	url none inherit
list-style-position Puts points inside/outside content	inside	inside outside inherit
list-style-type The type of the points	disc	Ordered List: decimal decimal-leading-zero upper-roman upper-latin upper-alpha lower-roman lower-latin lower-alpha lower-greek georgian Unordered List: circle square disc

So the shorthand way of doing all of these properties is like so:

list-style: list-style-type list-style-position list-style-image

/* So you might have.. */

list-style: decimal outside;

/* or */

list-style: outside url('image.jpg');

Fonts

Fonts are something that can take up a load of room in a CSS class, so shortening them down is pretty useful.

	Default Value	Possible Values
font-style	normal	normal italics oblique inherit
font-variant	normal	normal small-caps inherit
font-weight	normal	bold bolder light 100-900 inherit
font-size	medium	xx-small x-small small medium large x-large xx-large smaller larger size/measurement inherit
line-height	normal	normal size/measurement inherit
font-family	picked by browser/user	Example: Arial, Helvetica, sans-serif “Times New Roman”, serif

The font shorthand property is a little more tricky than the other ones we’ve mentioned so far, since it’s got a slightly different syntax.


font: font-style font-variant font-weight font-size/line-height font-family

/* So you could have something like this */

font: oblique normal bold 12px/5px Arial, Helvetica, sans-serif;

Final Words

Shorthand CSS is one of the most useful techniques around for shortening your CSS file, and on top of that, it’s really easy to use and read. There’s no reason for you not to use it, and it’ll certainly speed up your site a bit.

Where do I go from here?

Coding a Web Layout in XHTML and CSS
Typography in CSS2 and CSS3
8 Awesome Things That CSS3 Will Do

Webtint

Logo Design Colorful Inspiration: Purple

Purple

Roundup

Related posts

Apple Design: A History

It all started in 1976

Apple’s Modern Era

A Quick Product History

1997-2000

2001-2004

2005-2008

2008-2010

A Timeline of Product Design

Design Process

Creating a Brand

Related posts

How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout

Graceful Degradation

A HTML5 Document

New and Fancy

Webtint

Web Development Blog