It worked great everywhere… until I went to check in IE8. The site’s logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.

Read full post

Posted in Browsers, CSS.

Copyright © Roger Johansson

  

There are a lot of advantages to freelancing. You will have more flexibility over the hours you work, you won’t have to commute to work any more and best of all, you are your own boss. It can be hard work landing a job. Not to mention making sure a project is completed successfully can mean working unsocial hours from time to time, however most people who leave their 9 to 5 jobs are happy with the freedom freelancing offers.

You can’t just sit at home waiting for the work to come to you though (unless you are an established freelancer with years of experience). You need to be proactive and go out and find work every month. The two most common methods of doing this are job boards and freelancing websites.

With job boards, the website owner or company posts details of the job or project that they need completed. It is then up to applicants to contact them with details of themselves, their experience online and why they are suitable for a project. Freelancing websites are a little more competitive, with many freelancers privately or publicly bidding for work from employers. Due to this, good feedback from previous clients can be an important factor on whether you are successful in a bid or not.

Today we would like to show you 18 websites perfect for finding design and programming jobs. The first 9 are on this page, and the others are on the next. Just follow the link at the bottom of the post to continue on with this hopefully useful resource.

Help Wanted Websites

1. Freelance Switch

A great freelance job board that’s updated regularly. It publishes online jobs where location isn’t an issue and location based contracts from around the world. Design, development, writing, illustration and flash positions are all listed.

2. Smashing Jobs

Used by top digital companies such as Google, Apple and Linked In; Smashing Jobs lists full time and freelance design and programming jobs.

3. Sensational Jobs

It’s not updated frequently however there are still good design and developer jobs published on Sensational Jobs every month.

4. WP Hired

A good place to find theme and plugin development work for the WordPress platform. Freelance and full time positions are advertised and you can also upload your resume so that employers contact you for work.

5. WordPress Jobs

A job board from the makers of WordPress, WordPress Jobs lists designer, programmer and blogging positions. There are also employers who simply need their WordPress installation upgraded.

6. Authentic Jobs

Online since 2005, Authentic Jobs lists positions from companies such as Facebook, Skype, Sony and Electronic Arts. Full time, contract, freelance and internship positions are available for design and development projects.

7. Coroflot

A design website that features jobs for a range of different design jobs from large well respected companies. Users can upload their portfolios so that employers can contact them directly.

8. WooJobs

Another WordPress jobs board that is actively updated. A range of WordPress design, development and support positions are advertised here.

9. Krop

A creative job board for designers, directors and freelancers. Users can create a portfolio and resume so that companies can contact them directly.

Don’t give up yet! That perfect freelancing design or programming job may still be lingering right around the corner. There are still more opportunities on the rest of the job boards and websites we have left. Read more here.

  

CSS is a beautiful language but it can also be frustrating at times. Certain CSS solutions don’t work on certain browsers (cough Internet Explorer cough) and much of your time can be spent debugging code.

Thankfully there are lots of great CSS snippets available online that fix common problems and design issues. In this article we have listed 30 CSS snippets that we think you will find very useful.

The Code

1. Chris Poteet’s CSS Browser Reset

Resetting your CSS style allows you to stop cross browser differences. Chris Proteet’s reset code doesn’t work in IE6 however this shouldn’t be a concern any more with use of the browser dropping below 1% in the USA.

/*

Reset Default Browser Styles
- Place first in the listing of external style sheets for cascading.
- Be sure to explicitly set margin/padding styles.
- Styles are not reset that have to do with display (block, inline) are not reset.

By: Chris Poteet & various influences

*/

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
dt {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

2. Eric Meyer’s CSS Reset

Eric Meyer’s CSS code resets is one of the most popular CSS snippets. It even found it’s way into the Blueprint CSS Framework.

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3. How to Create Multiple Borders in CSS3

A cool technique using the box-shadow property that allows you to create multiple borders around an object.

box-shadow:
    0 0 0 2px #000,
    0 0 0 3px #999,
    0 0 0 9px #fa0,
    0 0 0 10px #666,
    0 0 0 16px #fd0,
    0 0 0 18px #000;

4. Tucked Corners

This CSS code will give you the cool ‘tucked corners’ effect that is used on the Gravatar home page.

div.tucked-corners {
	    background: #f6f6f6;
	    height: 380px;
	    margin: 50px auto;
	    padding: 10px;
	    position: relative;
	    width: 580px;
	    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
	       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
	            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
	}
	span.tucked-corners {
	    background: #c4453c;
	    display: block;
	    height: 380px;
	    position: relative;
	    width: 580px;
	    -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
	       -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
	            box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
	}

	/* Top Corner Effect */

	.top-corners:after,
	.top-corners:before {
	    background: #e6e6e6;
	    content: '';
	    height: 50px;
	    position: absolute;
	    top: -25px;
	    width: 100px;
	    z-index: 10;
	    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	}
	.top-corners:after {
	    left: -50px;
	    -webkit-transform: rotate(-45deg);
	       -moz-transform: rotate(-45deg);
	        -ms-transform: rotate(-45deg);
	         -o-transform: rotate(-45deg);
	            transform: rotate(-45deg);
	}
	.top-corners:before {
	    right: -50px;
	    -webkit-transform: rotate(45deg);
	       -moz-transform: rotate(45deg);
	        -ms-transform: rotate(45deg);
	         -o-transform: rotate(45deg);
	            transform: rotate(45deg);
	}

	/* Bottom Corner Effect */

	.bottom-corners:after,
	.bottom-corners:before {
	    background: #e6e6e6;
	    content: '';
	    height: 50px;
	    position: absolute;
	    bottom: -25px;
	    width: 100px;
	    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	}
	.bottom-corners:after {
	    left: -50px;
	    -webkit-transform: rotate(-135deg);
	       -moz-transform: rotate(-135deg);
	        -ms-transform: rotate(-135deg);
	         -o-transform: rotate(-135deg);
	            transform: rotate(-135deg);
	}
	.bottom-corners:before {
	    right: -50px;
	    -webkit-transform: rotate(135deg);
	       -moz-transform: rotate(135deg);
	        -ms-transform: rotate(135deg);
	         -o-transform: rotate(135deg);
	            transform: rotate(135deg);
	}

5. iPad-Specific CSS

Change the general layout of ipad screens and portrait and landscape modes.

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

6. Style links depending on file format

A short CSS snippet that changes the styling of external links, email links and links to pdf documents.

	/* external links */
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}

/* emails */

a[href^="mailto:"]{
padding-right: 20px;

background: url(email.png) no-repeat center right;

}

/* pdfs */

a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;

7. Drop Caps

A great cross-browser snippet that lets you make the first letter of a paragraph stand out.

.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

This can also be achieved using CSS3 however it doesn’t work on IE9.

p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

8. CSS Sticky Footer

Create a sticky footer for your page. The solution works on all major browsers including Google Chrome and IE8.

CSS

/*
Sticky Footer Solution
by Steve Hatcher 

http://stever.ca

http://www.cssstickyfooter.com

*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/* IMPORTANT

You also need to include this conditional style in the  of your HTML file to feed this style to IE 6 and lower and 8 and higher.



*/

HTML

<div id="wrap">

	<div id="main">

	</div>

</div>


<div id="footer">

</div>

9. Image Replacement Technique

A handy way of replacing a text page element with an image. The snippet addresses a problem from another solution in which Firefox users noticed a dotted border that goes to the left of the screen.

a.replacement
{
  background: url(dotted-border.png) no-repeat;
  height: 44px;
  width: 316px;
  display: block;
  text-indent: -9999px;
  overflow: hidden;  /*Add this line to the image replacement method*/
}

10. Set body font-size to 62.5% for Easier em Conversion

If you want to have a more flexible layout, you should use em instead of pixels or points. By setting your font size at 62.5% you can easily set your font using em as the value will be a tenth of pixel value.

body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.2em; /* 1.2em = 12px */
}

11. Vertically Align Text

If you set the line-height of your paragraph as the same size as it’s parent division you can easily center the text vertically.

div { width:100px; height:100px; }
div p { line-height:100px; }

12. How to Create 3D Text With CSS3

Using the text-shadow property, this snippet will help you create 3D text using CSS only.

p.threeD
{
	text-shadow:
		-1px 1px 0 #ddd,
		-2px 2px 0 #c8c8c8,
		-3px 3px 0 #ccc,
		-4px 4px 0 #b8b8b8,
		-4px 4px 0 #bbb,
		0px 1px 1px rgba(0,0,0,.4),
		0px 2px 2px rgba(0,0,0,.3),
		-1px 3px 3px rgba(0,0,0,.2),
		-1px 5px 5px rgba(0,0,0,.1),
		-2px 8px 8px rgba(0,0,0,.1),
		-2px 13px 13px rgba(0,0,0,.1)
		;
}

13. Wrapping Long URLs and Text Content with CSS

This snippet will stop long lines of text extending over the content area by making sure the content wraps to fit the content width.

pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}

14. Fancy Ampersand

Make your ampersands stand out using this short snippet. Simply change the font-family to suit your preference.

.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}

15. Pull Quotes for Improved Reading

Make your quotes stand out more by floating them to the right or left hand side of your content and wrapping content around it.

.pullquote {
width: 300px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ; }

16. Rounded Borders Around Images

With CSS3 you can easily place rounded borders around your images using this snippet.

img {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}

17. Image Preloader

Load a small gif in the background of an image first so that it is showed before the main image loads.

img
{
    background: url(img/preloader.gif) no-repeat 50% 50%;
}

18. CSS3 Opacity

By using the opacity property, which lets you see through an element, you can create a layered textured background.

div.L1 { background:#036; opacity:0.2; height:20px; }
div.L2 { background:#036; opacity:0.4; height:20px; }
div.L3 { background:#036; opacity:0.6; height:20px; }
div.L4 { background:#036; opacity:0.8; height:20px; }
div.L5 { background:#036; opacity:1.0; height:20px; }

19. Highlight links that open in a new window

This snippet allows you to easily distinguish links that open in new browser/tab windows by styling them different from other links.

a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
 }

20. The New Bulletproof @Font-Face Syntax

A cross-browser CSS snippet that lets you define your font faces.

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
	     url('myfont-webfont.woff') format('woff'),
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

21. Flip an Image

A CSS snippet that lets you flip an image. This is particularly useful if you want to flip icons such as arrows.

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

22. Email Link With An Image

A quick way of automatically adding a mail image to all of your email links.

a[href^="mailto:"] {
     background: url(images/email.png) no-repeat right top;
     padding-right:10px;
}

23. Beautiful Blockquotes

A neat way of styling your blockquotes to add a bit more punch to them.

blockquote {
     background:#f9f9f9;
     border-left:10px solid #ccc;
     margin:1.5em 10px;
     padding:.5em 10px;
     quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
     color:#ccc;
     content:open-quote;
     font-size:4em;
     line-height:.1em;
     margin-right:.25em;
     vertical-align:-.4em;
}
blockquote p {
     display:inline;
}

24. Browser CSS hacks

A large list of browser hacks to make sure your website looks consistent across all browsers.

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

25. How To Change The Default Text Selection Color on your Blog

Change the color of highlighted text by adding this little CSS snippet to your stylesheet.

::selection {
   background: #ffb7b7; /* Safari */
        color: #ffffff;
   }
::-moz-selection {
   background: #ffb7b7; /* Firefox */
        color: #ffffff;
   }

26. Clearfix

Clear floated elements easily by creating a CSS clear class.

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

27. Hide Logo Text With Text Indent

Make your logo is SEO friendly by using this snippet for your h1 tag. The snippet ensures that the logo text is not displayed on the page.

h1 {
        text-indent:-9999px;
        margin:0 auto;
        width:400px;
        height:100px;
        background:transparent url("images/logo.jpg") no-repeat scroll;
}

28. Reset all Text Colors and Background Colors

Reset all text and background colours. The snippet sets everything back to black text on a white background though you can change these colours accordingly.

* {
     color: black !important;
     background-color: white !important;
     background-image: none !important;
}

29. Multiple Background Images

Use multiple background images with this useful CSS3 snippet.

#multiple-images {
   background: url(image_1.png) top left no-repeat,
   url(image_2.png) bottom left no-repeat,
   url(image_3.png) bottom right no-repeat;
}

30. Linear Gradient

This CSS code will allow you to create a linear gradient in the background of an element. This works on all major browsers however some older browsers don’t display it properly (particularly older versions of IE).

background-image: -webkit-linear-gradient(top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -moz-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -o-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0ECE8), color-stop(1, #D8D3C8) );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#F0ECE8?, endColorstr=’#D8D3C8?,GradientType=0 );

We hope that you enjoyed the post and found it as useful as we’d hoped. If you know of any other useful CSS snippets that you keep handy that we neglected, please share them with us in the comment area.

(rb)

  

Using illustration in web design has become quite trendy these days. People love to see beautifully designed illustration based websites because they stand out from the rest. Not only because of the beautiful illustrative art work and carefully crafted web designs but also because of the perfect balance struck between these two important components.

Today, we want to dig into some creative ways you can work beautiful illustrations into your web design projects. We hope that this compilation will inspire some new ideas. You can see in the examples where designers have captured a certain illustrative style and wonderfully integrated it into website design in various ways. These unique illustrative styles make a website more memorable. Enjoy!

The Showcase

Plavacek.net
Plavacek.net takes a unique and gorgeous approach with its design that certainly looks great and attention grabbing. The designer imaginatively presents the underwater and above water scenes in a single frame brilliantly.

Meomi
In this web design, although the mascot is not the only bit of illustration and character work present it does add a lot of personality. The overall illustrations and style of the site make it a less formal presentation.

The Last March
This is another illustration driven web design that demonstrates the different levels of playfulness and whimsy these types of illustrated elements can add beyond pure decoration.

Pampaneo
Pampaneo’s lively use of yellow and green with idiosyncratic characters creates a bold look with depth and balance.

The Pixel
This is another site with a very stylish design, but with a much busier layout. The blue-tone gives a very strong impression.

Pojeta
With this web design, the designer conveyed his own personal and unique style with a single illustration against a vast amount of whitespace. This makes the design look hugely impactful and very beautiful.

YODAA
This website successfully manages to be unique in its own way by highlighting the illustration with carefully positioned content; and since this is accomplished effectively, the result is quite spectacular.

Aussie BBQ Legends
What makes this website stand out is not only the stunning illustrative art work or the vigilantly crafted design; rather it is the beautiful balance between these two components like was mentioned in the opening.

Ufo.lt
This website demonstrates a beautiful submersion in illustration. You can see how creatively the designer makes use of their illo skills.

Pieoneers
The illustration presented in this website although it is very colorful and has some depth, it still maintains a bit of a simplistic feel. The muted tones used for the rest of the site really make the splash of color in the pie very pleasing to the eyes.

Html5 Lab
Html5 Lab has a bold site, using large 2D illustrations and some light embellishments coupled with a sharp color scheme of grey and red with little traces of white and black to pull the design together.

Pigeon and Pigeonette
The uncharacteristic layout and quirky, vibrant illustration make Pigeon and Pigeonette worthy of exploring.

Teamnomad
Teamnomad’s header reinforces its own theme simply and in an understated way, though it is still extremely apparent, creating a strong brand connection quickly. The rest of the page leaves enough room to breathe, so viewers aren’t overwhelmed.

Iwit
A large stream of character illustration is paired with an otherwise simple website design, creating a very attention-grabbing result. There truly isn’t much here that could use improving.

Rays-lab
Here the design uses a rich, vibrant illustration that provides a stunning foundation for the design to work off of.

Coopers kids
Coopers kids’ illustration doesn’t carry on all through the page, but it works wonderfully with the peaceful color scheme creating a look that is both simple and effective.

Ericsteuten
Although very eventful, with lots of movement to draw the eye, the design here is still balanced well. This balance seems so simply struck that it makes the whole process look easy.

Attack of the web
Attack of the web mostly confines the use of exceptional illustrative elements to the over-sized header of the single page site. This is a great example of a functionality driven site with a strong use of illustration.

Cubeclub-chemnitz
This web design has a strong letterpress print feel, with bold text and original icons. The repeated texture pattern is a nice touch.

Dedoce
In this design, the underwater scene possesses loads of grunge and texture which keep it from looking like just another vector built website.

Cool Brush Design
Cool Brush Design’s site throws restraint out the window yet still manages to pull off sophistication with ease. The majority of the illustration serves both ornamental and functional purposes.

Arbel Designs
The illustration work in Arbel Designs’ site is extremely attractive and attention grabbing, however the way the tabs adjust when they are clicked is somewhat distracting; but the overall design is still extraordinary.

Toris Eye
In this web design, illustrations are put to work to create an overall theme that looks visually alluring and appealing.

Racket
Here the thematic illustrations are used establish a very surreal tone or theme for the site, and they certainly grab the attention of the users.

Get my boss to North Cape
This web design whimsically repeats its fundamental mission statement through the illustration which comically recreates the site title whilst simultaneously establishing a theme.

Egopop
This is another site with an atypical layout in this collection. The illustrations in the design let you know about the individual this site represents as well as break the normal web mindset a visitor may have.

Duirwaign Studios
Duirwaign Studios makes use of illustration in a very beautiful and breathtaking manner. It also provides some life and movement to the design putting a memorable face to it.

Mellow Mushroom
In this case, the interactive illustrative elements provide much more than mere decoration, adding an edge which smartens the design in a way that only interactive illustration can.

The Great Bearded Reef.com
The Great Bearded Reef makes use of creative illustration to create this playful masterpiece. This is a distinctively fun, tongue-in-cheek design which fits and serves its purpose well.

Moshi Monsters
Here, the illustrations are relatively strange yet tempting owing to their inimitability and innovation. The big and bold typography definitely is the first thing that gets noticed, and compliments the rest of the design well.

The Alamo Basement
The background texture of this website provides it an extraordinarily captivating and personal feel. The visual explosion of characters and colors is great for getting the reader’s attention.

Florida Flourish
This is an enormously stunning illustration full of interactive elements which comes with an unmatched style that captivates the visitors.

Webbli World
This website illustration instills a sense of enjoyment and wonder that engages the visitors with its appealing design.

Old Loft
Old Loft brings into play an artistic and inventive illustration that makes this website both unforgettable and exceptional.

Visit Cascadia
The overall style of this website feels like an illustration, and still, it doesn’t have the characteristic humanistic elements.

Veerle
Here the illustration lends more backup support, with many brilliant background elements in play. Some of these are more corporeal than others, although in general they are more about visual support than anything else.

Tea Round App
This is an ideal example of illustrated design. The style is tremendously stunning, totally unique, and very appealing.

Pixel Baecker
The hand rendered design here showcases the designer’s talent. It demonstrates that they creates artwork with their hands that connects flawlessly to their animation skills.

Chernobyl heart
In this web design, the illustrated text is far more subtle than most. Rather than driving the whole direction of the design, it merely plays along nicely.

Instant Ad Legend
The somewhat singular style of this design delightfully incorporates the large illustrative elements which play several roles in the overall design.

(rb)

  

With the ever-changing landscape that is the internet, web designers and developers are constantly tasked with redesigning some part of the web. Whether it be for our own sites or for those of a client, redesigning is a big part of working in the field right now. For whatever reasons, be it the growth and popular new directions of the web, or even a desire to keep your brand fresh, the web these days seems to be in a constant state of redesign.

The world wide web is littered with sites undergoing reconstruction. Image by Joshua Rothhaas

So today we are going to take a look at some of the new rules that govern these project undertakings, in the wake of the new web that has taken shape over the last few years. As the various technologies steer and redirect the course of the industry’s future, we have to adapt the rules by which we play this game. So below are a few guidelines that will hopefully keep the redesign on track, and not end up with more costs than purely financial ones.

Let Necessity Be Your Guide…Still

For the most part, redesigning tends to stem from some sort of necessity; a need for an update. For example rebranding to keep your companies identity fresh and evolving, or because your business direction is changing and your brand needs to reflect that change. You may also feel the need to update because your current web design is not completely inline and up to date with your brand, or your site may not be up to date and fully functional.

There are many valid reasons that your design’s time may have come, and a redesign becomes necessary. But do not lose sight of what needs to be done as you begin looking at all that you want to have done. Necessity should still be guiding the refashioning of your website. Naturally there are going to be times when we decide to redesign, not out of necessity, but more out of desire to try something new and different. Which is completely reasonable.

Though, as many ascribe to the ‘if isn’t broke, don’t fix it’ mantra, we have to remember that action without purpose tends to feel hollow and unjust. If we do not have reasons for the redesign, beyond just a desire to see a new face on the site, then we have to ask ourselves is the move to redesign completely justified? And while many of us believe that we do not owe any explanations to anyone else for our decisions to update our site’s appearance, we must remember that our audience will have a reaction.

And while we may believe the changes are maybe too minute to really have much impact on our users, we have to keep the user’s exposure time in mind. Users interact with the site often much, much less than we do as the designers or webmasters, and as such, any change can register as a major slight on their radar when they return and things are different. Not like or where they expect them to be. So we need to bare this in mind when we redesign, and where possible, try and keep some level of familiarity. Even if it is just in small ways like placement of navigation, things like that.

And once again, while we may not feel we owe anyone an explanation for our choices, our users are more than likely going to want them anyway. So if we do not have necessity in our corners for the changes we made, then selling the redesign to our regular audience may be a bit of a difficult task. But when we have solid reasons behind the decisions that we made, and can share them with our users, not only does it re-enforce the redesign, but it can further strengthen your relationship with your users.

Accessibility Grows or Remains Unchanged

With the explosive growth of the mobile market, and the ever-growing number of internet browsing capable devices the web design and development community has their sites set on this new direction for the web. However, we cannot get so wrapped up in looking forward that we forget to be thinking back. If we push our sites forward, breaking into new territory that is all good, but we should not be leaving users unnecessarily behind.

As we seek to grow our reach, cutting access off tends to counteract our efforts.

You cannot suddenly exclude a portion of your users who have been able to access your site regularly; or rather you shouldn’t. Yes, IE6 is a bane and a pain, but is it really sound practice to close the door on any portion of our regular user base? Especially when we can at least still guarantee those users some level of access. So as we redesign, especially trying to reach new users, perhaps we should not be so quick to trade one group for another with regards to our site’s accessibility.

The Metrics Exception

Now that we have stated the accessibility rule, let us take a moment and look at the exception to it. There is one forgivable reason that we can redesign without regard to a section of our audience, effectively leaving them behind, and that is when the site metrics tell us that some cuts can be made without much cost. When we get reports telling us that a certain audience is already on the decline, or that certain areas of our site are not getting any sort of attention, then we can take a look at the scales and see which way they tip.

Naturally if it takes more effort on our part to keep that access going than the stats are telling us it is worth, then we can feel free to play into the exception and less into the rule. Though we may want to get more in depth reports than a look at basic site analytics before we go making these cuts or deeming them worthwhile.

Emulation Only Takes Testing So Far

As the web expands into new territories, the design and development community not only have to learn to design for these new devices and directions, but we have to realize that in order to fully test our website designs for say mobile devices we need to gain access to some of these devices. Often times this is the only way that we can get a completely accurate test of the full function of the site. There are many who rely on emulators to allow them to test on these various devices, but those results tend toward the aesthetics more than anything else.

And while making sure the design doesn’t break when it lands on one of these devices is important, it is only half the equation. Especially with the touch screen nature of many of the leading mobile browsing devices, emulators cannot give you the full simulation needed to see what all is going to be impacted and might need tweaking from these various environments. This can be tricky, as budgetary constraints can often impede on our ability to access each device we wish to test on.

This is an area where the helpful nature of the design and development community can come in handy. We can often turn to our colleagues via the the various social media networks we tend to inhabit for assistance in testing on these devices we lack access to. So if emulators are all you have at your disposal, remember that the community is there and often willing to lend a hand as well.

Address Possible Content Cuts

With the number of websites dedicated to creating new content, redesigns open the door to an evaluation of that content; in particular how much of it needs to transfer over and survive the make-over. Content can sometimes have a shelf life. A fact that is often not given much thought until these plans for redesigning begin to rear their heads. So when this process gets started we need to consider that some possible cuts in the content may be in order.

It is never a pleasant subject to discuss, but some content needs to be axed! Image by Martin Cathrae.

If you are working for a client, this is not always an element that we have control over, but that does not mean it is not a topic we should broach with our clients. Naturally we want the design to be as successful as possible, and as such we want to give it as many chances to do so as we can. So addressing this with the clients and letting them know that this is a consideration they should make is not completely out of line.

And given the fact that we generally are having to control how that content is presented and accessed, bringing this up with clients is relevant to our work. If we see a problem that needs to be addressed, why ignore it?

Function Wins More Fans Than Form

Bottom line, the look of your redesign, no matter how well crafted and thought out is not going to land with every one of your users. There really is no way around that. So instead of putting so much effort into finding a way to please every one through the new appearance of the site, be sure to focus that energy into finding ways to please them all with the new functionality of the site. As long as the functionality is tight and flowing well, users will forgive the form that they are not a fan of.

However, the reverse of that statement is hardly true. Even if you have the most original design the web has ever seen, if it is functionally glitchy users will be turned off, and often will not return. We have to realize that the look may draw some users in sure, and as such, it is not like it should go unconsidered. But allowing the look to be the top priority in your redesign efforts does not always lead to successful launches.

If all of the new tricks your redesign has to offer are completely visual, then the shine is sure to wear off much quicker. Not to mention, if the new look is not appealing to some of your existing users, and you have no new functionality to accompany it to help win them over, then your redesign can fall far short of its potential. So keep the functionality aspect in mind when you begin planning the update. Have some tricks up your sleeve beyond the aesthetic to deliver to your users. In the end, it’s better to be safe than sorry.

In Conclusion

Like virtually every aspect of design and development work, redesigning has rules that should be kept in mind as we set out on this type of project. This is not to say that success cannot be found without them used to guide you, just that they can offer us assistance and perspective when we may need it. What redesign rules do you tend to design and develop by? Are there any you would add to this list or amend from the list? Feel free to fill us in using the comment section below.

(rb)

  

In the Stone Age of computers and digital storage, there were little “floppy disks� that promised holding an entire megabyte of space… although it was really only 978 kilobytes. AOL would send these little plastic disks to every household each and every month, hoping computer users would sign up for that now antiquated and laughable hook up to the internet. They made great drink coasters or building blocks for the kids.

Syquest made these huge, lumbering disks that held 70 megabytes but if they got bumped or shaken like an Etch-a-Sketch, the information would be lost. They were bloody expensive and environmentally hazardous with their hideous plastic cases that matched VCR tape covers for flimsy ugliness.

The Zip disk was a boon to storage with a huge 100 megabytes of storage and computers started including Zip drives along side the slots for the floppy disks. It was heaven! When the Jazz drive was introduced with a gigabyte of storage, orgasms flooded over the digital industry.

And so, eventually the CD-ROM… with external readers/burners, were introduced and the dinosaurs died out and fire was discovered. The Iron Age brought the  multi-gigabyte DVD and the rest is history.

What’s New?

I’ll never forget my first USB drive. I bought a set of four that looked like little medicine pills and held a whopping 256 megabytes each! How would I ever fill that much space? I could hook one or more to my key ring and take them anywhere I wanted to go! I could go on vacation and take my entire hard drive with me if I needed to use a computer wherever I landed. My laptop was the size of a cinder block and weighed twice as much… and was top of the line but there were no USB ports.

I was just given a crappy 8MB USB drive by a local Chinese restaurant I frequent several times a week. It has a dragon and the name and number of the restaurant printed on it. I threw it in the box of several dozen drives I have by my desk. The good drives have a shelf and a place of honor in my studio.

We all love gadgets and fun toys, so why not enjoy both? Can’t get enough Star Wars in your life? Well, that’s your personal problem but you can keep your C3PO from having his memory wiped with a handy USB Drive all your own! From donuts to sushi, from thumb-shaped thumb drives to Simpsons figures, you can take the fun with you.

Showcase of USB Drives

The force is with you and a dozen or so manufacturers with all the Star Wars drives out there. If you’re a fan of the Lucas trilogy of great films… and three Jar-Jarring bad ones, then you’ll Obi-want one of these!

Maybe you still want storage space… the final frontier but only want to embarrass yourself with one of these Star Trek rank badges with a secret drive. Pretty sure there are also figures of your favorite character available. Right now, guessing George Takei is ripping the head off a Captain Kirk drive – not to store files – just because Shatner treated him like crap!

A fan of steam punk? Well, get with reality because the Victorian Age didn’t have brass and copper jet packs! But if you truly insist on living in a dream world, then these cool drives will keep you happy at work while coworkers snicker behind your spats-wearing, woolen outfits.

Lots of files you want to keep with you? Then “Back Up To The Future� with your own Delorean drive. Marty and Doc not included.

If ninjas are invisible, then you’ll never find these colorful rubber drives on your desk or in your messenger bag. Still they’re just too cool not to buy!

Domo arigato Mr. storage roboto! It will compute if you love these mechanical men with the ability to carry your deep, dark secrets.

It was only a matter of time before the Swiss Army Knife had a jump drive in the place of a blade. Yet another needed piece of survival gear when surviving in the wilderness – like the tweezers for eyebrow plucking and the toothpick for cleaning corn nibblets from between the enemy’s teeth.

If carrying a USB drive on your keychain is just too… “techy� for you, then go for the “Bling� drive. Watches, necklaces, glasses, lighters and more. Bling is the king-thing when you’ve got storage bore-age!

There’s so many food-item drives on the market, we just couldn’t stomach including them all. Pies, cookies, cakes, candy, donuts, and… yuck… vegetables and fruit. Guess your choice depends on your taste!?

Stupor hero is how you’ll feel when you’re trying to decide on one of the hundreds of drives available. You’ll just marvel at the amount on the market. The choices will drive you batty! Almost as much as these horrible puns.

Transform your files into these cool Transformer drives. You’ll be Optimus-Primed and ready for business with this ultra-nerdy collection that offers storage and play value, too!

While Betty Boop’s severed head is a bit creepy, “I pity da fool!” who could pass up a Mr. T doing sit ups when plugged it (plugged into a tower, he’ll keep bonking his head against the computer!) or dogs that hump your laptop. And when it comes to thumb drives, why not have an actual thumb?

Choose your weapon and protect your files with these killer drives. Probably not the best choice when traveling on any major airline or entering government buildings… or in an office… or public.

Here’s another cool but dangerous drive made by a studio as a promotional piece. It’s “da bomb!� I only hope there’s contact info printed on the back.

Creating your own USB drive is easy with a little imagination and hot glue. This one certainly has a touching sentimentality for the files and digits you want to keep at your fingertips!

Aside from my favorite Chinese restaurant, lots of promotional drives are being given out all over the place. Even business cards now have built in USB drives (great for loading samples of your work in slideshow format!). Think of some cool ideas for your business and what drive you would create.

If you have a huge mailing list, there are manufacturers with pre-designed drives for promotional pieces and they will print your logo and info, too! Just Google “USB Drive� and you’ll find sources for promotional drives.

Once you have a numerous collection of drives, you’ll need more USB ports then your computer provides, That’s when it’s time to think of a USB hub. Here are a few cool ones on the market – minus the bad puns!

(rb)

  

A logo is an essential part of branding your website and marketing it offline and online. Some logo designs feature simple, beautiful typography whilst others more are fun and colourful. However, all logos should be memorable and able to integrate with your website design effortlessly.

One of the best ways of getting inspiration for a logo design is by looking at what other designers have created. Today we would like to show you 50 creative logo designs that we hope will inspire you and give you ideas for creating your own logo.

Lovely Logo Designs

1. Storm Foundry

A great logo that uses a bold font and hides a lightning bolt in the middle of the logo. The noisy insides of the ‘Storm’ part of the logo are reminiscent of a thunder storm.

2. Michael Spitz

An arrangement of colourful leaves in the shape of an M is a good, simple icon that could effectively represent creative growth. Though if you take away the color, it would not work as well to impart the same idea.

3. PhotoForum

A simple yet smart icon logo that simultaneously represents photography and community within the same design. Strangely, the website Photo Forum isn’t using this great icon and is instead using a very basic logo.

4. Moolloon

What else did you expect from a name such as Moolloon? The balloon is modeled after a cow’s udder whilst the basket has a cow coloured scheme (i.e. black and white). It’s a fun design that represents the silliness of the name.

5. Networking

A simple logo that places a crown over the letter I to emphasise the word King. The yellow line that races towards the crown gives the impression of speed too.

6. Pixelflow

Created for a small freelance business, the Pixelflow logo beautifully blends the letter P and F into the same icon. A simple yet elegant logo design.

7. Channing Johnson Photography

A retro style logo that has beautiful typography. The logo was created for Channing Johnson, a wedding photographer that wanted something classy, but that also had ‘grit and edge’ in the design as he also does photojournalism. It’s a classy piece that would work great as a watermark on photos.

8. Full Time

A good idea for a recruitment company that advertises full time jobs, as indicated by the clock filling with liguid. The hands of the clock point to 9 and 5; the regular working hours of full time jobs.

9. Steps

A simple yet smart concept in which the letter E represents steps going up. The basic font would look good in any colour scheme.

10. Sew Perfect

A stylish logo that displays a needle and thread in the shape of the letters S and P. It’s an elegant yet minimal solution for an embroidery business.

11. The Dressing Room

An interesting logo that halves the stick figure in two to suggest the woman is going into a dressing room partially hidden by the door. The dot helps this illusion by giving the impression of a door knob.

12. Huddy Buddy

Huddy Buddy is the clothing company that provides clothes for the ‘cool kids’. The logo is a fun design that has a 1950′s cartoon feel to it and is an important part of the company’s brand.

13. Maple Studios

A simplistic text design with a beautiful colourful icon that is used by the British design agency Maple Studios (yes British, not Canadian). The clean design is ideal for offline marketing such as stationery too.

14. Army of Bees

The 6 bees in the logo have been placed in an arrangement that resembles the letter A. It also looks like the bees are in military formation and are ready to attack. The bees icon looks good though would perhaps look better to the left hand side of the design rather than on top so that more emphasis is placed on the title.

15. MatchBox

A fantastic logo with a cool colour scheme. Great hints at creativity with the box we are told to think outside of burning and stars being freed from within. The different weights and styles on the type also gives the design a bit more of a punch.

16. Gorilla Service

One of the coolest designs created. The gorilla in the logo has a serious look and is dressed up in a suit for office work. The text underneath mimics this bubbly design with a unique curvy font. A fun and memorable design that many designers will get inspiration from.

17. LoveClip

Love meets stationery in this simple yet brandable logo. It’s a smart concept that was created beautifully.

18. One

A beautiful brand identity for the Swiss company ONE GmbH. The slanting logo represents the number one but also mimics a skyscraper. A simple yet iconic design.

19. Shark Tours

A smart concept in which the logo merges a cruise ship and a shark fin. The text has been modified with small hooks at the end of each letter to give it a more aquatic feel.

20. Happy Quote

A simple idea in which the text ‘Happy Quote’ is placed inside a quotation mark like speech bubble. The quote itself also resembles a smiling cartoon character, reinforcing the happy vibe the logo wants to promote.

21. Feather Fly

A gorgeous logo that has a colourful feather in the shape of a bird. It’s a stylish elegant logo solution that promotes a professional image.

22. The Doberman

The logo features a fierce looking Doberman creatively carved out of negative space. The retro design is perfect for a bar or restaurant.

23. Invisible Agent

A creative logo that shows a tie in between four other stick figures to suggest that the one in the centre is an agent blending in with the rest.

24. CFO Cycling Team

A fantastically creative logo that has placed the letters C, F and O in the shape of a cyclist. The concept has been done so effectively that many people might only see the cyclist.

25. Foxy Logo Rebound

The perfect logo for a website called ‘FoxyStats’. The circle is divided into 3 shapes to represent the stats service that the company provides. The top piece resembles a fox with the lower parts representing the body and tail of the fox.

26. Ewali Food

A fun logo that was created for a French fast food restaurant. The original concept showed the village hut with hands out holding a fork and knife though this was changed to open hands as most of the food sold at the restaurant is finger food. Open hands are also more welcoming to customers.

27. Monkey Business

Another fun design that shows a monkey prepared for work. The monkey looks a little subservient, suggesting that he is there to help you with anything you need.

28. AudioTheatre

Beautiful calligraphy gives the AudioTheatre logo an elegant and professional look. A microphone extends from the top of the letter T to represent the recording services that the company provides.

29. LoveLogoDesigns

Love and the letters L and D are all represented in this simple design. The letter L was formed by placing the love heart design at an angle of 45 degrees. It’s a smart way of incorporating all three words into the one icon.

30. Diamond Bookstore

A diamond shaped logo made from an open book. The design’s simple coloring lends itself well transition to plain black and white like most logo design rules dictate.

31. El Pirata

A fast food restaurant logo that uses two spatulas to represent a skull and crossbones. The skull has a chefs hat on and a mask over their mouth to suggest it’s cooking.

32. Origamia

A cool design that was created for a small origami shop. Apparently the shop owner didn’t want a classic origami shape like a crane or swan so the designer created an origami fish instead. The fish uses two bright colours and the text has a beautiful typeface that matches the logo well.

33. Oliva

Created for an energy solution building firm, Oliva promotes its eco-friendliness by showing two trees holding hands. The trees, together with the dot from the ‘i’ form a negative space home, where the companies energy solutions tend to be aimed.

34. Aqua

An interesting logo that shows water inside the second letter. The clean typeface that is used enhances the minimalist look of the logo.

35. Playground

A simple logo that uses 3 colours reminiscent of the big, bright plastic kid’s park equipment that was once in parks all over the US and the beautiful typeface plays into that imagery. The children’s slide molded from the lettering further cements the idea.

36. Napoleon Sushi Bar

Napoleon is a strange name for a sushi bar however designer Alex Badovsky has managed to create a wonderful logo for the restaurant by developing a fun design that features a cute cartoon character made of rice with a Napoleon styled sushi hat.

37. Banjo Cat

Created for a video production company, the logo shows a white cat playing a banjo against a black background. It’s a fun design that is impressively crafted using negative space.

38. Optimistic Beverages

An interesting way of displaying the metaphor ‘the glass is half full’ by showing the alcohol at the top of the shot glass. The simple illustration is enhanced by the great looking typeface used in the text below.

39. Pixel Science

An interesting logo design concept targeted towards internet companies. The logo shows a beaker with clever pixelated bubbles rising from the top. The typography adds to the overall sharp techy look and feel.

40. Mann Music

This is another well crafted logo design which uses negative space and a single color to denote piano keys which spell out the ‘MANN’ in company name. Simply brilliant.

41. Rich And Famous

An elegant logo that has beautiful typography. The ends of the first and last letters of rich and famous have been extended to give the logo a stylish flow. The same design has been used at the bottom of the logo as an underline.

42. Mayaze

A colourful logo that has a maze inside the letter M. This is a great example of how gradients can be applied to make a logo stand out from the crowd. Though in plain black and white presentations, some of that elegance is lost.

43. TN Consulting

One of the best negative space logos published online. By placing a diagonal line through the letter T, the logo gives the impression of the letter N stacked on top of it.

44. Enormail

A good concept that features a cartoon elephant (or a mammoth!) above the brand name. A traditional mail icon is hidden inside the elephant to highlight the companies services.

45. Cardiologic

A cool logo that was inspired by the famous representation of the atom (logic) and no doubt created using the Spirograph version of Photoshop. Only 4 colours are used within the logo. There are multiple heart shapes hidden within to represent the cardio aspect. The red heart is easier to spot due to it’s colour however.

46. Big Colors

Created for a website that allows designers sell their work to support their local charity, Big Colors is a colourful logo that features what seems to be either a toucan.

47. Bread & Breakfast

Created to give the impression of friendliness and indicate the presence of hand-cooked goods, Bread & Breakfast is a beautiful design in which the bread also represents the coffee in the cup. The shop name is displayed in beautiful typography too; enhancing the trendy look the owner wanted.

48. White Rabbit

Featuring a great illustration of a white rabbit, this cute logo that is the perfect fit for the cafe bar it was created for. The initial concept promoted a more stuffy atmosphere than the fun and relaxed environment this design projects.

49. Percy & Reed

A retro style logo that was created for a London based hairdressers. The logo was inspired by signs from the Victorian era, and brilliantly recreates the simple elegance of the time. It’s difficult not to be impressed by the logos beautiful typography.

50. Word Refuge

A great concept that has been excellently executed. The logo features a book that is half opened and facing downwards, making it look as if the book is a tent. A cool logo for a content writing service.

What was your favourite logo of the bunch? Feel free to share your thoughts in the comment area below.

(rb)

  

It seems things are changing for website design. The minimalist style adopted by many websites is slowly being evolved into something a little more engaging. One of the main sources of inspiration for this change in the way website content is displayed has been print design, particularly newspapers and magazines. Here are some fine examples of print design inspired websites.

The Websites

Vogue

Placing an emphasis on striking photography and keeping text to a minimum, the Vogue website perfectly recreates the basic layout of its magazine, showcasing the latest fashion trends.

Armani

A stunningly beautiful website as sharp as the fashion wear, Armani’s site’s look pulled straight from a fashion photographer’s portfolio. A little text and huge exquisite images seize and hold the visitor’s attention.

Hollister

Before you even delve into the content of the Hollister’s website you have to admire their ingenious use of the dead space on either side, which looks like a sort of beautiful vintage Indian-style wallpaper. The rest of the site incorporates a wonderful use of shading and delicate colour textures.

Tommy

Digital creative agency Tommy has a fantastic website layout which mimics advertising boards of the past to great effect. Mixing bold headlines and strong colours, on close inspection the site almost has a ‘weathered’ or ‘worn’ look to it: retro brilliance.

Waltzing Mouse Stamps

The modest vintage design on the site cleverly represents the nature of their business and the products they sell. The slightly worn and torn Victorian-era wallpaper effect that is subtly added to the banners is one of the most eye-catching features.

The New Yorker

The New Yorker is an excellent example of a publication whose website retains the trademark aesthetic, most notably the famous typography, of its print magazine, from the features to the cartoons.

IDesign

We should expect a firm specialising in designing websites and corporate branding to have a stirring website and idesign’s magnificent eye catching art nouveau aesthetic lives up to expectations and more.

Roald Dahl

The website for the legendary children’s storyteller beautifully replicates the aesthetic of Dahl’s famous fun-filled children’s books, with the marvellous artwork drawn by long time collaborator Quentin Blake.

Protest Boardwear

Wonderfully recreating the print design of a high quality fashion catalogue, the Protest Boardwear website features large colourful photography showcasing the brand’s head turning slope fashion wear.

Urban Survivors

Using huge and beautifully composed photography, the charity’s website captures the feel of a photojournal or a series of striking billboards, displaying the plight of unfortunate people in third world countries.

Nike Vision

Nike is famous for pushing the envelope in terms of style, and their Nikevision website uses large sliding images to display their stylish range of eyewear, replicating a high quality catalogue you might pick up in an opticians.

Little White Lies

Little White Lies is a bi-monthly film magazine that shapes and themes its publication around a specific film. The website showcases their stirring graphic design and has digital editions of the magazine to browse.

Targetscope

Texas based marketing firm Targetscope really hit the mark with their website design, which is modelled on American World War II propaganda artwork, delivering the message that their creative team is ready to take command of a client’s brand and steer it to victory.

The Dollar Dreadful

Beautiful to look at, the Dollar Dreadful publication has been running since 1882 and displays its stories using the same layout and typography used in the original late nineteenth century mini magazines on the site.

UGS Mag

This independent hip hop magazine celebrates rap music using a clear and colourful magazine layout that balances graphics, photography and text to stunning effect, creating a cool and vibrant web experience.

Voyager

The minimalist aesthetic and clear layout of BMI’s Voyager website perfectly replicates the in flight magazine. Uncluttered and nicely balanced, the information and features are easy to access and read.

Rolling Stone

The famous showbiz magazine is another example of a website that accurately replicates their print publication. Showcasing the latest news in music, film and politics, the site is simple to navigate and has a clear layout balancing image and text.

CultureLabel

CultureLabel is a different kind of gift site that sells products solely from museums and art galleries. The design of the website mirrors the art focused aesthetic by letting the imagery do the talking. This is also accompanied by lush, matted typography scattered throughout the site.

I-D Mag

Extremely simple and effective, the online version of i-d magazine has a clear scrolling blog design that enables visitors to scan the news stories displayed with an equally sized photograph and introductory text.

Antique Piano Shop

The Antique Piano Shop is dedicated to raising awareness of the need to preserve pianos from the last two centuries as valuable historical artifacts. Their website’s layout, typography and artwork beautifully capture the look of piano and organ catalogues and brochures from the past.

Squint Limited

Squint Limited is a fine epitome of Shoreditch and the website does further justice to the products with its portfolio of images that do all the talking. The grey-on-grey text, coupled with the use of gradient in the menu and product boxes adds to the stunning minimalist feel throughout.

Bob & Blossom

Intricate spacing and light pastel colours complements the array of baby clothing strewn over the site.

The Astonishing Adventures of Lord Likely

Resembling a Victorian Viz magazine, The Astonishing Adventures of Lord Likely is a lewd tongue-firmly-in-cheek collection of a rather randy Victorian aristocratic gentleman’s adventures. The typography, layout and writing style of the fake diaries brilliantly mimic a Victorian very-broad sheet.

XLR8R

While styled like a blog, the website for alternative music and culture mag, XLR8R makes intricate use of its layering with subtle grey tones and compliments it further with awesome documentary style photography of featured artists.

Dazed Digital

The stunning looking website for Dazed magazine has a less formal magazine layout, abandoning columns in favour of a cloud of images and text on a scrolling page that resembles the continuously flowing manuscript of a Jack Kerouac novel.

(rb)

  

There’s a little bit of murmuring going on that the design technique, most affectionately referred to as minimalism, is dying and/or dead. I couldn’t disagree more. I believe that minimalism is not dead, mainly because people don’t quite realize what it is.

Unfortunately, it seems like people think of it more as a style or trend, rather than what I truly think it is–more of a technique or a loose rubric. The technique is able to conform to different situations–if we are talking web design, you can use minimalism in a portfolio, a webshop or whatever it is that you are designing.

What is Minimalism? What is Design?

The textbook definition of “minimalism” is “design or style in which the simplest and fewest elements are used to create the maximum effect.” If you look up “minimal art”, that is defined as “abstract painting or sculpture in which expressiveness and illusion are minimized by the use of simple geometric shapes, flat colour, and arrangements of ordinary objects.” The latter definition is a bit more specific in talking about an actual style of art, but if we are talking about design, which is a bit of a science more than an art, the two actually go hand in hand.

Design is what you use to order information in a way that is typically aesthetically pleasing. The best designs, are designs that have removed the excess or the fluff–that’s minimalism. If you are designing to make things pretty, then you’re not designing, you’re just decorating.  One of the greatest things I’ve ever heard about typography (which is closely linked to graphic design) is “If you can’t read it, you’ve missed the point.” Similarly, one of the best things I’ve heard about graphic design is, “You know when a design is done not by asking what else you can add, but by asking what can you take away.”

Minimalist Showcase

What people have to realize is there are different levels of minimalism. Of course there are the people who keep it as barebones as possible with only text and some pictures, while some folks just believe in making sure they have a really clean design on their hands. Either way, minimalism should be and is used for most as a basis for design. Whether you have a site dedicated to your thoughts, your work or your product, minimalism can work. Below are a handful of different sites that use a minimalistic attitude.

8Faces

As you can see, here, there is a lot of focus put on the typography and making sure it is legible. Pictures aren’t all over the place, but are neatly set up in their designated spaces.

Best Awards

This site uses some flat color with nice splashes of purple and a great layout to draw your eyes to the most important parts of the website. I’d say this is a site that doesn’t stray too far from the roots of minimalism, while throwing in some nicer, more designer elements.

Collected

What you will notice in a lot of minimal sites is the usage of grids. This grid has no spacing between elements which kind of fills up space and makes it more than what it really is, nevertheless, it’s a wonderful clean website.

CreateDM

This is an example of another extremely clean, extremely focused website. There is absolutely no mistaking what this company produces and what they enjoy.

Eight Hour Day

This site is a bit more intricate. There are a lot more design pieces and a lot more pictures, but they never stray from keeping things focused and fluff free.

HatBox

Without using flat colors, this site really delivers in cleanliness and focus. It seems as if the designer paid most attention to the layout and making precise design decisions within each element, rather than the whole site.

InMotion Massage

This is a website that is pretty close to the core values of minimalism, however there’s a larger usage of color than most ‘traditional’ minimal sites. The layout works extremely well and again, there isn’t a ton of fluff here.

Kin Design

I would say this web design is really reminiscent of the idea of ‘minimal art’ as there is a grid but it’s a bit abstract and extremely geometric. It feels like this designer meshed the idea of minimalism with the same idea used in fine art.

Krista Duran

This website focuses a lot more on design and making things look good, but you can tell that it isn’t the sole purpose of the site’s design. It also makes sense and has a wonderful layout.

La Moulade

La Moulade is one of those super neat one page websites. This site uses a large bit of tricks and artistry on top of the clean minimalism to make their point clear. It’s impossible not to know what the focus is here.

Learn CSS

What’s becoming popular with a lot of brands is making mini-sites that help push one product or service. This seems like it could be a very cluttered site because of the information they are giving, but here the designers did a great job of making everything fluff-free and still presenting the information aesthetically.

Luan Freire Kondo

Another website that mimics the fine art qualities of minimalism; the flat color, abstract interpretations and some geometric shapes. This is an extremely simple and to the point portfolio.

Men’s Dept.

This site kind of uses minimalism more as a trend. When you scroll down there is a nice grid, but it is extremely content rich. However, I think this is a good example of how one can pick and choose how they want to present minimalism.

Modulab

Modulab has a super clean, super minimalist website. There’s not a ton of color (only when necessary) and there’s absolutely no fluff. Great job here.

Pig Bimpin’

This is another site that meshes both ideas of minimalism (the art and the technique) to perfection. It’s argued that sites that are ‘minimalist’ can’t add features such as social media, but they definitely found a nice clean way to do so.

Pillow Company

When you think about e-commerce sites, it’s really easy to have a lot going on and for things to become to busy very quickly. This site actually does have a lot of content, but the designer made a really great effort to clean things up and create a focus for that which is most important.

Shelton Fleming

Here is another site that doesn’t go overboard on the colors. There is a lot of interactivity, and it is presented in a manner that is intuitive to the user.

Solo

This is another very simple site, but the beauty of it comes in the form of it’s intricate design elements. Everything seems to have a central theme so it works together and makes sense.

Weltunit

Though the site doesn’t immediately speak for itself, the design does becomes more evident after some searching on what this company does. The use of gray and the layout really do a lot for this minimalistic design.

W+K

What I like about this site is it uses graphics and pictures in a way that typical minimalists would not use them. It’s definitely pleasing to the eye, everything looks full but the layout and design ensure everything has its own space.

Yoshiharu Ota

This web design is probably what folks think about when discussing ‘minimalism.’ This is a barebones site with absolutely no fluff at all.

(rb)

  

In this article, we’ll look at Scalable Vector Graphics (SVG), one of the most underused technologies in website development today.

Before diving into an example, let’s consider the state of the Web at present and where it is going. Website design has found new vigor in recent years, with the evolving technique of responsive design. And for good reason: essentially, responsive website design moves us away from the fixed-width pages we’ve grown accustomed to, replacing them with shape-shifting layouts and intelligent reflowing of content. Add to that a thoughtful content strategy and mobile-first approach, and we’re starting to offer an experience that adapts across devices and browsers to suit the user’s context.

When we look at the breadth of Web-enabled devices, responsive design is sure to provide a better user experience. Scrolling horizontally, panning and zooming the viewport have their place in user interface design, but forcing the user to do these things just to navigate a website quickly becomes tedious. Fitting the website to the viewport is about more than just layout: it’s also about resolution. In this article, I’ll demonstrate why SVG is a perfect addition to future-friendly Web development.

Introducing SVG

SVG offers a truly resolution-independent technique for presenting graphics on the Web. SVG is a vector graphics format that uses XML to define basic properties such as paths, shapes, fonts and colors, and more advanced features such as gradients, filters, scripting and animation. Create the file once and use it anywhere, at any scale and resolution.

Consider the use cases: UI and navigation icons, vector-style illustrations, patterns and repeating backgrounds. For all of these, a scalable graphic is the perfect solution from a visual standpoint, and yet fixed-resolution images are still the norm. In the example below, we’ll show you how to expand on a common development technique to take advantage of SVG.

A Case Study: CSS Sprites

We all know about the CSS sprites technique. (If you don’t, then have a quick read through Sven Lennartz’ article. And Louis Lazaris points out its pros and cons.) In the example below, we’ll show how seamlessly SVG replaces normal raster images. If this technique is not for you, you can certainly imagine a whole array of similar situations in which to use SVG.

Vector icons play a big role in user interface design. Pictures express concepts with vivid clarity, whereas their textual counterparts might carry ambiguity. In UI design, where space is scarce, a simple illustrated icon could be greatly welcome.

I’ve mocked up the following example:

I’ll be first to admit that this row of icons won’t win any design awards, but it will suffice for the sake of this article! Let’s look at the HTML:

<div class="actions">
   <a class="a-share" href="#">Share</a>
   <a class="a-print" href="#">Print</a>
   <a class="a-tag" href="#">Tag</a>
   <a class="a-delete" href="#">Delete</a>
</div>

I’ve kept the HTML to a minimum for clarity, but in practice you’d probably want to mark it up with an unordered list. And you’ll almost certainly want to replace those hashes with real URLs (even if JavaScript provides the functionality, having a fallback is nice). Let’s look at the CSS:

.actions {
   display: block;
   overflow: auto;
}

.actions a {
   background-image: url('sprite.png');
   background-repeat: no-repeat;
   background-color: #ccc;
   border-radius: 5px;
   display: block;
   float: left;
   color: #444;
   font-size: 16px;
   font-weight: bold;
   line-height: 20px;
   text-decoration: none;
   text-shadow: 0 -1px 2px #fff;
   padding: 10px 20px 10px 40px;
   margin-right: 5px;
}

.a-share  { background-position: 10px 0; }
.a-print  { background-position: 10px -40px; }
.a-tag    { background-position: 10px -80px; }
.a-delete { background-position: 10px -120px; }

Note the fixed-pixel sizing and the PNG background, which we can see below framed in full Photoshop production glory:

This implementation of a CSS sprite is basic, and at today’s standard, it’s not good enough! How can we enhance this? First, let’s consider the following issues:

1. We’ve rasterized the image at a very early stage. Even at full size, icons in which points sit between pixels, such as the one for “Print,� have blurred.
2. If we zoom in, the image will blur or pixellate even more; there is no additional data to re-render the image at larger sizes.
3. Everything has a fixed size, which is neither good for responsive design nor good for accessibility, because the browser’s default font size is ignored.

As you’ve probably guessed by now, we’ll show you how SVG solves these problems. But first, let’s reiterate each point thoroughly to understand the issues at large.

1. Rasterization

Devices such as modern smartphones have a very high pixel density; some already surpass the 300 pixels-per-inch (PPI) mark that is assumed to be the limit of the human eye’s ability to distinguish fine details. A pixel has no real-world equivalent in size until it sits on a screen of fixed dimension (say, 3.5 inches diagonally) and fixed resolution (say, 640 × 960 pixels). At this scale, text with a font size of 16 pixels would be incredibly small to the eye. For this reason, devices simply cannot translate 1 CSS pixel unit to 1 device pixel; instead, they double up. Thus, a 16-pixel font size actually takes over 32 pixels when rendered.

The same applies to images; but they are already rasterized, so doubling up the pixels has no benefit. In our example, each icon has been rasterized at around 25 × 25 pixels (the whole sprite being 30 × 160), so they cannot take advantage of the double pixel ratio. One solution is to use CSS media queries to detect the pixel ratio. This is already implemented in Webkit- and Gecko-based browsers.

To improve our example, we can add the following CSS declaration:

@media only screen and (-webkit-min-device-pixel-ratio: 2)  {
   .actions a {
      background-image: url('sprite@2x.png');
      background-size: 30px 160px;
   }
}

The alternate background image supplied in the code above has been saved at 60 × 320 pixels (i.e. double the original dimensions). The background-size property tells CSS to treat it smaller. Significantly, now the device has the additional data to render a better image (if capable).

This solution isn’t bad, but it doesn’t solve the problems we’ll run into in points 2 and 3 below. It also requires that we maintain multiple files of increasing size: a potential burden on bandwidth and a real hassle. For non-vector images, such as photography in JPG format, we can’t do much more than that.

2. Zooming

At their default size, our rasterized icons look acceptable, at least on low-pixel-density screens. However, should the user zoom in on the Web page, these little UI delights will degrade very quickly.

Zooming is a common action when users find a website too small for comfortable viewing. Or, to put it another way, websites that are designed too small are very common. There is really no “perfect� size, because almost everyone has at least some level of visual impairment, since our eyes inevitably deteriorate with age. Secondly, with the rapid increase in touchscreen devices, pinch-to-zoom has become the standard way to enlarge fixed-sized content designed for larger screens (i.e. much of the Web today).

We should develop websites in a way that minimizes the need for user input — that’s where responsive design comes in (see point 3 below) — but zooming is here to stay. There’s simply no way to provide pre-rasterized images for every level of zoom (in theory, an infinite scale). Scalable graphics are the solution, and we’ll show you how to enhance our example. But first, a related word on fixed sizing.

3. Fixed Sizes

Presenting page elements at fixed sizes forces many users to zoom, but it also disables a very useful browser feature. Users can set their preferred font size (the default in browsers is 16 pixels). By sizing everything in pixels, we override this preference. Sizing elements based on this default is much better, so that, if the text is bigger, everything adjusts to match. This essentially mimics the zooming effect but happens without the user having to manually do it on every visit. Ethan Marcotte has written a great article that explains relative font sizes.

Let’s re-implement our sprite example with a solution to these three issues.

A Scalable Implementation

Here is the HTML again. We don’t need to change anything here.

<div class="actions">
   <a class="a-share" href="#">Share</a>
   <a class="a-print" href="#">Print</a>
   <a class="a-tag" href="#">Tag</a>
   <a class="a-delete" href="#">Delete</a>
</div>

The updated CSS is where the magic happens:

body { font-size: 100%; }

.actions {
   display: block;
   overflow: auto;
}

.actions a {
   font-size: 1em;
   line-height: 1.25em;
   padding: 0.625em 1.25em 0.625em 2.5em;
   margin-right: 0.3125em;
   border-radius: 0.3125em;
   background-image: url('sprite.svg');
   -webkit-background-size: 1.875em 10em;
   -o-background-size: 1.875em 10em;
   -moz-background-size: 1.875em 10em;
   background-size: 1.875em 10em;
   /* styles carried over from the original implementation */
   background-repeat: no-repeat;
   background-color: #ccc;
   color: #444;
   display: block;
   float: left;
   text-decoration: none;
   text-shadow: 0 -1px 2px #fff;
}

.actions-em .a-share { background-position: 0.625em 0; }
.actions-em .a-print { background-position: 0.625em -2.5em;  }
.actions-em .a-tag { background-position: 0.625em -5.0em;  }
.actions-em .a-delete { background-position: 0.625em -7.5em;  }

In this version, we’ve made the following changes:

• The background-image is now an SVG file.
• All sizes are based on the default of 16 pixels, or 1 em. If the user’s default is larger or smaller, then everything will scale relatively. (If you multiple each em size by 16, you’ll get the number of pixels used in our initial fixed-size example.)
• The background-size is very important. By setting this in em units, we’re telling the browser to scale the sprite relative to everything else. You’ll notice that 1.875 × 10 em multiplied by 16 becomes 30 × 160 — the base size at which we produced the sprite in pixels.
• The background-position of each sprited icon is also based on relative units.

Now that we’re using SVG and relative sizes, we have solved the three big issues highlighted above. A scalable graphic can be rasterized on demand to perfectly suit any device resolution and any zoom level. By using relative sizes, we can continue implementing a responsive design, minimizing as much as possible the need for the user to zoom. We’re also respecting the browser’s default font size, and enabling our design to adapt accordingly.

I actually produced the SVG sprite first and the PNG version from that. (I imported the SVG in Photoshop before exporting it as a PNG — Illustrator’s PNG export had very poor rasterization.) Below is the header in my SVG file. Notice the same 30 × 160 initial size.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="30px" height="160px" viewBox="0 0 30 160" enable-background="new 0 0 30 160" xml:space="preserve">

You can see that the attributes for width and height are set in pixels (width="30px" height="160px") in the opening svg tag (as generated by Adobe Illustrator). This actually causes it to render early in Firefox, before the graphic has scaled to match the em sizes in background-size. Webkit-based browsers seem to scale the SVG perfectly, regardless. I’ve found that editing the SVG file to use em units in these two attributes fixes any rendering issues in Firefox.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="30em" height="160em" viewBox="0 0 30 160" enable-background="new 0 0 30 160" xml:space="preserve">

I don’t know which browser actually implements this scaling correctly, but let it be noted that extra care is needed to ensure cross-browser perfection. Mozilla MDN has an excellent in-depth article, “Scaling of SVG Backgrounds,� which explores more practical examples. For more ideas, see Alex Walker’s article “A Farewell to CSS3 Gradients.�

Here’s a super-close screenshot showing the SVG sprite:

The sprite scales beautifully. (Sadly, the same can’t be said for my tacky text-shadow effect.)

It’s best to experience the joys of scalable graphics and relative sizing firsthand. I’ve uploaded a side-by-side live demo demonstrating a combination of all the techniques mentioned above.

Browser Support

At the start of this article, I said that SVG was underused. I believe that has generally been the case due to poor browser support. But things are different now! Browser support for SVG has blossomed over the last year to the point where implementing it is a viable use of development time.

According to the website When Can I Use?, support for SVG across multiple implementations is as follows (I’ve combined support for both CSS’ background-image and HTML’s img source — the most useful attributes):

• Internet Explorer 9+
• Firefox 4+
• Chrome 4+
• Safari 4+
• Opera 9.5+

Mobile browser support is also pretty much across the board. If a workable fallback exists for older browsers, then SVG is a very viable solution.

For some of the new additions to Web standards, we can implement them safe in the knowledge that old browsers will simply ignore them and that they aren’t even required. We call this “progressive enhancement�: better browsers get a progressively better experience. SVG is slightly different, because for most practical purposes, it simply replaces other images in CSS backgrounds and HTML elements. The image format — be it SVG, PNG, JPG or GIF — is either supported or it isn’t. We can’t simply follow the practice of progressive enhancement here, because an image failing to render is not an acceptable experience.

Browser Sniffing or Feature Detection?

We could make an educated guess and say that we need to worry only about users of Internet Explorer 6 to 8. In this case, the conditional comments technique for IE-only styles enable us to re-apply a second CSS background-image of a supported format such as PNG, instead of the default SVG background.

Browsing sniffing is always a dangerous game. While Internet Explorer tends to be the main offender, we can never assume it is the only one.

The safer and highly recommended option is to detect SVG support and use it only if it’s found. I suggest using Modernizr if you need to detect multiple features. Modernizr applies a class of svg to your root html element if detected (to which you can apply SVG as a background-image). If you’re using SVG as the source of an image element in HTML, then implementation is a little harder. You’ll have to write more JavaScript to find and replace all sources once support has been established.

The problem with these methods is that the browser will download the fallback image before SVG is detected — the only exception being the conditional comments technique for IE. Users will also likely see a flash of re-styled content when the source image changes. This shouldn’t be the case for long; but at least for now, these problems may be enough to hold you off on SVG usage.

File Size

In our sprite example, the raw SVG file was 2445 bytes. The PNG version was only 1064 bytes, and the double-sized PNG for double-pixel ratio devices was 1932 bytes. On first appearance, the vector file loses on all accounts, but for larger images, the raster version more quickly escalates in size.

SVG files are also human-readable due to being in XML format. They generally comprise a very limited range of characters, which means they can be heavily Gzip-compressed when sent over HTTP. This means that the actual download size is many times smaller than the raw file — easily beyond 30%, probably a lot more. Raster image formats such as PNG and JPG are already compressed to their fullest extent.

Performance

Rendering performance is a concern with SVG, especially on mobile devices, whose hardware is limited. Raster images can be rendered pixel for pixel after decompression and de-encoding. Vector graphics need to be rasterized at a specific resolution every time they’re viewed.

SVG has consistently proved slower than Canvas as a platform for animating vector graphics; but our concern here is basic rendering, not manipulation a thousand times per second, and if that is possible, then simple rendering shouldn’t be a concern. The more intensive SVG features are things like clipping masks and filter effects. These are unnecessary for many practical purposes (like our sprite example), but, if required, the best way to check performance is by testing. A lot of Web development is supported in theory, but in practice results are far from perfect.

Alternative Methods

Hopefully you agree that SVG is extremely useful but not always the ideal solution to resolution independence. Ultimately, the trick is to avoid raster images while maintaining the scalability of visual styles. Below are a few more ideas to think about.

CSS3

You’ve probably already started combining CSS3 properties such as linear-gradient, text-shadow and box-shadow to create more complex styles. Web developer Lea Verou curates a CSS3 pattern gallery that shows off the impressive potential of gradients alone.

In his article “Mobile Web in High Resolution,� Brad Birdsall introduces a technique to maintain pixel perfection for high-resolution displays using the pixel-ratio property.

Then there are pure CSS “icons,� which Faruk Ateş rightly points out as being absolute “madness� — certainly so if you’re using CSS to create a logo! But you could argue the benefits of a small handful of very specific techniques, such as CSS triangles, as demoed by Chris Coyier.

Web Fonts

Dingbat Web fonts and look-a-like Unicode glyphs are two interesting alternatives for vector icons, both with accessibility and semantic challenges. Jon Hicks has a write-up of perhaps the best practice for this. SVG seems a more appropriate technique for icons, but both have an immediate visual impact at high resolutions — and we’ll be paying increasing attention to that in coming years.

Looking Forward

As you can see, SVG usage is very much a possibility, and browser support and performance will only improve in future. What’s important to note from this article is that we really should be building websites that are as resolution-independent as possible.

Consider the “one Web� philosophy and the vast range of devices we use to access it — there is no single user experience. The more we can do to stay device-agnostic, the better. Responsive website design addresses many of these needs and certainly provides many benefits. Using vector graphics may not be as apparent, but its little improvements really do make a difference.

With today’s level of support, many users can experience the beauty of crisp scalable graphics… or perhaps that’s the wrong way to think about it. Most users won’t say “Wow! Kudos on the vectors.� To our dismay, they probably wouldn’t even consider them (and certainly wouldn’t recognize the effort required to craft them). And that’s a good thing; each time we improve the user’s experience, we don’t necessarily need to make a song and dance about it. Letting things continue to grind away under-appreciated is OK. It’s the lack of such things that gets recognized and sniffed at. Raise the user’s expectations in visual aesthetics, and they’ll start to notice the websites that do look shoddy. If you don’t do it, others will.

(al)

© dbushell for Smashing Magazine, 2012.