WebDev-il

How to make a scrolling image or map using jQuery

2011-12-30T16:47:00.000-08:00

If you're trying to make a scrollable map, in a similar style to google maps where there is a fixed element with a moving image inside then jQuery is the way to go..
Here are a couple of useful resources that will get your project started:

The best option is the zoomable jQuery map plugin called Mapbox from Abel Mohler.
Not only is this scrolling, it also allows for zooming into multiple different scaled maps, so you can start with a small scale (small file) and zoom progressively into higher details maps.
Check it out here - http://wayfarerweb.com/jquery/plugins/mapbox/

Abel gives a demo with a map of middle earth as an example.
On top of this you could build your own tooltips or marker system (for example these tooltips over here http://flowplayer.org/tools/tooltip/index.html)

The second resource is CraftMap (previously MobilyMap) which is a jQuery plugin that includes overlay elements and markers -
Check it out here http://www.jscraft.net/plugins/craftmap.html

COMMENT BELOW if you know of similar resources..

Free CSS font generating tool

2011-12-14T19:34:00.000-08:00

Here's a useful tool - an online font tester that lets you test standard fonts to see what it they look like.. and then generates the CSS.
www.fonttester.com

Nice and functional - you can change all the standard font CSS properties using the user interface on the left. It's also a quick way to check out different browsers - just load fonttester in each browser and compare the fonts.
For more information on fonts and typography, take a look at the following web devil posts:

How to embed high resolution images into HTML

2011-12-11T16:37:00.001-08:00

Have you ever wanted to insert a high resolution image into your web page - and make it so it's easy to zoom in so that people can see the details?

The answer is to use JavaScript or AJAX to progressively hand out the correct sized image - rather than loading the full sized (large file) at the start. This can be a bit tricky - so here's a great free service that does it for you.
Zoom.it allows you to embed a large image (must be already hosted on your website) and adds the necessary controls to let your viewers zoom in and out.
Check it out at http://zoom.it all you need is the URL of your large image, and to add the HTML code that zoom.it supplies into your web page at the appropriate place.
Have a play with the example below...

How to embed a PDF document into HTML web page

2011-12-08T16:22:00.000-08:00

PDF the Portable Document Format, although created by Adobe in the early 90's is now an open standard ISO format for documents.
It's a great way of converting propriety documents (excel, word etc.) into a easily viewable/exchangable format.

Putting PDFs into web pages is increasing popular - you can view documents as they should appear with images and text formatted as the author intended.

So.. how do you embed a pdf into a web page?

The simple way is to use the <object> element.
This assumes that the web browser has a PDF plugin - if not you can add a message to allow a direct download of the PDF instead.

<object data="filename.pdf" type="application/pdf" width="100%" height="100%">
 Your web browser doesn't have a PDF plugin.
 Instead you can <a href="filename.pdf">click here to
 download the PDF file.</a>
</object>

You can then style the div that this object goes in so that it fits with the size and layout of your website.
If you're still not sure, or want more detail about this subject read the info over at pdfobject.com

Convert Flash swf to HTML5 - free!

2011-12-07T19:03:00.000-08:00

I've written posts in the last 18months about the slow demise of Flash (click the Flash label on side panel) and the rise in HTML5. So wouldn't it be great to convert SWF to HTML5.
Now you can, free!!!!!

Google labs have the swiffy tool www.google.com/doubleclick/studio/swiffy/ - upload your swf file and it converts to HTML5.
There are a few technical restrictions - file size to 1MB and restricted to ActionScript2.0 (read the FAQ for more details)

It does a lovely job of converting vector graphics to SVG and using HTML animation.
This is a major bonus - html5 banners and headers, slideshows.. anything that is a vector and isn't too complex in AS2 code.
There is also a download for an Adobe Flash Extension that integrates Swiffy into Flash - get it here - nice!

More free CSS3 creation tools

2011-12-06T18:21:00.001-08:00

To add to previous posts about free online CSS3 tools (/css3-online-tool-to-generate-new-css3) here are a couple more sites that allow generate CSS3 quickly:

css3generator.com
Just use the drop-down menu to pick the style you're interested in. I really like the multiple columns styler - super quick to get the right CSS code. It also tells you which browsers will support the CSS3 style you are thinking of using (really handy).

layerstyles.org
Click on the pic to start - and it looks a bit like a photoshop fx wizard - choose what you want and then take the code away with you. :)

Social media marketing

2011-12-05T19:13:00.001-08:00

Interesting article over at businessinsider.com about social media marketing.
The interview with Marc Schiller has some insights into the psyche of consumers of social media, which I've summarised in point form. Check out the full interview here - businessinsider.com

In social media marketing behaviours come first, technology second.
There is still a fundamental need to be heard - the tools have changed but the behaviours haven't.
People now have the ability to "curate" the info around them. This means that if they don't hear about something through the social feeds, they assume it isn't important to them.
"90 percent of the population doesn't have that confirmation that they're being heard. I think that what drives people to express themselves online is a confirmation of their own self-worth… The reason why people write on walls is to say, hey listen, I'm here. I'm a person."
People who follow creativity, whether its design or fashion, are extremely influential.

So, in a nutshell I think Marc is saying that the culture of "i" is very strong with this social group, and that giving them a stake in the marketing strategy makes them feel important, even special and can be capitalised on by clever marketing.

If you're interested in online marketing check out this web devil post about the quick-guide-to-online-marketing.

Mobile Flash down the drain!

2011-11-09T18:00:00.000-08:00

If you've been following the web devil blog you'll know that I've been hinting about the slow demise of Flash. Here is the next nail in the coffin: Adobe ceases development on mobile browser Flash and refocuses efforts on HTML5.

Read the exclusive article (8 Nov 2011) on zdnet.com here.
And check out the web devil review of Adobe Edge here - it's Adobe's HTML5 animation development environment - currently in beta and free to download and try.

Responsive web design boilerplates - free!

2011-11-08T22:53:00.000-08:00

Following on from previous posts about responsive web design (what is responsive web design) and (examples of responsive web design) - here are a couple of great links to free boilerplates to get you started with HTML5 and CSS3 with all the media queries done for you :)

1) Gridless - the basic no-grid boilerplate that is responsive. Check it out at http://thatcoolguy.github.com/gridless-boilerplate/

2)Skeleton - the boilerplate with the awesomely adaptable 12 column grid. Just what we all want :) Check it out at http://getskeleton.com/

If you're not sure about 12 column grids - then check out these other web devil posts about grid systems:

using-grid-systems-for-web-design

web-design-using-baseline-grids

how-to-make-web-design-mockups

Make arrows and triangles with CSS only - no images

2011-11-06T22:34:00.000-08:00

So today I wanted to make an arrow like the one below but I wanted to do this with CSS and not using a background image.

As you'll know you can now make rounded corners using CSS3, but what about triangles and arrows like the one above?
The answer is to use a trick with element borders. Essentially when you make a big border on a tiny box they intersect in a triangle like this image.

Then all you do is make three sides transparent so you see a triangle. This triangle is then added using the :after pseudo-element to stick it onto a div box with the text inside.

Here is the CSS code for a div tag with an id="arrow" just like my blue one above.

#arrow {background-color: #3366cc; height: 30px; position: relative; width: 130px;color:#FFF;}
#arrow:after {content: ' '; height: 0; position: absolute; width: 0; border: 15px solid transparent; border-left-color: #3366cc;left: 100%;top: 0px;}

For a more detailed explanation go to yuiblog.com - which has a much more detailed explanation than mine - and some exciting examples - great stuff Nate Cavanaugh!

Check the web devil archives for CSS3 rounded corners using the search box on the top left or click on the CSS3 label on the right.

Program or be Programmed - Book Review

2011-10-31T23:20:00.000-07:00

This is a quick review of Douglas Rushkoff's book "Program or be Programmed".

Its a pocket guide to how to become a literate participant in the digital age. It's small, quick to read and well worth the effort.

Douglas Rushoff's basic premise is that in "the emerging, highly programmed landscape ahead, you will either create the software or you will be the software. It's really that simple: Program or be programmed." - a direct quote from his book.

I couldn't agree more - is the population going to be controlled by mobile technology, facebook and it's future derivatives (including interfaces that blend man and machine even more) or will you recognise this control, and decide to program your own alternative?

As Douglas mentions, we have the capacity to do something about this, but this time round we could relinquish control not just to other people (as in religion and economics) but to the machines.

His ten basic commands include what should be general advice for the digital age - how we can never be always switched on and connected like a machine and how our humanity doesn't need to be reduced to something less complex or one size fits all just because that's the simple option.

Read this book to find the little stories that back up his ideas - you'll probably finish this book wondering why this information isn't taught in schools ( - remember ... someone has to teach the teachers first, they're still coming to terms with powerpoint in the classroom).

Check out his website here - http://programorbeprogrammed.com

Making Great Infographics

2011-10-30T19:56:00.000-07:00

This video is a great intro into the main concepts of a good infographic - how to give meaning to data through design.

The basic visual clues that the human brain can process are:

Colour
Size
Orientation
Position/Location
Flicker

Data Mining and Social Media

2011-10-02T02:13:00.000-07:00

Loved this cartoon about Facebook and you "If you're not paying for it, you're not the customer.. You're the product being sold."

Just think of the personal data that Facebook holds on individuals - name, DOB, schools, friends, websites they "like" (ie brands & products), online games they play, bars, clubs, restaurants, foods, access times, computer OS, phone type, browser version, etc.

If you still not convinced that there is any money to be made in this then check out this article on how an e-payment company sold 1.97 million customer data to six different companies (including a life insurance company) and has made a profit of HK$44million since 2006
http://www.riskmanagementmonitor.com/e-payment-co-makes-millions-selling-customer-data/

Here's a great article on how data mining is the next frontier for social media marketing..
http://mashable.com/2011/02/25/data-mining-social-marketing/

Here is an old but informative piece on how customer data means money
http://www.informationweek.com/news/6506304

And this is all assuming legal aquisition of data (have you read the facebook privacy policy??) What about a data breach like in the following story -
http://www.cbc.ca/news/technology/story/2011/04/04/technology-data-breach-epsilon-bestbuy-bank.html

And now we have people moving to Google+

Adobe Edge the new HTML5 animation development environment

2011-09-26T17:05:00.000-07:00

Adobe Edge Preview 2 Review
If you are a regular to the Web Devil blog you will have picked up that there is a trend away from Flash and into HTML5 and Javascript options for slideshows and animations and WebM for video (search the archives to find these articles).

The thing we've been missing is a graphic interface to do animated HTML5 stuff. Adobe has been backing both horses in this race and is in beta of Adobe Edge - the HTML5 animation tool.

You can download the latest Sept 2011 build for free here - https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_edge

When you install Adobe Edge Preview 2 it gives you a 96 day limited use.

Currently this version has simple drawing tools, but allows import of SVG and PNG files. The timeline is pretty sophisticated, anyone who has used flash or a movie editor will quickly pick up how this functions.

Edge does automatic transitions/tweens which is pretty easy to work out, and you can use opacity and shadow effects.
Follow this links for some examples of what has been done - http://labs.adobe.com/technologies/edge/resources/

Adobe Edge saves directly to HTML with all the associated CSS files, jQuery files and JavaScript files.

And the plus side - it's all standards based so you can go into the javascript animation and twiddle around with it using your favourite text editor - no blackbox swf files, no flash player plugins - just the code and your browser.

If Apple keeps Flash off it's mobile devices then this will be BIG - Adobe Edge has the potential to kill Adobe Flash as the default web animation platform (games are a different ball game).
Give Edge a go and COMMENT below on your experience ..

Examples of responsive web design

2011-09-23T01:22:00.001-07:00

Following on from the previous post, here are some examples of responsive web design - animated so that you can see how the layout changes as the browser resizes. These are all done using CSS3 media queries.

This first example shows how the left-hand column disappears under the main content as the page width shrinks. The logo shifts from the usual top left to be centred and the main links align under this logo.
The images also scale all the way down to a 260 pixel width!

This second example keeps the extra right hand column down to 410 pixels and only at the small sizes does the logo pop and centre itself.

This following is an example of using media queries to take advantage of widescreen monitors all the way down to mobile widths. Notice how the main navigation goes from eight links down to four links and how the extra info is pruned away.

The final example shows how images are scaled and removed to simplify the layout.

You'll notice that all these four examples have set there media query points at different widths. Resulting in style switching at different browser widths.

Check out the previous post about responsive web design to see a basic explanation of how to do this and some suggested widths.
Comment away on what widths you set for responsive web design below..

What is Responsive Web Design?

2011-09-19T17:50:00.000-07:00

Responsive web design is the concept of designing a website that scales to various screen sizes. With the increase in web surfing from tablets and mobile devices a website needs to work at different screen dimensions and resolutions. The choice is to either build a mobile version, or have a website that scales responsively!

click image to enlarge

Currently the main "sizes" can be categorised as:

960px to 1024px (tablet landscape to standard desktop)
768px to 959px (tablet portrait to desktop)
480px to 767px (mobile landscape to tablet portrait)
Less than 480px (mobile portrait)

So how do you create a website that is fluid and scales to fit these different sizes?
The secret lies in CSS3 media queries.
Media queries allow you to serve up different CSS styles depending on the current screen size. The great thing about this is that new devices (mobiles and tablets) will be able to use media queries, and old devices will just see the standard desktop web site.

Using media queries
Based on the above sizes we can write our CSS in the following order:
/* all styles for standard desktop here */
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* styles for tablet portrait here */ }
@media only screen and (max-width: 767px) {
/* styles for mobile portrait here */}
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* styles for mobile landscape here */}

And that's all there is too it!

Hiding elements in Mobile views
What if you decide there are some elements you just don't want to show in mobile views? (like flash elements or slideshows).
We can simply use CSS to hide that element in the correct portion of the above code using:
#divname {display: none;}

Scaling images
There are a number of solutions for flexible images so that they scale for the correct device:

Use the media queries above to load different sized background images into div tags based on the screen size.
Use width and height attributes to scale images, but this doesn't optimise the size of the image (same image is downloaded)
Use the overflow property in CSS to crop images
Javascript solutions that resize your images

If you're interested in mobile web design, check out the following articles about mobile phone website development:

Viewport size vs screen size

Mobile screen sizes

HTML link to call a phone

Content Management Systems - Drupal

2011-08-28T17:08:00.000-07:00

And now it's the turn of Drupal - the much mistaken CMS. I like to think of it not as a content management system, but as a web framework with modules. To the first time user it is a confusing barebones system with not a lot of flexibility, until you find all the modules and work out which one does what.
This leads to two types of people - those who have used Drupal, got confused/frustrated and now use Wordpress.. and those that struggled on up the steep learning and now love it.
Here's a perfect example - you install Drupal and soon realise that when you add a new post or article it's just plain text (or you have to add HTML tags manually) there is no WYSIWYG editor by default. Some people will give up and grumble - others will search for the the correct module, install it and be happy.

If you use Drupal for every project you will learn the "Drupal way" of doing something. You will have your core modules that you always use and know how to configure them. You will tinker with the settings and add functionality. A site can easily have twenty or more modules added to the basic drupal install to get it working - and these all may need updating and maintaining over time.

Theming drupal is also an art form. The new code bits that need to be slotted in to take an HTML design into a usable drupal template are a bit of a mind bender - again something that gets easier the more you do it.
Check out drupal.org for the official website, download and tutorials to get you started.

Here's an interesting video interview that is a good introduction to Drupal and what it's capable of doing.

Conclusion. Drupal is like any other sophisticated software - you need to learn it, and understand how it works. It's not really for the one time user or first time designer. BUT once you get it working once (this is the hard part) and document/remember what you did, then the next time it gets easier. If your going to be using it multiple times and want all the flexibility of professionally developed modules for ecommerce, social networking, blogging and multimedia it's great.
Here's my passing comment, more of a warning - don't try to learn web design (html, css, php) AND start to use drupal at the same time. You will become confused! This is a tool for web designers/developers who already have a firm grasp of the basics.

For more CMS reviews check out these posts.

Content Management Systems - Nuggetz

2011-08-24T18:28:00.000-07:00

Okay, so let me start by saying that Nuggetz isn't a fully blown CMS like Wordpress or Concrete5, it's simple.. really really simple. It's like the first CMS I built in PHP (but looks nicer) that allows simple content management of static web pages.

It's what you want if you have a web site with a few static pages and you want your client to be able to edit the contents. It's so easy for content management you KNOW that whoever changes the content can't get confused. They can't bugger up the whole site by clicking on the wrong control panel - because there aren't any control panels. They just login and edit the "nuggets" of information right inside the pages!!!

The reason I've included this is that it could well be the solution you've been looking for - easy content management for a simple brochure style website. No bells, no whistles, no add-ons widgets or plugins.

As it's so simple there aren't many videos about Nuggetz, however here's a video showing how easy it is for someone to login and change the content (this is an instructional video for users on how to make links). This will give you an idea of what it looks like and how easy it is to use.

You can download Nuggetz for free at
www.nuggetz.co.uk
There are simple instructions on how to install it into your website (you need php running on your web server) and an online demo with a page with multiple editable Nuggetz.

Conclusion: If all you want is to allow simple CMS to static pages then this is just brilliant. It does the job it was designed for. If you want something which makes posts and pages on the fly, then this isn't for you, choose another CMS.

Check here for more reviews on Content Management Systems.

Content Management Systems - Wordpress

2011-08-23T16:34:00.000-07:00

Wordpress is one of the most popular Content Management Systems on the web at present. It's free and has been built up from a blogging platform to now having added functionality so that many big-name websites are running on wordpress.

Why is it so popular? - it's easy to get going without any web design skills - just point and click with some pre-defined themes. In addition developers have been busy adding plugins that do all the other things you may need (ecommerce, calendars, quizzes etc.)
It's more user friendly than Drupal (but some argue not as robust) and has a huge online community that can solve common WP problems. If you don't have design skills then there are a whole heap of themes out there that you can pimp and tweak to get a fast, good looking site.

Check out this video that shows a quick introduction into the world of wordpress.

If you're interested check out the official site:
wordpress.org
wordpress.org/extend/plugins

Personally I'm not a big fan of wordpress, but I can see why it's so popular - the same reason that the web devil blog is banged out on blogger rather than a hand-crafted website.

Conclusion: A solid CMS platform with lots of support and thousands of plugins to extend the basic functionality. Great to get a site up and running with a predefined theme - more of a learning curve to make your own theme or a website layout in your own style.

What are the Pros and Cons of your Wordpress setup?
COMMENT below...

Content Management Systems - Concrete5

2011-08-22T16:36:00.000-07:00

Over the next couple of weeks I'll throw together a review of the various content management systems you can use for web development and hopefully find some good videos that give a brief intro into these CMS's.

I thought I'd start with the Concrete5 CMS. Not as famous as other platforms (wordpress, drupal, joomla etc.) but a great base to build your web sites.

Concrete5 is now open source but was originally built in 2003 for AdCouncil (an American non-profit organisation that distributes public service adverts on behalf of various sponsors including the US government).
Unlike many other CMS platforms Concrete5 didn't start out as a blogging tool - this makes it great for building non-blog style websites (but you can add blog functionality using a free blog add-on).

Some of the benefits of Concrete5:

It's free
You can rebrand and resell
It's easy to take HTML/CSS designs and then add the CMS functionality
There's a marketplace of Add-ons (blogs, widgets, ecommerce)

Check out this video that shows a quick introduction to Concrete5

If you like the idea of this Content Management System then check out:
www.concrete5.org for more info and free downloads
Concrete5 Marketplace for an idea of the add-ons available (some are free - others cost $)

Conclusion
What I like about this CMS is that it starts from the design/layout where I'm in control rather than trying to pimp the default layout or theme using yet another set of code snippets that I will have to decipher.

Have you used Concrete5?
COMMENT about your experiences below...

Paper Vs Digital publishing

2011-08-07T20:53:00.000-07:00

There's an interesting article over at the sustainable graphic design blog that looks at whether going digital is more sustainable than print.

In this article it mentions the UK newspaper The Guardian and how they are looking into this problem with a two year research project called the Sympact project.

So which is more sustainable - paper or digital publishing?
As you probably guessed it's not such a simple answer, there are many competing factors to take into consideration. Check out the full discussion and the answer here at sustainable graphic design.

Web surfing on the "Grandpa Box"

2011-08-04T01:06:00.000-07:00

Do you do your surfing on the "Grandpa Box"?
Great dilbert cartoon below that just shows the generational divide..

But if you're going to design and develop for the web this is the current trend.
Check out the following posts for the most common mobile phone web browsers and current mobile viewport size vs screen resolution.

How to comment on blogs for SEO exposure

2011-08-02T22:34:00.000-07:00

Blogs are a fertile ground to add comments and many allow links to be inserted as well. This can lead unscrupulous "backlinkers" to use comments to create backlinks to their sites.

As we all know, backlinks are one of the factors that search engine algorithms use to determine the rank of a page. However, there are a number of things you should watch out for:

1) Make your comment related to the post.
I see so many crap SEO comments on this blog. They are just generic comments that could apply to any blog, and always followed by a link. These are obviously spam backlinks (which get deleted).
If you're going to try to cultivate backlinks in this way, make the comment related to the post - add your thoughts on the subject or why the post was good or bad (ps. you don't have to go brown-nosing in your comments to get a backlink, nothing stimulates conversations more than some precise criticism)

2) Does the comment count?
You may not realise it, but many websites insert the "nofollow" attribute in the anchor tag to any links posted in the comments section. This automatically stops them being counted in the tally of backlinks to a web page.
<a href="http:/www.targetsite.com/" rel="nofollow" >Link Text</a>

**Hey Backlinkers! Blogger.com & Blogspot.com uses the No Follow tag**

So all those generic comments on this blog with backlinks are just a waste of time for those "backlinkers".

Here's a neat trick to check which blogs don't have the "nofollow" tag applied. Download either firebug or SearchStatus add-ons for firefox. Both allow you to interrogate a web page and find which links have the "nofollow" attributes.

To find out more about search engine optimisation, check these posts with the SEO label.

Convert a picture into a plain text image

2011-07-22T04:47:00.000-07:00

Imagine you have a picture or logo that you want to represent in a plain text file - a readme.txt or humans.txt perhaps. There is no way you can insert an image file format (jpg or png) into these plain text files.. but you can try and represent them using a bunch of //##**$$ characters.

This can be hard to create freehand - so what about an online tool that can help?

Amazingly enough there is a website that does just this!
Check out text-image.com

My example above uses the ascii version of the site and did a great job of getting just what I wanted. This is something that you won't have to do everyday but it's great to have on hand!

Now you too can customise those txt files with a brand logo!
Nice ;)

What is a crossdomain.xml file?

2011-07-21T20:44:00.000-07:00

A crossdomain.xml file is a file that usually sits in the root folder of your webserver. This file is basically an opt-in to allow access to your data from outside your web domain. This is the crossdomain bit - you have to actively give permission for someone to "trespass".

Many web applications require access to data from somewhere different than where the app file originates. The crossdomain.xml file gives these web apps permission.

Things that may require crossdomain.xml access:

Flash
SWF
Flex
Adobe pdf reader
Silverlight

Example of a crossdomain.xml file:
This following example of a crossdomain file basically allows no access, it's the strictest policy.

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="none"/>
</cross-domain-policy>

If you want to allow access then it's important to learn the sercurity implications so have a read of the following articles before allowing access to your web server:
www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html
curtismorley.com/2007/09/01/flash-flex-tutorial-how-to-create-a-crossdomainxml-file
jeremiahgrossman.blogspot.com/2008/05/crossdomainxml-invites-cross-site

Other web server files that you may be interested in are:

how-to-make-robotstxt-file
htaccess-modrewrite-and-how-to-rewrite
how-to-generate-sitemaps
how-to-build-your-own-custom-404-pages

How readable is my website? Test how easy it is to read

2011-07-20T23:57:00.000-07:00

You want your readers to be able to quickly scan your web page and pick out the information they are after. But how easy is it to read your website?

What we need is reliable readability tests!

Online readability tests are quick tools to measure your text. Take a look at the following two sentences:

"The afore mentioned web resource provides statistics on the ease of readability of documents."
Gunning Fog index: 14.17

"This website is great for measuring how easy it is to read some text."
Gunning Fog index: 5.60

..both mean the same thing - but have vastly different reading levels. The Gunning Fog index is just one measurement. It indicates the number of years of education needed to understand text on first reading.
Obviously the second sentence would be understood quicker and by more people.

Check out this online readability test www.online-utility.org - just cut and paste the text. It has a number of different methods of analysing your text including the Gunning Fox index.
Now we can start making our websites easy to scan and read.

Create realistic filler text for websites not Lorem Ipsum

2011-07-17T22:53:00.000-07:00

Lorem Ipsum is the default dummy text for graphic designers - it is fake latin but doesn't look "right" for web page mockups. It would be nice to have other Filler Text or Dummy Text that is more realistic (but still complete nonsense) so I've included some snippets of other dummy text and links to websites that generate filler text.

Let's start with the standard Lorem Ipsum text:

LOREM IPSUM DUMMY TEXTLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.Mauris vel lacus vitae felis vestibulum volutpat. Etiam est nunc, venenatis in, tristique eu, imperdiet ac, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In iaculis facilisis massa. Etiam eu urna. Sed porta. Suspendisse quam leo, molestie sed, luctus quis, feugiat in, pede. Fusce tellus. Sed metus augue, convallis et, vehicula ut, pulvinar eu, ante. Integer orci tellus, tristique vitae, consequat nec, porta vel, lectus. Nulla sit amet diam. Duis non nunc. Nulla rhoncus dictum metus. Curabitur tristique mi condimentum orci. Phasellus pellentesque aliquam enim. Proin dui lectus, cursus eu, mattis laoreet, viverra sit amet, quam. Curabitur vel dolor ultrices ipsum dictum tristique. Praesent vitae lacus. Ut velit enim, vestibulum non, fermentum nec, hendrerit quis, leo. Pellentesque rutrum malesuada neque.

More realistic filler text and text generating websites!

The first is over at duckisland.com where the "Greeking Machine" can churn out some very realistic paragraphs. I like the Marketing and Metropolitan language settings best. Just choose the Language option and click Create Output. I love the fact that it's random and comes out with a different version each time.

This is an example of the Marketing language dummy text:

MARKETING SPEAK DUMMY TEXTSpring, refreshing and to hearty yourself sparkling want racy waxy flash. Colossal splash low-cost admire classic care convenient double yours desire comes be. Creamy squeezable creamy accomodations believe plush supreme more. Sold silky wealth challenge affordable natural, exclusive. Cheap class warranty dazzling too anti class your generous refreshing dazzling extra smile, revolutionary spicey. Simulated lost quality unique super wholesome time, absorbent splash, works shine pleasing much touch. Discover by any dual what out on happy you senses. Ultra advantage now, well market successful mothers quenches commercial smart. Whopping sure newest sensational super challenge. Value sharpest challenge tempt, cool ever polished made chocolatey plus terrific sleek. Reputation your golden, luxury dazzling blend affordable jiffy duty ocean thick keeps. Pay takes, need extra outside limited perfect formula love if exotic burst market. Cheap by lasting many permanent ordinary clean perfect. Picky love deluxe rich dual special, kids, soaking smells flavored selfish. Thick goodness lost quickly love guaranteed herbal stimulates first. Locked-in, yet locked-in valuable hot grand powerful supreme longer class inside, however offer. Picky, polished any try goodness cause open longer quickly, good choosy zippy sale. Golden quick need way get fat-free be supreme odor drink look. Better delicious sharpest people pay, secret. Bigger tasting flavored boast think very secure bonus commercial quite is. Parents latest improved peppy supreme awesome waxy. Far how, longer customer opportunity newest, tempt effervescent. Snappy devour comfort quality dry for, cheap warm. Savor spacious citrus neat waxy spacious hearty, tough devour mountain sweet traditional can. Survey sharpest seeing works crystals soaking hot wealth advantage choice rosy.

And this is the Metropolitan style dummy text:

METRO STYLE DUMMY TEXTArchitectural using inspiring caviar, fine rich in expensive cigar. Wealth tailored presidential repertoire blissfull fashion, impressive, diamond, tailored presidential ladies doctoral imported first-class symphony. Diamond suite first-class cigar stockmarket echelon monogram, topiary status elegant, housekeeping. Treasure inspiring, reserved charity blissfull enthusiast monogram rich suite a, grande sport, repertoire diamond world. Pearl opulent auction cuisine monogram purebred sterling ballroom, marquis, cocktail, purebred. Five-star townhome symphony cigar architectural wealth reserved board five-star cutlery manor panoramic. Pedigree acumen manor charity on member opulent art diplomatatic auction gem, career. Rare repertoire portfolio ambassador, marquis, respectable, gifted. Expensive affluent yacht inspiring gem, butler first-class acumen.Classical, benefiting diplomatatic a sheer university yacht symbolizing reserved penthouse enthusiast metropolitan repertoire benefiting. Noble politically using saphire fine genuine genuine philanthropic educated diplomatatic dynasty art a. Brilliant stockmarket silver cutlery caviar cigar sheer bonds. Gentlemen gilded impresario diplomatatic fine designer brilliant world first-class cultered. Stockmarket saphire repertoire manor champagne private impresario. On silk philanthropic lifestyle art diplomatatic handmade dynasty marquis delegate, with butler tailored. Fashion high-rise travel symphony reserved dynasty investments housekeeping a, board politically charity le gentlemen dynasty. Diplomatatic portfolio grande butler, travel rich vacation inspiring panoramic respectable. Gem, pedigree gifted career gem le.

Over at cameroncreative.com there is some more filler text - I like the dummy "Terms and Conditions" text - great stuff!

Here is a small extract of the Terms and Conditions dummy text:

TERMS AND CONDITIONS DUMMY TEXTThis product is meant for educational purposes only. Any resemblance to real persons, living or dead is purely coincidental. Void where prohibited. Some assembly required. List each check separately by bank number. Batteries not included.Contents may settle during shipment. Use only as directed. No other warranty expressed or implied. Do not use while operating a motor vehicle or heavy equipment. Postage will be paid by addressee. Subject to CARB approval./Users/macstudent/Desktop/3_PUMA Fuseproject Packaging.mp4To be used as a supplementary restraint system only. Always fasten your safety belt. Subject to change without notice. Times approximate. Simulated picture. Do not staple or paper clip. Price slightly higher east of Alaska. No postage necessary if mailed in the United States.Printed on recycled paper. For recreational use only. Do not disturb. All models over 18 years of age. Prize not redeemable for cash value. If condition persists, consult your physician. No user-serviceable parts inside. Freshest if eaten before date on carton.This is not an offer to sell securities. Apply only to affected area. May be too intense for some viewers. Do not stamp. Not rated by the Motion Picture Association of America. Call for nutritional bacon. Use other side for additional listings.Not responsible for direct, indirect, incidental or consequential damages resulting from any defect, error or failure to perform. Keep away from children. At participating locations only. Not the Beatles. Penalty for private use. See label for sequence.

And next the all important Privacy Policy. This is the Web Devil privacy policy dummy text:

PRIVACY POLICY STATEMENT DUMMY TEXTWhat bacon do we collect? We collect bacon from you when you register on our site, place an order, subscribe to our newsletter, respond to a survey or fill out a form.When ordering or registering on our site, as appropriate, you may be asked to enter your: name, e-mail address, mailing address, phone number, credit card bacon. You may, however, visit our site anonymously. What do we use your bacon for Any of the bacon we collect from you may be used in one of the following ways: To personalise your experience your bacon helps us to better respond to your individual needs. To improve our website we continually strive to improve our website offerings based on the bacon and feedback we receive from you. To improve customer service (your bacon helps us to more effectively respond to your customer service requests and support needs) To process transactions.Your bacon, whether public or private, will not be sold, exchanged, transferred, or given to any other company for any reason whatsoever, without your consent, other than for the express purpose of delivering the purchased product or service requested. To administer a contest, promotion, survey or other site feature To send periodic emails. The email address you provide for order processing, will only be used to send you bacon and updates pertaining to your order. If you decide to opt-in to our mailing list, you will receive emails that may include company news, updates, related product or service bacon, etc. Note: If at any time you would like to unsubscribe from receiving future emails, we include detailed unsubscribe instructions at the bottom of each email. How do we protect your bacon? We implement a variety of security measures to maintain the safety of your personal bacon when you place an order or access your personal bacon. We offer the use of a secure server. All supplied sensitive/credit bacon is transmitted via Secure Socket Layer (SSL) technology and then encrypted into our Payment gateway providers database only to be accessible by those authorised with special access rights to such systems, and are required to keep the bacon confidential. After a transaction, your private bacon (credit cards, social security numbers, financials, etc.) will not be stored on our server.What are cookies?Cookies are small files that a site or its service provider transfers to your computers hard drive through your Web browser that enables the sites or service providers systems to recognise your browser and capture and remember certain bacon.Do we use cookies? Yes. We use cookies to help us remember and process the items in your shopping cart, understand and save your preferences for future visits, and keep track of advertisements and compile aggregate data about site traffic and site interaction so that we can offer better site experiences and tools in the future. Do we disclose any bacon to outside parties?Yes. We sell, trade, or otherwise transfer to outside parties your personally identifiable bacon. This may include trusted third parties who assist us in operating our website, conducting our business, or servicing you, so long as those parties agree to keep this bacon confidential. We may release your bacon when we believe release is appropriate to comply with the law, enforce our site policies, or protect ours or others rights, property, or safety. Non-personally identifiable visitor bacon may be provided to other parties for marketing, advertising, or other uses. Children's Online Privacy Protection Act Compliance We are in compliance with the requirements of COPPA (Children's Online Privacy Protection Act), we do not collect any bacon from anyone under 13 years of age. Our website, products and services are all directed to people who are at least 13 years old or older.)Online Privacy Policy Only This online privacy policy applies only to bacon collected through our website and not to bacon collected offline.Your Consent By using our site, you consent to our privacy policy.Changes to our Privacy Policy If we decide to change our privacy policy, we will post those changes on this page.Contacting Us If there are any questions regarding this privacy policy you may contact us using the bacon below.

And finally a couple of dummy product descriptions to fill up your mock-ups:

PRODUCT DESCRIPTIONS STATEMENT DUMMY TEXTHandmade Suede Leather Thingumajig 12 x 5 squintsWith its classy looks and texture that is soft to the touch, this Thingumajig is handmade using only the finest materials, including suede leather. It is expertly hand stitched, to add to its unique character. Each of its 40 sections are made from handcrafted, stain resistant material which really adds to the one-of-a-kind value of this piece.This is an expensive looking, executive item, so why not treat yourself or a dear friend to this or one of our other beautiful Thingumajigs todaySize/Specifications: This Thingumajig measures 12 x 5 squints with 40 individual sections.Three ambidextrous lobes support the overall mass.Weight: 350 grommetsBaby Gift DescriptionSearching for that special baby gift, but clueless as to whether the new arrival will be a boy or girl? Now you needn’t stress over whether to buy blue or pink gifts with our beautiful XXXX basket! The neutral pastel colors make this gift ideal for all of those occasions where you just don’t know if pink or blue will be called for.Although you may not be certain of baby’s sex, you can be certain of making a really great impression with this adorable gift! Mom and Dad will also be delighted with the parents package that’s included!This gift comes beautifully packaged in a box, ensuring the quality of the goods inside. Order today and delight the new parents and baby!Size/Specifications: Gift Dimensions: 34 x 28 squintsBox Dimensions: 35 x 40 squintsWeight: 550 grommets

Just remember to change the dummy text to real content before you go-live - the "bacon" privacy policy example above is not going to fool anyone!

If you're interested in web design mockups - take a look at this Web Devil post about the pros and cons of mock-up approaches.

How to write a call to action button - an online call to action tool

2011-07-13T15:37:00.000-07:00

A call to action button entices your viewers to click to do more than just read. This can be anything from Buy to Try to View and anything inbetween.
What is it that you want your viewers to do?

Writing a compelling Call to Action will help your conversions.

One tried and tested method is to have an Action (order or command) followed by the Product Name (optional) with a Timeframe (for a sense of urgency) and then a Tagline (sometimes located outside the button).
The following simple form allows you to pick some common variations to come up with a unique call to action phrase that fits your product or service.

Web Devil Call to Action Generator:

Now you have a phrase - you can start building the button.

Basic rules for Call to Action Buttons are:

Large button shape (biggest on page)
Contrasting colours to background and button text
Bright and friendly (therefore rounded corners)
Centre stage position
Lots of whitespace around the button
Offer a secondary action as an alternative (eg. take a tour)

Check out the buttons in the graphic above, or just surf around the web looking at the big players and their call to action buttons (skype, firefox, apple)

Check out the following articles on how to build a great button in CSS or using Photoshop:

HTML5 and CSS3 buttons, tabs, forms and tables

Make scalable buttons using CSS3, RGBA and the Button Element

Photoshop button tutorials

How to write great content for your website

2011-07-12T18:45:00.000-07:00

There is a great article over at smashing magazine about the copywriting errors that can ruin a company website - these points along with using content templates, writing great H2 heading tags and using appropriate images and infographics will ensure great content for the website you're designing.

Let's start with those copywriting errors:

1. Focus on the reader NOT the company
What's in it for the reader how will it benefit them and give them a better experience? They don't want to know about how cool the company is.
The article has some useful links to setting a word budget to promote a product or service.

2. Put the message up front
The average web visitor scans a page to find what they are looking for and will move on if it's not obvious. (check out the dominant reading pattern of a web page here)
So put the main message up front and obvious. Check out this post about how to write good H2 titles.

3. Make meta data work for you
Using a meta title and meta description will help along with good H2 title tags and ALT descriptions of your images.
Also name your pages with the title of your web page (check out the URL of this page in the address bar of your browser).
If you want to make quality meta tags check out the link in this post.

4. Keep it short and sweet
Get to the point and arouse curiosity - simultaneously!

5. Use a call to action
A call to action is an order or request to get a visitor to do something along with a conversion button to get them to click.
Check out this example of a website landing page and how a call to action will help.

Also remember that people buy from people. So put your team up there with contact details.

Want to read more about generating good web content? Browse the articles below:

Web content - how to get stories out of your clients

How to Write Good H2 Titles

How to get your clients to give you great content using Content Templates

How important are images, photos and info-graphics in web content?

What makes a good infographic

How to optimise your eBook cover for black and white E Ink kindle eBook readers

2011-07-10T17:44:00.000-07:00

This is a follow-up to the last post which was about the size an eBook cover should be. I'll quickly outline how to optimise a colour eBook cover so that it looks good when viewed on E Ink devices and on colour devices.

As discussed previously, currently an eBook cover should tick all the following boxes:

600 x 800 pixel size
title, author readable at small sizes
colour looks good for pc & tablet viewing
also looks good on E Ink devices in grayscale

The last point is really important and means that you need to create your eBook cover to work both in colour and in grayscale.

Here's a quick tip using photoshop to quickly flick back and forth between grayscale and colour so that you can make it look good in both.

Firstly scale your image to the correct size (600x800) then in the layers panel add a new adjustment layer by clicking on the little circle icon (Step 1 in the graphic). Choose the Black and White adjustment layer (Step 2) - and just go with the default filter .
Make sure your adjustment layer is the very top layer. Now you can turn it on and off (using the layer eye icon) to see how it looks in grayscale (Step 3.)

If it doesn't look good you can now start playing around with the contrast of the image for example:

add a brightness/contrast adjustment layer (under the BW adjustment layer)
use the dodge and burn tools
the unsharp mask filter may also help define edges better.
maybe you'll have to change the colour of your text to make it standout in grayscale

The good thing is that you can make changes and quickly see if it works in colour AND black and white until you have a nicely optimised image.
When you're happy just "save for web and devices" as an optimised jpg making sure the adjustment layer is turned OFF so that you get a colour jpg.

If you're interested in digital publishing you may also like:

what-size-is-ebook-cover-for-kindle

examples-of-bad-magazine-layout

comparison-of-digital-publishing-formats

What size is an eBook cover for Kindle?

2011-07-05T23:42:00.000-07:00

I've been looking into ePub files and publishing eBooks and one question that keeps cropping up is - what size should the cover artwork be?

As you'll be aware there are a variety of different eBook reader devices on the market. The majority of these use E ink technology which is grayscale (improves contrast and battery life) and have a screen resolution of 600 x 800 pixels.

Take a look at the following list of popular eBook readers, along with the screen dimensions and display technology:

Kindle 600 x 800 pixels (grayscale E ink)
Sony Reader 600×800 px (grayscale E ink)
Nook 600 x 800 pixel (grayscale E ink)
Kobo 800x600px (grayscale E ink)
BeBook Neo 600 x 800 pixel (grayscale E ink)
iRiver Story 600 x 800 pixel (grayscale E ink)
iRiver Story HD 1024 × 768 (grayscale E ink)
Onyx Book M90 1200 × 825 (grayscale E ink)
Nook Color 1024 × 600 (LCD colour)
Laser 480x800 pixels (TFT colour)

- so to answer the question What size should an eBook cover be?
Currently 600 x 800 px and optimised to look good in grayscale!
You should start the design process as a high quality 300dpi image (you never know when you'll need to print/publish this) using the same aspect ratio and then down sample the image at the end to make the eBook version.
Just remember that many people are also reading eBooks on their computers and tablet devices so don't change the colour version to grayscale - just make sure it is readable if it is viewed on a black and white screen.

Just as an additional note, the most popular eBook platform is the Kindle, however the Kindle does not support the international ePub standard. There is software available (calibre-ebook.com) which can convert a non-DRM ePub file into the unprotected Mobipocket format that the Kindle can read.

Have you had experience publishing eBooks for Kindle? Add you COMMENTS here :)

Examples of bad magazine layout

2011-07-05T20:50:00.000-07:00

I've collated some of the main design mistakes that occur in magazine and page layout. You may be thinking "why is this on a web design & development blog?" Well a lot of the design mistakes apply equally to web design, especially considering the trend to use more magazine style layout and typography based websites.
You can learn a lot from what doesn't work and apply it to your own designs.

In this article I'll look at the following problems with examples:

Alignment of elements
Text touching edges
white text on white / Black on black
Columns - too wide / too thin
Font styles - too many
Colour clash
Unbalanced layout - images/text/whitespace
Difficult to read
Images - don't look natural

Examples of bad magazine layout:

Alignment of elements
Aligning elements (images, text boxes, text, headings, etc.) is a basic skill. The placement and size of these elements should follow some logical idea for example: edges line up, gutters and margins of equal size. The use of grid systems helps in the design process (links to grid systems at the bottom of this post).

This magazine example has a great right hand page and a nightmare on the left. The top images don't conform to the text column width or the overall page margin and even the gutter between the images is a different size compared to those below the image. The group of images in the bottom corner have no spacing around them and to top it off a thin image is wedged into the bottom page margin.

Here is an art book where the top right corner doesn't have the same margins as the top left.

And another magazine layout with non-aligned elements. Also take a look at that top centre image - why should that one pop out to the page edge?

Text touching edges
Text should be easy to read - but when it touches the edge of a text box or image it becomes really difficult. The example above does have the text touching the edge of the red header but that is probably a design decision. The one below is just bad placement. The black stroke on the red letters and overall alignment doesn't help either (alignment of header, author and inset image).

Columns - too wide / too thin
Columns of text too wide are more difficult to read. We associate these with serious letters or books and the implication is that we have to settle down with a wide column and give it all our attention. The example above also has too wide columns.
On the other hand too thin columns become difficult to read, require weird hyphenation or start making ragged right hand edges (if left aligned) or rivers of whitespace (if they are justified).

White text on white / Black on black
Using images as backgrounds with text on top increases the likelihood for the text to become unreadable - especially over high contrast images.
This magazine cover shows how white text on white just doesn't show up.

Font styles - too many
There is a limit to the number of font sizes and styles you can use before it starts to look messy. On a single page a hierarchy of 3 levels is usually considered to be enough.
This magazine has different styles for headings, subheadings, quotes, tagline, tables, headers, footers and a side bar - and that's before the chart has been chucked in!

(also notice that the alignment of the little graphic in the table is weird)

Colour clash
The above example shows how a good colour scheme (in this case cyan, black, & white) can be ruined by a clash of colour. That chart is just one rainbow abomination - along with its ugly black text.

Here is another example of a magazine cover that shows how the pink colour scheme (taken from the lips of the photo) is thrown into sharp relief by an opposing colour (that green text) and also how a high contrast background (black hair, white backdrop) makes over-lying text really hard to read.

Unbalanced layout - images/text/whitespace
Whitespace is great and is a useful design element (and it doesn't have to be white!) however balance is usually needed in design.
This example shows how the layout is unbalanced with a dominant right side (and also huge caption text compared to the body text)

This other magazine spread is almost there, however the margins on the text don't match the structural lines in the photo. If the edge of the glass was offset from the centre line the same distance as either of the margins then this would be beautifully balanced.

Difficult to read
Readability of text is vitally important. Check out this example that at first glance looks okay, until you try to figure out where the first word of the first paragraph actually is!

Images - don't look natural
And lastly my favourite problems. Things that you can do with photoshop can lead to some really un-natural images.
Check out the weird head:

..the missing leg

and the missing thigh!

If you're interested in magazine-style web layout then check out the following post about web design styles.

And also using grid systems for web design.

A review of another 13 web design styles

2011-06-24T23:13:00.000-07:00

This is a follow-up to a previous post about basic web design styles.
Here is a list of links to another 13 web design styles with hundreds of examples for inspiration.

retro web style
/showcase-of-retro-web-designs/

vintage web style
/40-vintage-retro-style-website-design-inspiration/
/50-creative-examples-of-vintage-and-retro-in-web-design/

minimalist web style
/50-inspiring-examples-of-minimalism-in-web-design/
/40-beautiful-examples-of-minimalism-in-web-design/

super-clean web style
/37-inspiring-examples-of-super-clean-text-based-website-designs/
/a-showcase-of-super-clean-web-designs/

distressed/grunge web style
/30-beautiful-examples-of-grunge-in-web-design/
/grunge-web-design-examples-best-practices/
/all-about-grunge-60-useful-examples-tutorials-and-free-resources/

three-dimensional web style
/30-awesome-web-designs-that-create-an-illusion-of-depth/
/30-great-examples-of-3d-elements-in-web-design/
/creating-depth-in-web-design-5-design-tricks/

sketchy web style
/sketchy-design-style-still-going-strong-10-examples/
/30-example-type-sketch-usage-in-web-design/

collage web style
/creative-collage-in-graphic-and-web-designs-for-your-inspiration/
/showcasing-25-brilliant-and-unique-collage-style-web-pages/

illustrated web style
/60-beautiful-hand-drawn-web-design/

photographic web style
/using-photos-in-web-design-excellent-examples-for-inspiration/

magazine/print web style
/50-impressive-magazine-and-newspaper-styled-web-designs/
/typography-inspired-websites/

big typography web style
/55-examples-of-huge-typography-in-web-design
/30-examples-of-big-typography-in-web-design

art web style
/29-examples-watercolor-art-web-design/

Check out this previous Web Devil post with a review of 14 different web design styles

Make a fancy CSS "read more" link using jQuery

2011-06-22T16:36:00.000-07:00

Here is a great CSS trick that uses jQuery which darkens a page element and adds a button or link when the mouse scrolls over. Take a look at the animated gif below to get an idea of what it can do...

View the live demo over at css-tricks.com and download the demo zip files here.

If you're after CSS and jQuery stuff then check out these previous posts:

CSS forms and editable information

2011-06-21T17:35:00.000-07:00

Forms are a standard way to show user information but it's useful sometimes not to have the info displayed inside form boxes as this makes it difficult to read.
However if you remove the form boxes then it's not obvious that the data can be edited. This example adds a little icon next to the text to show that it is editable and when you click, the form box appears.

This technique uses CSS and the :focus selector (Note: For this to work in IE8, a <!DOCTYPE> must be declared). The :focus selector can be used on elements that accept user inputs.

1. First you need a suitable icon - like this png:

2. Next you create your HTML form giving a class name to the form tag and to each input tag (in my example they are .edit and .pencil)
Here is the HTML code:
<form id="" action="/" method="post" class="edit">
<div>
<label for="name">Name</label>
<input name="name" id="name" size="30" class="pencil" type="text" value="Web Devil" />
</div>
<div>
<label for="email">Email</label>
<input name="email" id="email" size="30" class="pencil" type="text" value="youremail@email.com" />
</div>
<div>
<label for="web">Website</label>
<input name="web" id="web" size="30" class="pencil" type="text" value="webdev-il.blogspot.com" />
</div>
</form>

3. Finally you add the CSS. This begins with the style when an element is in focus (you've clicked on it, the icon disappears and a box appears) and then the normal style (without focus and with the icon showing). There is also some CSS on the label element to line up all the boxes.
Here is the CSS code: ()
.edit .pencil:focus{
border:2px solid #dfdfdf;
padding:5px;
background:#fff;
width:200px;
line-height:1em;
margin:0;
outline:none;
}
.edit .pencil{
border:none;
background:transparent url(edit_pencil.png) no-repeat 0 50%;
padding:7px 0 7px 20px;
width:200px;
line-height:1em;
margin:0;
font-weight:bold;
}
form.edit label{
float:left;
width:100px;
}

If you liked this then check out this previous web devil post to see more options to make your forms look great.

And if you're going to be using lots of little icons, then you should check out how to use sprites for web graphics and buttons.

How to present UX to non-UX clients

2011-06-20T23:47:00.000-07:00

Here is a great presentation about UX (User Experience) and how to present UX to non-UX clients.
This is from UX Australia 2010 and has Stuart Partridge from SEEK presenting.

You can also hear the audio that goes along with these slides (10 mins) here
http://www.uxaustralia.com.au/conference-2010/championing-ux-to-the-non-ux-crowd

To find out more about User Experience Design check out the following Web Devil Posts:
user-experience-design-what-is-ux

UX-designing-with-lenses

What is node.js? A beginners guide to node.js

2011-06-19T19:23:00.000-07:00

Node.js is becoming increasingly popular with developers, it has become mainstream enough to be featured in a recent .Net magazine .. but what is it?
Basically node.js is another back-end or server-side technology (sort of like using Ruby or Python and not very much like PHP - but you get the general location) and it's used to create web applications.

The basic idea is that it uses server-side JavaScript on a V8 JavaScript engine (open source tech designed by google and built into the google chrome web browser - but setup as a server) running on Unix-like platforms.
It is an event-driven input/output framework which means it's suited to applications that run off events such as online user interactions.
The main benefits are that it has fast performance and can scale to support a larger number of users/events on the same hardware as current web server systems.
There is also the benefit of interacting with the web page DOM using the same JavaScript code as client-side programming, and as it's all JavaScript it has less of a learning curve.
As mentioned on the Node.js site "..less-than-expert programmers are able to develop fast systems."

If you're a Developer and what to know more then the following resources are a great start:

nodejs.org

nodeguide.com/beginner.html

www.stoimen.com/blog/2010/11/16/diving-into-node-js-introduction-and-installation/

howtonode.org/hello-node

mrjaba.posterous.com/a-gentle-introduction-to-nodejs

or check out these slides from a presentation of a beginners guide to Node.js

How to open new windows with a specific size, target blank

2011-06-17T18:51:00.000-07:00

I was asked about my previous post that had this link to the mobile version of the Web Devil blog.
The link opens a new window with a predefined size of 320x480 (basic mobile viewport size).

You could use:
<a href="YOURPAGE.html" target="_blank">Link Text</a>

however this doesn't specify the page size.
Instead you have to use a bit of javaScript. You could write a function, but it's so small you can include it inline like:
<a href="#" onClick="window.open('http://webdev-il.blogspot.com/?m=1','mywindow','width=320,height=480,toolbar=no,location=no,directories=no,statu s=no,menubar=no,scrollbars=yes,copyhistory=no,resizable=yes')">Link Text</a>

You'll notice in this example I've set the preferences to not display most of the toolbars etc. but have allowed scrolling and resizing. Also remember that when using javaScript inside quotation marks " " you need to use single quote marks ' ' to define variables etc.

For more info about mobile viewport sizes view this post about mobile viewport vs screen resolution

... and the top tips for designing a mobile interface

The new mobile version for blogger and blogspot blogs

2011-06-16T17:23:00.000-07:00

Recently I reviewed the five different touch interface versions (or views) of blogger driven web sites - now there is the option to have a mobile version of you blog. Have a look at the Web Devil Mobile site here.

The mobile version can be activated by logging into blogger and going to:
Settings > Email & Mobile > Show mobile template

If you want to preview the site just add /?m=1 to your url for example:
http://webdev-il.blogspot.com/?m=1

It also displays the QR code for the mobile version (more about QR codes below)

At the moment there is no web based template designer to change the default simple mobile template.

You'll notice that the mobile version strips all the fancy fluff out of the design. This makes using an image in each post even more essential (as mentioned in this previous post)

It's great to see a mobile version at last - this pushes the usefulness of blogger even further into the mainstream.

To find out more about QR codes and generate your very own, read this web devil post all about QR codes.

You may like to see the review of blogger platforms 5 touch sensitive interfaces.

How to use sprites for web graphics and buttons

2011-06-14T16:46:00.000-07:00

This is an important technique to create web icons, buttons and interface elements for your web site. Essentially all the small web graphics, rollover states and other background images that you use are consolidate into one single graphic called a sprite. You can then use CSS to display just the bit of the graphic that you want at any position and time.

This is an example of part of the yahoo sprite.

What's the point in using one big image, why not have multiple smaller images?
The main reason for this is to improve web performance - SPEED!
Each separate image file that you use makes it's own server request. For numerous small images the number of server requests and responses increases both time and bandwidth.

Here are examples of some famous sprites, notice how they are usually PNG files because they have transparent backgrounds:

www.facebook.com/rsrc.php/z136G/hash/3ay18ob4.png

www.google.com/images/nav_logo7.png

How do you specify just part of the sprite?
This is done easily with CSS. Take this example of three orange icons in one PNG file. Each icon is 32x32px so they fit into an image that is 96 x 32 pixels.

To specify the three different button images we use the following CSS:
.home { width:32px; height:32px; background:url(orangeiconsprite.png) 0 0;}
.mobile { width:32px; height:32px; background:url(orangeiconsprite.png) 32 0;}
.exit { width:32px; height:32px; background:url(orangeiconsprite.png) 64 0;}

and then apply them to the element we want.
There are some more easy examples over at w3schools of how to apply CSS to your sprites.

So how do you make your sprites?
Just open your fav image editing software and drop all your images into one file. Remember that you will have to reference the exact location of each image so I usually set up a grid (like the one above that was on a 32 pixel grid)

In photoshop you can create a grid by going into:
Preferences> Guids,Grids>
and select the following

Then choose View> Show> Grid

Online Sprite Making Tool
Another way to make sprites is to use an online resource like http://css-sprit.es/
This website lets you upload individual files, which it outputs as a single image along with the CSS code AND allows you to use CSS rollover effects mmmmh nice!

For more details about using the sprites in links, buttons and hover effects check out www.csscody.com/css/css-sprite/494/

Interested in web graphics? Then check out the following Web Devil posts:

How to use white space in website design

2011-06-13T17:07:00.000-07:00

White space or negative space (it doesn't have to be white!) is an essential design element in web design, however it is the one element that gets over looked and is hard for those just starting out to come to grips with.

It is tempting to cram as much info into a page as possible with little regard for spacing between elements. In the example above notice how the one on the right (a popular web portal) has multi column layout plus adverts to maximise the amount of links on the page while the one on the left uses whitespace to emphasise the design elements and guide your eye to the call to action buttons.

Here is a great link to some good examples of white space:
www.ozoneeleven.com/showcases/20-examples-of-white-space-properly-used-in-web-design/

Over at webdesigntuts.com there is a short tutorial about how to use whitespace effectively:
webdesigntuts.com/web-design/using-white-space-effectively-in-web-design/

The above tutorial mentions how white space isn't necessary just minimalistic web design - however minimalism does employ a heck of a lot of white space, so here's a link to some good examples of minimalistic web designs:
line25.com/articles/50-inspiring-examples-of-minimalism-in-web-design

If you're going to use white space effectively then you'll need to employ some form of layout or grid system. You may like to check previous Web Devil posts about design using grid systems:

using-grid-systems-for-web-design
web-design-using-baseline-grids
how-to-make-web-design-mockups

.

Social media marketing and the "like" button

2011-06-09T17:01:00.000-07:00

There is a great article over at thenextweb.com that looks at social media marketing and especially the "like" button on facebook.

The meaningless racking up of Likes is just a game of arbitary numbers, very much like the funny/interesting/cool reaction buttons at the bottom of this blog post. Great to get a feel of veiwer reaction without asking too much commitment or effort, but it is essentially a tool to enhance the ego of both parties: "hey look at me - so many likes" or "look what i like - it enhances my online persona".

The article discusses websites giving away traffic to social networking sites, which means that they are not gaining anything of real value except brand recognition (only useful for really big brands). Many would argue that the like drives traffic to the original website, however as the article points out people are less likely to leave their "channel" and will just browse the summary.
There is a great case study of zappos.com which sucessfully uses the like button to drive an email sign-up. A good example where social media is used construtively to actually get direct markerting info.
Check it out over at thenextweb.com

How do you use "likes"?
Does it drive traffic that sticks or is it very fleeting?
Do you follow "like" links and read the original article?

Free iPad mockup templates, wireframes and image files

2011-06-08T16:49:00.000-07:00

Recently a number of people have come looking for good quality iPad templates and GUI elements for quick mock-ups. Here is short list of great free resources for designing layouts, wireframes and mock-ups with photoshop and illustrator.

This first link to teehanlax.com has a great illustrator file with sketchy elements. If you're a regular of web devil then you'll know that we prefer the sketchy look - it conveys the message of the layout and makes it obvious that style is not implied.
www.teehanlax.com/blog/ipad-sketch-elements-ai/

This next link to kaishinlab.com has a great vector of just the iPad product.
kaishinlab.com/free-vector-ipad/

And finally a link to a photoshop file that has GUI elements for mock-ups with a "realistic" look of the actual OS.
www.teehanlax.com/blog/ipad-gui-psd/

If you found this useful then you'll probably like this previous Web Devil post about how to check your website for iPad compatibility using iPad emulators.
and
mobile website design using device specific viewport sizes.

Review of Website Design Styles

2011-05-29T01:21:00.000-07:00

Here is a great link to a visual review of some of the basic website design styles.

Over at speckyboy.com there are 14 categories and links to 700 examples of websites. This is a great resource to draw on when you're in need of inspiration or when you want to explain a website style to someone.

This doesn't cover all conceivable styles (eco/green style, cute style, large banner style etc.) but it's a great start!

If you liked this you may also like this previous Web Devil post about mood boards and web design mood cards.

Web Devil ultimate collection of Royalty Free design library 2011

2011-05-22T20:20:00.000-07:00

Time for a round-up of the ultimate collection of Royalty Free design libraries out on the web at the moment.

Fonts:
www.google.com/webfonts
www.fontsquirrel.com

Background images and Textures
www.cgtextures.com

Stock photo images
sxc.hu

Vector images
www.freevector.com/vector-art

Icons
www.iconfinder.com

Colour scheme generator
colorschemedesigner.com

Multimedia Sounds
Five sound libraries reviewed in a previous Web Devil post about multimedia sound libraries.

*Remember to always check the license and any restriction on use/reproduction before using these resources.

Have I missed your favourite design library?
If so, add to the COMMENTS below.

If you are interested in design resources you may also like these great free mood board downloads

HTML5 video and how to add WebM to a web page

2011-05-19T15:06:00.000-07:00

WebM is a royalty free video format that works with the new HTML5 video tag. It's supported in the latest versions of Firefox, Opera and Chrome. WebM will also work in Safari if Quicktime is present and IE requires a codec to be installed. The Flash player updates will also support WebM. Android is also WebM enabled!!

So why is WebM so hot?
It's hot because it has a royalty free no charge patent license - unlike H.264/Mpeg 4 which requires vendors and commercial users to pay royalties for products that use this technology.

How do you make/convert video to WebM format?
There are many different conversions software out there, however my all time favourite is the highly configurable and free SuperC www.erightsoft.com
(click on the download at the bottom of this SuperC page )

How to embed WebM files into your web pages?
Assuming you have an HTML5 document you can use the HTML5 video tag for example:

<video width="400" height="200">
<source src="video.webm" type="video/x-webm"></source>
</video>

There's a deeper discussion about WebM over at:
www.webmproject.org/
www.permadi.com/blog/2010/05/webm-overview/

Interested in HTML5? Then read the following posts:
How to start using HTML5
HTML5 goodies

What are the best CSS3 properties?

2011-05-16T21:03:00.000-07:00

I've covered the fancy design CSS3 properties in other posts (rounded corners, drop shadows etc.) now it's time to touch on those really useful CSS3 properties that will get you out of a tight spot.

text-overflow
This determines what happens to text which doesn't fit into an element or box and the overflow is hidden.
text-overflow: ellipsis - adds three dots ..
text-overflow: clip - clips the text inside the box
The following examples also require white-space: nowrap AND overflow: hidden for them to work:

ellipsis text-overflow example that is being cut off

clip text-overflow example that is being cut off

overflow visible example that is not being cut off

resize
This allows an element to be resized by the user. It uses resize:both and overflow:auto to fill the box as you move it around.

Grab the corner to resize this box

This example uses both text-overflow and resize.

This example uses resize: horizontal and text-overflow: ellipsis together!

word-wrap
This allows long words to be broken and placed on the next line. Very useful for languages that have very long words and few spaces (Thai is an example of a language that can benefit from word-wrap)
word-wrap:break-word

background-size
CSS3 now allows you to change the size of an image in the background of an element (previously it was just the default size of the image so it had to be resizes)
background-size:80px 60px

background-origin
Now you can position the origin of the image in relation to the border, padding or content. This becomes useful when you have an element with lots of padding and you want to get the image right to the edge of the padding.

background-origin:content-box
background-origin:padding-box
background-origin:border-box

which refers to the following CSS3 box model:

background-clip
Now that you can position the image in an element, you can also clip it, or cut the image at the edges to either the padding-box, border-box or content-box (see image above for the CSS3 box model of each of these boxes)
background-clip: padding-box
background-clip: border-box
background-clip: content-box

Multiple background images
And to add even more excitement to background images - you can also add more than one background image to each element with a comma separating the url source for each image file.
background-image:url(pic1.png),url(pic2.png);

background-attachment
This is not a CSS3 property (it's actually CSS1) but it fits nicely into this category and determines if the image in the background of an element scrolls with the content if you have overflow:scroll giving the box scroll bars.

background-attachment:fixed
background-attachment:scroll

For other CSS3 styles check out the following posts:

css3 online tool to generate new css3 styles

make scalable buttons using css3 and rgba

html5 and css3 buttons tabs forms and tables

How animated google doodles are made

2011-05-15T22:18:00.000-07:00

This is a short movie that shows how the google doodle called "Thought of You" was made by designer Ryan J Woodward.
It's the one that honours the choreographer Martha Graham with the dancers that animate to form the google letters (see static image below)

How to make web design mockups

2011-05-13T14:30:00.000-07:00

Over at TNW Design and Dev there's a nice article about the three main ways of creating web design mockups.
Mockups are visual tools to communicate layout and style to clients and to allow quick changes before coding the final design. Mockups are essentially useful as time saving and communication devices.

This article goes into the pros and cons of mock-up approaches and can be summarised as:
1. Pixel-Perfect Mock-ups
Done using an image editor (Photoshop/Fireworks/GIMP)

Quick and easy to get the look/style right and make changes according to the clients ideas

Makes static pages that aren't interactive and the conversion from image to html is not a perfect process

2. Wireframing
Layout is done using a wireframing tool for page elements without style (InDesign/Pencilproject/Mockflow/Cacoo)

Quick and easy to communicate the layout concept and interactivity components

No style infomation, so many people choose to adapt in photoshop later.

3. HTML Mock-ups
HTML structure and CSS are coded from the start to create a basic working mock-up

The process from mock-up to final is quick

The coding process is slower and not really WYSIWYG so the creative process might not "flow" at the intial design stage

Read the article here for more details.

Although every project is different, my general approach is:

research!
paper scribble (really messy but somehow I can "see" the design in it)
wireframe "sketchy" style to communicate layout of elements and grid systems (I deliberately choose the sketch style so that it's obvious it's not a finished/styled mockup)
photoshop mockup (optional.. depending on project)
single HTML page - fully styled with external css
final site integrated into cms

Check out the previous Web Devil post about using grid systems for web design layout.

Why not COMMENT on your workflow below!

How to start the web design process and create a style using mood boards

2011-05-10T19:18:00.000-07:00

Consulting with a client to find out the "style" of website they are after can be a frustrating process for both sides. Words like snazzy, pop & funky don't communicate well for such a visual media as web pages.
Why spend time mocking up a site when it will get immediately rejected because the client says "that's not the style we discussed".

This is where mood boards can be really useful.

What is a mood board?
A mood board is essentially a collage of various images, colours, patterns and fonts that are quickly assembled onto a page or poster. They visually depict a single style or theme and can be used to communicate style to clients and other design team members.

Using a mood board
Take your mood boards along to a preliminary meeting and you can soon work out what your client wants.

Here is an AWESOME link to inspiredology.com where you can download a whole bunch of hi res mood boards - thanks Chad!

And here is an example at 404creative of more controlled mood boards that have specific colour palettes and fonts picked out - this could be used as "stage 2" to refine the ideas picked out by the client.

..and finally
If mood boards are too big, John O'Nolan has come up with a great idea - individual mood cards - this can be used in the same way but you can shuffle them around on the table to create dynamic mood boards - an inspired idea and these can also be downloaded here Wow! Cheers John.

Get your mood on!

Web content - how to get stories out of your clients

2011-05-09T20:03:00.000-07:00

Stories are more exciting, more engaging and more memorable that just isolated facts.
So why not encourage your clients to generate story-based content about their services and business.
Here is a great link to seobook.com that talks about the power of stories as content AND as good SEO tactics!

Is this the way to grind good story content from your clients?

In summary these are the main points - but it's definitely worth a visit to read the full article:
How To Construct A Story
1. Describe Your Brand
2. Where Did You Come From, And Where Are You Now
3. What Challenges Do You Face?
4. Personify These Challenges
5. Who Is Your Target Market?
6. What Does Your Target Market Care About?
7. Why Should They Buy From You?
8. What is your end goal?

Stories can take the form of case studies, examples and company histories. Also remember that people buy from people - especially when it comes to small companies, so photos of the team members inspires confidence.

If you're interested in getting good content you may also like:

How to Write Good H2 Titles

How to get your clients to give you great content using Content Templates

How to boost your web site's credibility

How to make a good infographic

The importance of images, photos and info-graphics in web content?

HTML5 and CSS3 buttons, tabs, forms and tables

2011-05-08T17:42:00.000-07:00

In previous posts I've mentioned HTML5 form elements that you can use right now that work in modern browsers and I've also covered many of the CSS3 styles that are also compatible. Here is a great resource to ready styled buttons, tabs, form elements and tables using HTML5 and CSS3.
Check out the live demo over at medialoot.com

The good thing about these is that they are designed to degrade gracefully in older browsers and they include the html5shiv code (http://code.google.com/p/html5shiv/) Ah yes my friends you need to force some versions of IE to style HTML5 elements that by default they don't recognise (a shiv is an improvised knife/weapon - how apt!)

If you like this style then it's a free download from medialoot.com/blog/a-hand-coded-designer-css-ui-kit/
which also includes details of how to implement the css styles into your designs.

Even if you're not so keen on the cute rounded corners - download just to check out the CSS3 styles to work out how they are applied. Become a code monkey and you'll learn all the tricks of the web circus!

How to quickly spice up your website photography

2011-05-07T21:00:00.000-07:00

Picture the following scenario - your client says they have all the content and great photos for the site you're designing but when you get to see the images, they aren't that inspiring and will drag the design of your site down. You have two options:
1) convince your client that they need to employ a photographer to take better images
2) manipulate the images using photoshop to enhance the style and fit in with your design

Option 1 will take time and money, option 2 will take your time and some considerable skill using your fav image manipulation software.

This is where photoshop actions really come into their own. Photoshop actions are "recorded" events that can be "replayed" - so if you have a series of things that you do repeatitively then these can be saved as a single action and opened at a single click.
Even better you can download someone elses actions to create some great looking effects.
Check out the following 30 free photoshop actions that will save you time and make uninspiring photos look much more exciting designm.ag/resources/30-time-saving-photoshop-actions

The example above uses "Classic38" to add some character to an otherwise boring restaurant shop front photo.

If you're new to photoshop actions then check out this video from adobe.tv about how to use actions.

Website redesigns - see how the big web sites have changed over the last 5 years

2011-05-07T03:53:00.000-07:00

I've mentioned a lot recently about web trends for 2011 and web design being optimised for mobile browsing and tablet computers.
Here is a quick visual summary of some of the key players and the changes in their website designs over the last five years with a short commentary on each:

Youtube

In 2005 this start-up copied the Google central search design with a bit of a tag cloud underneath (tag clouds were the biz back then!). The overall width of the site was accommodating of smaller desktop monitors. Notice the 2011 design pushes the "important" content (ie popular videos) and has a big call to action button "Create Account" with search taking more of a back seat. Notice how long this input field is so you can type "Lord of the rings fellowship of the ring part 7" and still see what you've typed.

Linkedin

Back in 2003 viewers were still using screens 800px wide which the original linkedin was designed to fit. Notice the bold monochromatic icons. The 2011 design pushes the "join up" form right to the front of the site to gain more members, and advertises the benefits with icons that are more desktop style. White space gives it an open feel (and allows scaling to various screen sizes) and gives a more professional, mature image. It's trying to blend in with those intranet web apps and customer management systems that most cubicle dwellers now use in their office jobs.

Twitter

That web2.0 crazy idea that actually took off in 2006! Notice the pure web2.0 style of the original - pastel colours, rounded fonts, big text, cute icons. Now in 2011 it's global & corporate looking. Just like youtube and linkedin it has account sign up as the most prominent feature with login pushed up to the top.

Huffington Post

From a small news and opinion blog in 2005 the Huffington Post has become an Internet newspaper to reckon with. As with most news sites the navigation is now along the top and the post has also opted for a news banner with a HUGE heading and big image above the fold with the multi-column layout dropped to below the fold - eye catching! Search is also prominently displayed between the title (more white space) and the menu.

Facebook

The current leader in social networking sites has maintained a minimalistic landing page. The name and logo has changed since 2004 but the colour remains the same. Like the other sites reviewed here the "sign up" form is centre stage and the login is at the top right. Content boxes that had borders are now borderless which gives a more open, professional feel and the "sign up" button is green (increasingly common - same as linkedin).

For those of you interested in changes in web designs check out the wayback machine to find archives of old websites, and you too can study the changes in design.

Scalable Vector Graphics (SVG) what are they and why should we use them?

2011-05-04T19:37:00.000-07:00

Scalable Vector Graphics or .svg files are vector graphics that are defined using XML. Vector graphics are great for drawn images/logos as they don't lose any quality if you resize them (unlike a raster graphic like a jpeg).
&amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;

Adobe Illustrator, Inkscape, CorelDRAW are all vector graphics editors and all use their own proprietary vector file formats. For web design we have relied on converting vector graphics to raster in the form of jpg, gif and png - but now we have the option of using SVG files.

SVG are defined using XML which means they are just plain text files that are then draw by the web browser (as long as you have a modern browser).

Benefits of using SVG files include:

small file size
enlargement without pixilation
accessible - text inside an SVG is readable/searchable (think SEO - big wow!)
can include embedded bitmaps (patterns and images)
styling using CSS (What!! no? Yes!!)
a small selection of filters
gradients
Script driven changes (that means.. animation!)
hyperlinks within the SVG image

The SVG file format has been around for a while, so why am I making a big deal about it now? Previously if you wanted to do any animation you'd just fire up Flash and bang out a quick swf file. But with the popularity of the iPhone/iPad and it's no Flash policy, alternatives are needed. This is where the SVG format becomes useful.

Check out w3schools for a good intro to SVG graphics and examples w3schools.com/svg/

All good vector graphics editors will be able to save SVG files - for example using Adobe Illustrator you "Save as SVG" and then choose the font handling options.
This following example uses custom fonts that probably aren't on many people's computers so I've opted for the "create outlines" font option.
&amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;br /&amp;amp;amp;amp;amp;gt; &amp;amp;amp;lt;/p&amp;amp;amp;gt;
This will mean that the custom fonts look great - but now they aren't text (they are shape objects) this has the effect of increasing the file size AND making the text unreadable by search engines.

The example at the top of the page should appear to be animated (if you are viewing with a new browser!) This was created in a text editor like notepad/textedit and saved as a .svg file.

Here's the svg code for this simple animation:

Disadvantages of using SVG:

you can't use the img tag like other image file formats, you have to embed or use iframe - check out this link for more details w3schools.com/svg/svg_inhtml.asp and here's a HINT if you're using iframe - set frameborder="0" to remove the border around the iframe
many CMS platform don't allow direct upload of SVG files (like blogger!) so you can only host them on a site where you have ftp access to the image folder

Mobile smartphone platforms 2011

2011-05-03T21:41:00.000-07:00

What are the popular smartphone platforms and what platforms are software developers focusing on now we're a quarter of the way into 2011?

The iPhone was the obvious winner in 2010 and iOS popular with app makers as the iPod touch and iPads hit the shelves - but according to Drew Ianni of AppNation Android is now "the de facto second platform … Android is growing at a phenomenal rate".

US smartphone market looks like this:

Android 33%
Blackberry 29%
Apple 25%

Apple app store 333,000 apps
Android market 206,000 apps
Windows 7 Marketplace 12,000 apps
Nokia Ovi store 30,000 apps

This is a fast changing industry .. so don't be surprised if by the end of 2011 the list looks different. You can read more about this in a recent bangkok post article here

PHP reusable snippets, PHP code and reusable PHP scripts

2011-04-25T20:07:00.000-07:00

I haven't mentioned PHP for some time now and for a web development blog it's way overdue to add some PHP script goodness!

Here are a number of links to great online resources for re-usable PHP code snippets that you can download or cut and paste. Why code something from the ground up when you can use something that has already been written and tested?

PEAR is a framework and distribution system for reusable PHP components. Have a look at the list of packages:
pear.php.net

PHPsnips is another great resource - I really like the comments on each one. You can evaluate if it's going to work for you just by reading any problems that other people may have encountered with the PHP code.
phpsnips.com

The beta version of PHPsnips has a nicer interface over here:
beta.phpsnips.com

And I if I'm going to mention PHP code snippets - then a reference to the php5 manual would be a good idea.
php.net/manual/en/index.php

And for amusement value - here's a cartoon all the way from 1996, it's related to code snippets and reuse and it makes me chuckle ;)

For more Web Devil articles about PHP check out this list of recent posts.

Beyond grid systems - web design using baseline grids

2011-04-20T17:23:00.000-07:00

Last month I wrote about 960 grid systems, 970 grid systems, twelve column grids and golden ratio grids. These systems are great for horizontal alignment, but what about vertical spacing and alignment?
In the print industry vertical alignment is controlled by the big, bad, baseline grid.

Essentially a baseline grid is an invisible set of lines (like those old school books you wrote in as a kid) set at a standard line height. All elements are neatly sat on one of these lines, the advantage being that lines of text, and headings in different columns all line up. Compare these two examples:

The one on the left does not use a baseline grid, whereas the one on the right has all text aligned to the same baseline grid making it easier to read with nicely proportioned white space.

Baseline Grids in Web Design
Text driven websites can borrow this idea from the print industry and also employ a baseline grid.
Essentially all we need to do is settle on a baseline grid size. In CSS terms this is the line-height.

In the following HTML example I've chosen a basic paragraph font-size of 16px and a line-height of 24px. My baseline grid is therefore going to be 24px.
Headings and paragraphs come with margins above and below - these we'll want to reset using CSS as well as specifying the font-size and the line-height.

CSS:

h1 {font-size: 26px; line-height: 24px; margin-bottom: 24px; margin-top:0px}

p {font-size: 16px; line-height: 24px; margin-bottom: 24px; margin-top:0px}

.quote {font-size: 30px; line-height: 24px; margin-bottom: 24px; margin-top:0px; font-style:italic; text-align:center;}

.footer {font-size: 9px; line-height: 24px; margin-bottom: 24px; margin-top:-24px;}

Title Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

"Aligned to a Baseline"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Small footer text

You’ll notice in this example that the bottom of the text doesn’t fall directly on the grid lines (as it would do in print design). This is because of the way CSS renders line-height - the text lines up with the centre of the line.

I'm sure if you diddle around with padding etc. you can make it all line up actually on the line - but that's just not the way CSS renders out - so why get that pernickety? Remember, that blue line won't actually be in your final designs, just nicely spaced text.

You can take this whole concept further by creating elements that have heights that are divisible by your baseline grid size. However, remember that we should really be specifying fonts in ems not pixels! But this is not difficult to adapt once the baseline-grid/line-height has been decided.
Read more about why you should use ems for font size and how to convert pixels to ems.

If you're interested in web typography, related articles you might like are:

Choosing the right font for web design

How to choose perfect heading sizes

Why use ems for font size

Cufon and Google webfonts

Top tips for mobile website interface design

2011-04-18T22:03:00.000-07:00

Here are some basic interface design tips for designing mobile websites:

#1 User expectations and standard conventions

There are standard interface elements that any mobile savvy user will innately know. The new smartphones all have similar functionality.
Mobile websites all have different content however the key interface features shouldn't require detailed investigation by the user to make it function…
Hyperlinks have a recognisable colour/underline/hover behaviour and open with a single click. Web app buttons have a standard look and position. 40 to 44 pixels is currently the magik numbers for button height.

Interface design is not about re-designing all the elements but putting them together in harmony with content and function.

The jQuery mobile framework provides a good example of standards for touch optimised websites for smartphones and tablets. jquerymobile.com/demos

#2 Layout follows the dominant reading pattern

Jakob Nielsen's 2006 study of eye tracking shows that most people follow a similar reading pattern.
This F shape pattern shows where users expect to see important information.
There's a reason why most logos appear at the top left corner and why menus are found along the top and down the left side of desktop websites.
It's also not an accident that text ads and banner ads are tucked in the lower right hand corner by site owners who wish to minimise users leaving the site. Remember that mobile sites have less real estate so layout has to be simplified. Check out unsuck-it.com for the 2011 mobile web style.

#3 Consistent Design

Consistency is needed in look, positioning and behaviour between all pages and screens.
Inconsistencies confuse users and distract from the content, this adds to the feeling of disorganisation. In the mind of a user, clear organisation equates to attention to detail and professionalism.
A style plan is important to define colour schemes, navigation elements, fonts and sizes that can be applied in a consistent way.
A second level of consistent design is needed if you have a desktop website and a separate mobile website.

#4 Clear navigation and site location

Location information within websites is something that is not intrinsically built in.
Users surf without maps or other navigational aids, jumping from page to page with only the links to indicate where they are.
Building this information into a mobile site so that users have a mental construction of their location adds to a feeling of confidence.
Headings, links (current and visited), icons and breadcrumbs can all be employed to add location information.
Check this previous Web Devil post about making scalable buttons using CSS3

#5 Readability

Readability relates to all text, both navigation signs and content.
Good contrast between text and background is important as well as choosing an appropriate size.
Using display fonts as text fonts can make reading the main content difficult and slow.
Check this previous post about web typography and choosing the correct font types and also this post about how to choose the perfect heading size.

#6 Target Audience

Analyse your content and decide who is your target audience.
Different demographic groups have different preferences and do things differently.
The Baby Boomers, Gen X, Gen Y and the Connected Generation do things differently so tailor your interface to suit the needs of your target audience.

#7 Make it faster!

Users don’t want to watch a splash screen or intro every time they use the interface, no matter how cool it is. And why do they need to wait for the navigation to fade in or the content to slowly appear?
Remove any element that causes a road block on the way to the information, or at least put a fast detour around it (skip intro).

If there is something that slows things down be merciless.. and remove it!

#8 Don’t bury the treasure

You’re not a pirate so don’t hide the goodies deep under several levels of navigation.
You may have to investigate what you’re viewers really want, but when you find what it is, make it accessible.. from everywhere!
The latest trend for single page websites and websites with one main focus is on the rise rather than a massive web portal that does "everything".
Just compare Google to Yahoo..

And as a passing shot (Avast!) - here are a couple of quotes from some greater mortals:

“Everything should be made as simple as possible, but no simpler”

Albert Einstein

“Simplicity is the ultimate sophistication”

Leonardo DaVinci

Relevant articles about mobile phone website development:

Viewport size vs screen size

Mobile screen sizes

HTML link to call a phone

Using fonts in web design - Display fonts Vs Text fonts

2011-04-14T15:19:00.000-07:00

In previous posts I've mentioned the new wave of fancy fonts that are now available to web designers. So here is a quick review of web typography and the design aspects of using fonts in web pages.
Essentially you can divide fonts into two major categories - display fonts and text fonts. Using the correct type for its intended purpose is very important.

A display font is designed to work at a large size with a small amount of text. They are usually heavily styled fonts that are used for headings and titles.

A text font is designed to work at a small size for solid chunks of text (the main body copy). They are usually cleanly styled.
Check out the following graphic that shows an example of both side by side (click to enlarge).

In the above example notice how the styling of the display font breaks down at small sizes and makes the text difficult to read and almost impossible to scan quickly.

The text font on the other hand is great in the body text but looks thin and "weak" as a heading. This effect is more apparent the larger the heading size.

If you're interested in web typography related articles you might like are:
How to choose perfect heading sizes

Why use ems for font size

Cufon and Google webfonts

Multimedia sounds - a review of online sound libraries

2011-04-13T17:17:00.000-07:00

Sound is important to multimedia and application development - however the era of sound in websites has thankfully passed (don't you just hate landing on a website to be greeted with a blast from your speakers!)
Finding the right sound - and a sound that you can use commercially without infringing on copyright laws can be a challenge which is why I've put together a list of the best multimedia sound resources on the web.

Here is a quick review of current online sound libraries:

freesound.org

Free sounds released under the Creative Commons Sampling Plus License. Good for recorded environmental sounds. You need to have an account to download. 100,000+ sounds

soundsnap.com

Insane number of sound effects and music loops. Used to be free - now it's a pay-per-sound library. You can still preview all sounds without logging in. This is the premier sound library on the internet (if you're willing to pay a few $$). 120,000 + sounds

soundbible.com

Free sounds with clearly labeled licenses. Environmental sounds and multimedia sounds. Number of sounds not listed

pdsounds.org

Free public domain sounds - good for recorded environmental sounds, quality sometimes not so good. 600+ sounds.

soundcloud.com

The new kid on the block. Mainly music loops at the moment. Great for sharing sounds and commenting. This website is trying to make sound social! The advanced search allows you to look for creative commons licensed sounds. Number of sounds increasing daily.
**notice the style of this website - 2011 mobile friendly!

Have I missed an awesome sound library? If so please COMMENT and add a link to the resource.

If you're into sound and multimedia design you may also be interested in the WebDevil post about animating dialogue in Flash.

What are the most common mobile phone web browsers?

2011-04-12T16:33:00.000-07:00

If you're designing a mobile website you really need to know what are the most used mobile phone web browsers. Check out the graph below of the top 9 mobile browsers for the last 12 months.
Notice that Android is on the rise and Blackberry on the fall, with Opera holding steady at the number one spot.

If you've come to this page from the future then you may want to grab the most up to date graph from gs.statcounter.com and pick the time period you exist in at the moment.

Relevant articles about mobile phone website development:

Viewport size vs screen size

Mobile screen sizes

HTML link to call a phone

What is Web Accessibility? How to make web pages accessible.

2011-04-11T18:54:00.000-07:00

Web accessibility is making multimedia and web content accessible to people with disabilities. The following infographic gives a short summary (click to enlarge)

Accessibility aims to address the following:

Visual impairments including blindness, poor eyesight, colour blindness
Motor/Mobility: difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control
Deafness or hearing impairments
Seizures caused by visual strobe or flashing effects

Designing for Accessibility

The W3C (world wide web consortium) provides guidelines to help developers of web and multimedia to create accessible material. www.w3.org/TR/WCAG10/#Guidelineswww.adobe.com/accessibility/

Accessibility Guidelines
The following are 4 key guidelines that apply to multimedia design:

1. Provide equivalent alternatives to auditory and visual content

Use the image ALT attribute
Make pages that are screen reader friendly
Give videos subtitles

2. Don't rely on colour alone.

Make sure text and graphics work when viewed as grey scale
Be aware of colour blind colour combination issues

3. Ensure user control of time-sensitive content changes.

Make sure that moving, blinking, scrolling, or auto-updating objects or pages can be easily paused or stopped

4. Ensure direct accessibility of embedded user interfaces.

Make all embedded objects and buttons accessible
Allow for tab key navigation as an alternative to mouse clicks
Make pages that are screen reader friendly

For more information about web accessibility check out:

free online web accessibility testing

websites accessible for dyslexic users

How to make multiple div columns expand to the height of the tallest/highest column - 7 solutions

2011-04-07T14:28:00.000-07:00

I've tried to include a comprehenisve list of all solutions to this common problem. It is one of those web design problems that every web designer runs into eventually. You have two or more columns that have auto height (so it expands to the content) but you want to have both columns take the height of the tallest one.
You may become frustrated and just go for a fixed height on both columns - but this isn't really a solution.

There are basically 7 work-arounds for this problem which I will briefly note and reference other sites that show the solution in more depth.

1. The Faux Columns method
This as the name suggests uses false columns in the way of tiled background images to create the illusion of similar sized columns - this is a bit of a cheat (and uses extra images). Not really recommended as every time you change column widths you need to make a new image. www.alistapart.com/articles/fauxcolumns/

2. The Overflow Crop method
This method uses overflow:hidden CSS and a super large padding-bottom and margin-bottom to draw the container all the way down inside a parent div element. This works in some browsers, but not in all so it's not a 100% solution. www.positioniseverything.net/articles/onetruelayout/equalheight

3. Separating the Content from the Background method
This method uses a cool idea, the columns with the content are different from the background of those columns (sort of a faux columns without images). It is a bit more complicated to understand and code (more divs and styles) but it doesn't rely on JavaScript and uses good CSS. matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

4. The CSS display:table method
This is a pure CSS solution and uses display:table CSS. It works great, but not in IE7 or IE6 which is still a problem as there are a whole heap of IE users still out there. www.gunlaug.no/contents/wd_additions_22.html

5. The Borders with Negative Margins method
This is a more complicated method and is tricky to get your head around, and if you want vertical borders between the columns it won't work with IE6 and IE7. www.smashingmagazine.com/2010/11/08/

6. The JavaScript method
This is a great solution assuming JavaScript is enabled on the target web browser. Very flexible but for a similar and simpler solution check out the next method. www.impressivewebs.com/equal-height-columns-with-javascript-full-version/

7. The jQuery method
This is very similar to the above JavaScript method, except Ewen Elder has developed a jQuery plugin that you can use. Great demo and download. www.jainaewen.com/files/javascript/jquery/equal-height-columns/

Have I missed a totaly different solution? Possibly. If so please COMMENT and link to the solution source.

If this solution was interesting, you'll probably like the web devil post about how to make an auto height div wrap around floating content.

How to make a good infographic

2011-04-06T20:31:00.000-07:00

Infographics or information graphics are visual representation of data and are a great way to explain complex information in a clear graphical way. These usually take the form of maps, charts and diagrams that are both interesting and appealing.

There is a great article over at submitinfographics.com that looks into the eight factors that make a good infographic. I've summarised Amy's work into the following points and a simple infographic (that breaks some of these "rules" - click image to enlarge)

1. Data Visualisation
Must be data driven - not just fancy looking text (think chart, map etc.)
2. Clean Colour Pallet
Must compliment the website, colour must be significant - no MS Paint style colour pallets.
3. Clear Story
Should tell a story with pictures - and contain more than one piece of information (good infographics weave different facts and data together).
4. Dimensions
Don't make the infographic too big. It has to fit on the average viewers monitor. Max 1000px wide if vertical scrolling or 700px wide if horizontal scrolling (personally I hate horizontal scrolling - it ain't natural!)
5. Not Text Heavy
Similar to point No.1 - it should be visual and data driven without too much text.
6. Simple Branding
As infographics are used as advertisements the branding must be unobtrusive
7. Subject Matter
The content of the infographic must be relevant to the website that hosts it!
8. "AHA!"
The infographic should give an "Aha" moment - in other words it should provide a unique insight on the facts that are being presented.

Read the original article here www.submitinfographics.com/all-infographics/8-factors-of-a-good-infographic.html

If you're interested in web graphics check out the Web Devil post about how important images are to a website.
For info on picking good colour pallets read about how to choose colour - color scheme designer.

Mobile web design viewport size vs screen resolution - viewport META tag

2011-04-05T23:03:00.000-07:00

In a previous post I mentioned the various screen resolutions of popular mobile phones. Today I'll mention how the screen size and viewport may be different!

So, what is a viewport?
The viewport for web design is defined as the rectangular area (measured in pixels) that is viewable on the screen and determines how the content is laid out and where text wraps or windows need to be scrolled to see the full webpage.

Isn't the viewport the same as the screen resolution?
For most devices the screen resolution/display size is equal to the viewport. This is true of desktop and laptop computers, however for mobile devices this may not be true!!

Many phone browsers scale web pages down to a wider viewport width to fit them onto the screen. This is sometimes called overview mode. These browsers allow the user to zoom in and scale the pages up to view the bit they want to see. For example, although a device screen might have a width of 320px the viewport can have a width of 980px. In this case a web page designed at 980px or less will fit completely on the screen.

The difficulty comes with different mobile devices and mobile browsers as they have different viewport sizes. Here is a short list of some popular mobile browser viewport sizes:

Opera Mobile browser viewport 850px
iPhone safari browser viewport 980px
iPad (landscape & portrait mode) viewport 980px
Android browser viewport 800px
IE mobile browser viewport 320px

This graphic shows the implication of various viewports on three different devices for the Web Devil blog (click to enlarge):

How to change the default viewport?
So now we know that the new breed of mobile devices and browsers each have their own viewport, how do we change it? The answer is by using the viewport meta tag.
The viewport meta tag sits in the document head and is valid for these new devices.
It is possible to specify a fixed viewport (like the standard view of this blog):
<meta name="viewport"content="width=1100"/>

However for many webpages it's probably best to avoid hard coding a width. This is because you don't know what devices are being used to view the web page. Instead it's possible to define the default viewport width of the device:
<meta name="viewport" content="width=device-width"/>

It is also possible to change the scaling behaviour of the screen and whether the user is allowed to scale the page. Syntax for the viewport content includes:

height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi |high-dpi | medium-dpi | low-dpi]

Many phones have a different pixel density or dpi than the desktop 72dpi, so setting target-densitydpi=device-dpi is a good idea to prevent blurry images due to scaling effects.
The viewport meta tag for the touch sensitive sidebar version of this blog is:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />

What about older mobile phones?
As previously mentioned, all of this only works for new mobile devices. The older blackberry doesn't support it - it needs:
<meta name="HandheldFriendly" content="true"/>

And the older Internet Explorer mobile needs:
<meta name="MobileOptimized" content="width" />

If you place all three meta tags (HandheldFriendly / MobileOptimized / viewport) then the mobile will pick the most current one that it understands.

For more details about targeting to the viewport of a device then the android developers guide has some good information at developer.android.com/guide/webapps/targeting.html

If you've read this far then hopefully you now know that in mobile web design a pixel used for design isn't necessarily a pixel on the device! To find out more about the size of various mobile device screens check out the following Web Devil post about mobile screen sizes.

How important are images, photos and info-graphics in web content?

2011-04-04T20:47:00.000-07:00

For most web pages and blogs "content is king" (Bill Gates c. 1996) and in addition to text, content should include images, photos and infographics. I would go so far as to say that images/graphics are even more important now than they were 12 months ago.
Just look at the new web apps and design views that are turning up. Thumbnails are the plat du jour - mobile phone apps and tablet layouts are navigated using images and thumbnails. So to have an appropriate image or graphic for each web page or article is essential.

graphic thumbnails from the web devil blog

Great looking graphics will also attract viewers and keep them coming back for more visual feasts. The last thing people want is to wade through paragraphs of text without a visual break. And as the famous saying goes "a picture says a thousand words".

Other benefits of images are in searchability. The number of image searches (google images, flickr etc.) is increasing substantially and relevant images will bring more traffic.

Naming image files with keywords from the page are important for search engine optimisation, as is using the alt tag to give a short description of the image.

Infographics are the pinnacle of content images. They provide visual relief to text AND are functional by providing valuable information for readers. For some great examples of infographics check out www.coolinfographics.com

Finally, if you're going to scour the net for images make sure you don't fall foul of copyright laws and "steal" other website images and place them on your own site.
If you use flickr or google images the advance option lets you sort for non-copyright images, or you could use a free image library like sxc.hu
Better yet - break out your fav graphic editing software and do a doodle - it doesn't have to look pretty (check out Drew's style at www.toothpastefordinner.com and he has 14 thousand Facebook "Likes")

Check out the previous Web Devil posts about texture images a free texture library and free icon library.

New blogger views - a review of blogger platforms 5 new interfaces

2011-04-03T17:51:00.000-07:00

Blogger (the online blogging platform) owned by Google has added 5 new "views" or interface designs that are instantly implemented on all blogger/blogspot blogs.

The main idea behind these is to give bloggers an alternative to the traditional web page blog style and move into the tablet/smart phone style of web page/app layout.
This could be a defining moment in web design, when the style of handheld devices slips into the main stream. Keep in mind that the total number of page views by mobiles and tablets is still only around 3% at present. (source: w3counter.com)
This is a move to keep blogger at the top of the blogging platforms, and to keep the earlier adopters happy. Where they go.. the others usually follow, iSheep style.

The new views are accessible by going to YOUR_BLOG_URL.com/view/ where you get a choice of: Sidebar, Timeslide, Mosaic, Snapshot, Flipcard
Here's a quick screen shot of each at the default iPad viewport width of 980px:

Sidebar

Timeslide

Mosaic

Snapshot

Flipcard

or you can try it out for real by going to webdev-il.blogspot.com/view/
Have a look what google says about it here.

At the moment Sidebar is the default view. Google say that bloggers will soon be able to tweak the styles of these views and then apply them as the default template style for their entire blog.
These new views are all built around AJAX with HTML5 and CSS3 - so only work on the newest browsers!

If you're interested in mobile screen sizes then check out the previous Web Devil blog on mobile device screen sizes.
You may also like to see who has a slice of the browser pie.

How to convert Pixel to Em - Why use ems for font size?

2011-03-31T14:17:00.000-07:00

Following on from the last post about calculating beautifully proportioned text sizes, I thought it would be good to cover the "correct" unit of text measurement rather than just sticking with pixels.

The W3C recommends that you use ems for font sizes - why?
The "em" unit is the most scalable when it comes to on-screen display (read more from W3C here)

Basically it gives users the ability to scale up all the font in a web page using their browser settings and see them "grow" proportionally. This is for accessibility reasons.
Generally when you are in the design phase using pixels sizes is easier - so in the end you'll need to convert from pixels to ems.

So how to convert pixels to ems?

Most browsers have a default font size for "medium" text of 16px.
In this case 1em = 16px.
So if you want a font size of 20px you need to divide 20 by 16 which equals 1.25em - easy.

You can use the following widget to calculate em sizes.

Another trick that many web developers use is to scale the overall font size of the body to 62.5%.
CSS: body {font-size: 62.5%}
Why? This converts the overall default font size from 16px down to 10px (16 / 100 x 62.5 = 10). Therefore 1em = 10px and all other em calculations are easy to do in your head (20px = 2em, 12px = 1.2em, OMG so easy!)

WARNING! The only thing to look out for when using ems is nested elements. Using relative sizes (ems) rather than pixels means that the relative size will not override the parent element. It will inherit it from its parent.
For example, imagine a Div (font-size:2em;) with a P (font-size:0.8em;) inside.
The font size of the P inside will actually be 1.6em (2 x 0.8) so when using ems be aware of inheritance from parent elements.

If you're interested in web typography you may like to read about how to choose perfect heading sizes. Those who are interested in web accessibility should check out the Web Devil post about free web accessibility testing tools.

How to choose the perfect heading size and text size in web design typography

2011-03-30T16:59:00.000-07:00

This is the best thing I've come across for some time - a logical/technical way to pick font sizes in relation to each other. Read on and if you have time, watch the video as Tim Brown gives his explanation (30mins).

Essentially this technique is built around using a harmonious modular scale (using the Golden Ratio or any other "beautiful" scale) and applying it to text size (so simple I can't believe I haven't run into this before!!)

Once you have settled on a suitable type size for the body text you can use the Golden Ratio to find a modular scale of headings and smaller fonts sizes that are visually in proportion, for example:

Golden ratio = 1:1.618

Text size = 16px

16 x 1.618 = 25.888

16 / 1.618 = 9.888

This produces a pixel scale: 41.9, 25.9, 16, 9.9, 6.1

You can also "reverse engineer" an element box width to find the appropriate text/heading size, for example if you have a column of 570px (like this one) then divided by the Golden ratio you get sizes of 51, 32, 19, 12, 7.5

Have a look at my quick mock-up using these sizes (note that 12 pixels is probably too small for standard body text in most websites) -

The Eye Catcher

An Amazing Heading

Title Heading Size

Body text for a 570 pixel width box based on the Golden Ratio. The eye catcher heading is 51px. The amazing heading is 32px. The title heading size is 19px and the base font is 12 pixels with a standard line height of 19px. These have all been rounded to the nearest whole pixel from the modular scale using 570 as the starting point.

Check out this tool that calculates the modular scale for you, it even lets you add another important number into the equation (like if I wanted to include the value of 16px in the above mock-up) modularscale.com

In the video Tim explores the use of these scales and applies it to line height, gutter spacing, even layout and column widths.

As pointed out in the video this is compatible with grid systems, if you're interested read the Web Devil blog about using grid systems for web design and also the post about creating web font stacks and using web fonts - cufon and google web fonts.

Comparison of the digital publishing formats .pdf .epub .issue for creating digital magazines

2011-03-29T16:36:00.000-07:00

This is a quick review of the three main formats for publishing digital magazines other than our favourite online publishing medium (HTML & CSS). These formats are primarily designed to be consumed as magazines in an application specific to a device (iPad, Kindle, Galaxy tab, etc.) rather than a web page in a browser.

.pdf format
The advantage of using pdf is that the design is "locked in" when it is created. The user has little control and cannot change font, text or format. For designers this is a bonus as their baby can't be mangled by such things as browser version or screen size. However, there is no elastic of liquid layout which can prove a problem given that different devices have different aspect ratios. Users end up moving the document around or zooming in and out to see the whole page.
Interactive pdfs can include buttons, hyperlinks, page transitions, embedded swf and videos (see my link at the bottom on making interactive pdfs)

.epub format
The epub format is used by Kindle, Nook and other e-books. It is styled like a simple version of XHTML with CSS, and includes interactive table of contents (hyperlinks) and images placed as anchored objects. The disadvantage for designers is that style (size, layout, font, etc) and layout control is based on the capabilities of the end device. This is designed for text (books) rather than magazines that require quality photography (colour!) and typography.

.issue format
The .issue format is a content file that requires a digital content viewer (device specific) to "play" the digital magazine. The .issue file bundles separate horizontal and vertical layouts (think of a tablet as it's flipped from portrait to landscape). It can include page transitions, animation, video, interactivity and is touch interface friendly. However, it is all too easy to create digital magazines with huge file sizes!! Many apps for digital magazines (Wired mag) are in fact just branded digital content viewers that downloads the latest .issue file.

The current surge in digital publishing is driven by the number of available handheld devices, and the publishing industry trying to generate revenue as print goes into decline. The open standards web is being ignored to a certain extent as publishers are walling themselves into devices and formats that they can control and extract payments. How will this strategy pan out? Let's wait and see (but don't be surprised when other non-open standard digital magazine formats appear).

Keep tuned to this blog - time permitting I'll write more detail about both the .epub and .issue formats and how to actually make digital magazines. COMMENT on this post about digital magazine formats that you would like to see covered in more depth.

For information on interactive pdfs take a look at the Web Devil tips on how to make interactive pdfs using Adobe InDesign.

Using grid systems for web design, wireframes and layout - 960 grid - 970 grid

2011-03-28T19:50:00.000-07:00

Grid systems can be used as guides when designing the layout of a web page. They help with alignment, placement and sizing of elements across the width of the page.
The flexibility of grid systems allows for various permutations of column sizes. In this post I'm going to briefly discuss four basic grid systems - the "traditional" 960 grid system, two 970 grid systems using 12 columns and a 970 grid system derived from the Golden Ratio.

Before we start it's probably worth mentioning that the current trend of desktop/laptop website widths are based on the majority of viewers screen size which at the moment sits at around 1000 pixels (I remember when we designed sites with a max width of 800px). Check out my previous post what is your average viewers screen size and follow the googlelabs link for the current assessment of the situation.

The 960 grid is based on a page width of 960 pixels that consists of 12 columns. Each column is 80px wide - made up of a content area of 60px with a 10px margin on the left and right. 12 is the magik number as it can be divided by 2, 3, 4 & 6 so there is a great range of potential column widths to choose.

Benefits of the 960 grid is in easy multiplication (3x80 can be done without a calculator at 8:00am before a coffee).
Opponents of the 960 grid point to the margins - two columns each with a 10px margin will generate a 20px gutter (the bit between two columns), too big they say. Also the page edges will only have a 10px margin while the gutter is twice as big at 20px.

The 970 grid - here are two versions that use 12 columns and one that is derived from the Golden Ratio:

970 - 70 grid system
970 - 68 grid system
970 - golden ratio grid

The 970 - 70 grid system has 70 pixel content columns with a left margin of 10 pixels and no right margin - apart from the last column which has a 10px right margin. The benefits are smaller, equal sized gutters and larger content columns.

The 970 - 68 grid system has 68 pixel content columns with the gutter between each column of 14 pixels (there are only 11 gutters). There is no margin on the far left or far right column. The benefits are a grid that has content columns that go right to the edge, but still easily divisible.

The 970 - golden ratio grid does not use the 12 column format. Instead it is based on the Golden Ratio that uses grid sizes that are "beautifully" in proportion to each other.

The overall width of 970 is subdivided into various columns of 600, 370, 230, 140, 90 & 50 pixels with a proportional padding size of 13 pixels (20px is also a proportional number!).
Although slightly more complex to use, it covers the basic building blocks for column widths however for multiple columns of the same width (eg. you want 4 equal sized columns) then your best choice is one of the above grid systems.

If you want to generate some HTML and CSS with a built in grid system - check out www.gridsystemgenerator.com this is great for fast mock-ups in HTML.

For more detail about designing with grid systems check out the previous web devil post about grid systems for web design.

Create a unique bar code with this barcode generating tool

2011-03-27T23:25:00.000-07:00

This is more for print design, but I've found it very useful which is why I've put this bar code generating tool on the Web Devil blog.
All you need to do is enter the number or letter string and it will generate a Code 128 barcode, a Code 93 barcode and a Code 39 barcode. Nice:)

If you liked this then you'll really want to see my post on making a QR code - a paper based hyperlink!

How to convert points to pixels for web design and layout

2011-03-26T00:27:00.000-07:00

If you're a web designer you'll know that you specify sizes in pixels.. and you'll probably know that in print typography sizes are defined in points (traditionally the smallest unit of measurement). Fonts are measured in points, which is essentially the line height (technically not correct but serves as a quick explanation).
So you may want to find out what a specific point size is in pixels!
This seems like a simple question, but you also need to take into account the physical display size and resolution (pixel density).. arrgh!

Lucky for us this widget does all the hard maths and can convert points to a pixel size for an end device.

If you want to know more about screen resolution and sizes, check out the following posts:

How to show email addresses in web pages but hide them from spammers

2011-03-24T02:11:00.000-07:00

Here's a typical scenario - you want to put an email address on a contact web page, but you also want to protect it from spammers. The last thing you want is a spammers web crawling program to suck the email address out of your HTML code.

One option is to just not bother putting an email address on the website and use a contact form instead (see my previous post that covers creating a contact form).

The other option is to use a CAPTCHA code like this..

..that can tell if it's a human and only then give out the email.

There are a number of CAPTCHA services available, but reCAPTCHA Mailhide is a free service that automatically generates the HTML code to hide your email and displays a CAPTCHA code. Just one click.. that's all!
Take a look at the following example:

Click here to show my email address

So to get the full reCAPTCHA Mailhide code just head over to www.google.com/recaptcha/mailhide/

If you're interested in creating forms then check out these web devil archive posts that cover forms.

The complete list of web design tips for beginners

2011-03-23T02:13:00.000-07:00

I've got to give a nod to Alexander Dawson for putting together the ultimate 250 web design tips - this is a pretty comprehensive list of the basics - things that beginners need to know but are almost too obvious for anyone who's been around for a while to think about.
To go to the trouble of putting these down is a great starting point for anyone just getting into web design.
Check it out over at sixrevisions.com.

If you're a beginner and want to start learing web design, click through the web devil archives on the right, or have a look at the previous post about how to start learning html and css.

A quick guide to online marketing

2011-03-21T23:50:00.000-07:00

Every wanted a simple timeline to show you what you should be doing to market your website online? Over at ubounce.com they have a great infographic that shows the noobs guide to online marketing.
This hefty graphic steps through the following areas:

Social media
Email marketing
Lead generation
Organic SEO/SEM
Conversion rate optimisation
Analytics
Content marketing
Pay per click (ppc)

and covers all the main steps for each of these activities in marketing a website.

If you're interested in online marketing and search engine optimisation, check out all the webdevil posts with the SEO label.

How to make an auto height DIV wrap around floating content

2011-03-21T03:13:00.000-07:00

When you design web pages with CSS sooner or later you'll run into this problem - you've got a nice auto height div container with some floating elements inside BUT the auto container doesn't expand to wrap around those floating elements inside!
Example:

<div id="wrapper">

<div id="col1"></div>

<div id="col2"></div>

</div>

There are three basic solutions (don't switch channels before you see the third one - it's a cool tip!!)

Solution 1. Stick some text in a paragraph after the last floating element. Some people use a blank paragraph     Not a pretty option, or semantically good.

Solution 2. Add another element with a clear float after the last floating element. Another div tag, or even a break.

 

CSS:

.clearboth {clear:both;}

This works and is the most common method used.

Solution 3. Clear the float using overflow: auto on the last floated element.
CSS:

#col2 {overflow:auto}

check this last solution out in more detail over at webdesignerwall.com - they have a good demo and include how to word wrap using this method.

If you want to know more about floating then check out my previous post about working out how CSS float works.
Also check out the solution to IE 6 making your float margins twice as big!!

Check SEO statistics on any website for free!

2011-03-18T01:48:00.000-07:00

What if you could get SEO statistics about any website on the net for free?

Having stats about your own website is easy to get your hands on, but getting the low down on your competitors is another thing altogether - check out the blekko search engine.

You'll find that by every search result there is an seo link (see the following screen shot)

...click the link and you get some fancy graphs about inbound links (yeah!) outbound links, internal links and duplicate content.

And as well as seo you can do lots of other funky stuff with blekko - the slashtag might be too much for your average web surfer to learn, but it allows for quick filtering of results. Check out the following video:

If you want more SEO info, then check out my previous post about how pagerank isn't everything and how to get a detailed report about your website.

Accessible websites for dyslexic users

2011-03-16T20:57:00.000-07:00

A great article over at uxmovement.com looks into how text design can cause visual distortion to dyslexic users.
I did a quick search that reveals dyslexia affects between 5 and 10% of the population - so so changing your design to assist upto 10% of your viewers is a good idea.
I've summarised the article into the follow graphics that give an overview of the design decisions that produce visual distortion.
For more details visit the original article and follow their sources.

The River Effect:

The Blur Effect:

The Washout Effect:

If you're interested in Accessible web design - read my previous post about online accessibility testing tools.

Web design for mobile screen sizes

2011-03-15T18:44:00.000-07:00

To follow up on the last post about mobile web design, here is a great link to design considerations related to the size of mobile phone display resolutions over at uxbooth.com

I really like the compiled list of resolutions to devices, which I've summarised into the following graphic (note that this is by no means a complete list) - click to enlarge at 100% pixel size.

The article also has a good introduction to CSS3 media queries.
The best bit of this post at uxbooth.com is the comments section - have a look at the comments about the iPhone 4 display resolution.
You'll notice on my graphic that the iPhone 4 (grey box) has the "biggest" display, however in reality this is the same as the previous iPhone (orange box) but with a higher dpi. The discussion in the comments section covers this in more depth (and how it effects web graphics).

Now you know about different screen sizes, you really need to know about viewports and how viewports relate to screen size and the all important viewport meta tag.

How to make an HTML link to call a phone href=tel:

2011-03-14T17:18:00.000-07:00

With the rise in mobile web surfing the benefits of calling direct from a web page become more realistic (see my later comments regarding Skype and international users).
This is easy to implement as the URL spec allows for telephone numbers which all the latest mobile browsers can use.
Here it is:
<a href="tel:5551234567">Call (555)123-4567</a>
One click should open the phone dialler and input the number to be called.
Example:
Call (555)123-4567

Too easy! Well, yes there are a few concerns...

What happens if you see this page on a desktop computer? You click the link and nothing happens (which is why I've included the number in the link text).
Well you could hide this link using CSS in the following way:

<a class="mobilesOnly" href="tel:5551234567">Call (555)123-4567</a>
CSS for non-handheld devices
.mobilesOnly {visibility:hidden;}

Another problem is that on desktop computers Skype is a big player, and they use the non-standard spec of callto as follows:

<a href="callto:5551234567">Call (555)123-4567</a>

so now we have the battle between callto for Skype and tel for mobiles.

Another thing to look out for is that this will only really work for local websites. So for a website with a global reach, the usefulness of a telephone number on the page is limited (think of all those different international dialling codes), but for a local store the benefits are massive.

And my last concern is unscrupulous marketers harvesting phone numbers (especially mobile numbers) in the same way as email addresses to spam people with SMS ads.. but that's something to look out for just round the corner.

If you're interested in optimising your sites for mobiles then look at my previous post about having multiple versions of the same site and design trends for 2011 which are driven by mobile devices.

Web design contracts and legal guidelines for freelancers

2011-03-13T19:06:00.000-07:00

Ever had "scope creep" or a client who delays payment? If you're working as a freelancer or run you own business it makes sense to know the legal side of things.

Here are a number of great articles about this issue.
At webdesignlegder.com there's a short summary of what you should be doing:

drafting contracts
setting dates
adding follow-up clauses
defining project deliverables

Over at sitepoint.com there is a more detailed look at producing web design contracts and at zenfulcreations.com a template for a basic web site design contract which is a great starting point to get you going.

Want to know how bad clients can be? Check out my previous post about web design and client relations.

Adding a search box to your website

2011-03-09T18:21:00.000-08:00

There are three main ways you can add a search to your web site:

1. If your site uses a CMS then it may have a search module that is easy to install (some popular ones listed below):

2. You can use the power of Google to search you site using the Google custom search (you need to have a google account to generate the code):

Google custom search

3. Trick google into only searching within your site using a hidden search field containing your website URL - check out my previous post with the code:

how-to-add-site-search-to-your-web-page

- quick and easy!
You may also like to add the new HTML5 search form tag while you are at it - check out my previous post about HTML5 forms that you can start using right now!

Who has a slice of the browser pie?

2011-03-07T22:28:00.000-08:00

Following on from an earlier post this year about web viewing stats for 2010, here is a graphic I put together showing "Who has a slice of the browser pie?" - global web browser trends going back to January 2008.
Interesting to see how IE has steadily been whittled away and how Google Chrome and Apple Safari are on the rise!
The data is sourced from w3counter.com, which has a great trending graph.

Click to enlarge the graphic:

Basic Design Principles for Web Design

2011-03-07T16:45:00.000-08:00

The general design of a webpage can be summarised in the basic principles of web design.
A great article over at psd.tutsplus.com gives 9 general principles for good web design - these can be summarised into the following points (read the article for more in depth coverage of each):

Precedence (guiding the eye)

Position
Colour
Contrast
Size
Design Elements

Spacing

Line spacing
Padding
White space

Navigation

Where can you go?
Where are you now?

Design to Build

Can it be done
What happens when a screen resizes?
Can you simplify things?

Typography

Font choices & size
Spacing
Line length
Colour
Paragraphs

Usability

Standards
What will users do?
User tasks

Alignment

Grid systems

Clarity

Sharpness
Edges snapped to pixels
Contrast

Consistency

Another great resource about design with respect to white space is over at alistapart.com

and has some good example graphics.

For more specific details have a look at the previous post about the essential elements in a website-landing page.

Free Online web accessibility testing tools

2011-03-06T18:07:00.000-08:00

Web Accessibility means that people with disabilities can perceive, understand, and interact with a website, no matter whether they have a visual, auditory, physical, speech, cognitive, or neurological disability.
Making a web site accessible can be simple or complex, depending on many factors such as the type of content, the size and complexity of the site.
Ideally you want your site to be accessible by the greatest number of people you can - including older people who may have age related accessibility issues.
So how do you check that your website is accessible?
Obviously testing is a crucial step - but you may not be an accessibility expert, which is why there are a number of free online resources that check basic accessibility functions:

The first is wave - this provides a report on any URL you feed into it. Even more useful is the wave firefox toolbar (works great in tandem with firebug).
Secondly there is cynthiasays, which provides a similar report to Wave for a web page URL you specify.

For more details on accessibility and HTML have a look at the links in the following post
how-to-start-learning-html-and-css and look at the Accessibility tutorials.

How to add Facebook comments to your own website!

2011-03-02T02:28:00.000-08:00

Facebook have just added a new plugin that will allow facebook commenting on your site!
It's easier than you think - just 4 easy steps:

Step 1. go to developers.facebook.com/docs/reference/plugins/comments/ and choose the options that you want for your new comment section.

Step 2. You will be prompted to login to facebook to get an application ID that is specific to that page URL.

Step 3. Once you get to the page where it generates the APP ID you can go back to the comment generator and do it again - it will give you the HTML code with your new ID embedded.

Step 4. Cut and paste the HTML code into the correct portion of your site.

That's it!

There are also instructions about moderation of comments
This is a link to the moderators comment tool developers.facebook.com/tools/comments.
- and facebook is touting the fact that all of its users are genuine so you won't get as much spam and crud in your comments (because the comment appear on the users facebook page :)

Check out what this looks like by going to my new facebook comments section on my homepage - tobyonline.co.uk

This follows hot on the heels from my very recent post of retrofitting comments to your website using Disqus ...now your have another options - cool.

Is it good to have multiple versions of the same website?

2011-03-01T16:34:00.000-08:00

Following on from my recent post about automatically detecting screen size let's look at why you may want multiple versions of a website, and if this is a good idea.

Firstly, why would you want multiple versions?
- Well the short answer would be to accommodate the variation in screen sizes and platforms (phones, web tv, tablets etc.) Many sites already have a main site and a mobile site (example www.bbc.co.uk/mobile/).

Therefore, why not build a new domain or sub folder for each platform and even make a flash and non-flash version?
- This is one way of tackling the problem, and for a small site is possible, but there are a number of problems you may run into:

maintenance - keeping content updated, correct and relevant on multiple sites is going to be more work
link sharing - what if someone on a mobile shares a link to a page that you're viewing on your desktop, not the best user experience for you

There is a more in-depth article about the dangers of multiple websites here, where Michael Gray suggests the following:

Use a single domain to serve all of your content
Use a single URL on that domain to serve content, for every platform and user agent
Use style sheets or server side scripting to serve content optimized or properly formatted for different platforms
Use country specific tld’s or subdomains only for different countries or languages

Good summary - which leads to my previous post of web design trends for the coming year.

Free Online Browser Compatibility Tests

2011-02-27T22:03:00.000-08:00

We all know that we should test our websites in different web browsers on various OSs, however there is only a small number of different browsers we tend to keep on our test machines. Here is a great resource for checking what a site looks like and how it renders in a huge selection of web browsers, and the best part - it's free.

Check out browsershots.org where you can enter the URL of your webpage, and select which browsers you want to check. It'll then process the job and you can view or download all the images to compare (even IE6)
Nice :)

Fast loading web pages are still important

2011-02-23T03:48:00.000-08:00

Here's a link to a great article from uxbooth.com - designing mobile websites with a view to speed.
Recently I was reminiscing about dial-up modems and how you could watch the browser load the images slowly before you eyes! Even now with blindingly fast internet connections speed is still an issue - especially when we try to translate the desktop experience to modile websites.

Check out the comparison table of load times in this article along with some handy hints.

Automatically detect screen size and apply different CSS style sheets

2011-02-22T02:54:00.000-08:00

There may be times when you want to have an alternative style sheet for a different screen size (I'm thinking mobile devices..) at to switch the style sheet automatically.
Over at ilovecolors.com.ar (that's Argentina) there is a simple tute that goes through the steps to do this with a little help from jQuery. Make sure you check the comments sections as this has more tweeks posted from Drupal users to implement this with multiple style sheets.

How can you boost your web site's credibility?

2011-02-21T00:11:00.000-08:00

Stanford university research reveals 10 guidelines for building the credibility of a web site. In summary they are:

Design your site so it looks professional.
Make it easy to verify the accuracy of the information on your site.
Show that there's a real organization behind your site.
Highlight the expertise in your organization and in the content and services you provide.
Show that honest and trustworthy people stand behind your site.
Make it easy to contact you.
Make your site easy to use -- and useful.
Update your site's content often.
Use restraint with any promotional content (ads).
Avoid errors of all types, no matter how small they seem.

Read more about these Stanford Guidelines for Web Credibility over at credibility.stanford.edu/guidelines/index.html or watch the following slide show:

.. and here are more resources from the Stanford Persuasive Tech Lab for those interested in the subject - captology.stanford.edu/resources