easy peasy web design

embedding a wix site into blogspot (or any other type of site)

2011-07-02T11:25:00.024+03:00

Wix is great - of course! Embedding a wix file someplace else is even better! The photo gallery above was made with wix, using their photos. I just made a simple little page which is the post width of this site. However, you could get far more fancy and do some really great headers or side bar elements using wix and the custom HTML/Javascript widget here on blogspot.

Unless you have a premium wix site, you will of course have the wix preloader and their little logo on the side, however personally I find these completely appropriate and inoffensive for something which is after all free!

The embed code is given to you as you are publishing the site, shown in the image below:

And below is how the code will look. If you do not want all the social networking stuff which is located at the bottom of a regular wix site, simply remove the black highlighted bits:

(Note: The border code from the previous post will work just as well with an object embedded from wix. In this case you place it before type="application/etc inside the embed tag like I am showing you above with the bit which is highlighted in red. For the wix file, which I embedded above, I used a 1 pixel border in a medium gray (#888888).

One thing to bear in mind is that if you want a border do not forget to size your output in wix accordingly before you import it to your blog/site. As an example, the post width on this site is 515 pixels, however I published the wix file at 513 pixels in order to accommodate the 1 pixel border around it).

http://www.wix.com/

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

how to add a border around objects embedded into blog posts (such as a google map or a youtube / vimeo video)

2011-06-04T20:54:00.022+03:00

If the images on your blog have borders you may wish to have them around other visual material as well, so as to achieve design consistency. Google maps are one such bothersome element, I think. In order to place a border around a google map, look for the embedded code in your post and add what is highlighted in black:

And just tried the same snippet, placed in exactly the same location on a youtube video. Yayy! Same exact result!

And vimeo too! With this one, although the aspect ratio is the same (3 x 4) as the youtube video, I had to tweak the overall box size a bit since the player configuration seems to be slightly different. But no biggie, done in a second!

(Note: One thing to bear in mind is that if you want a border do not forget to size the embedded output accordingly. As an example, the post width on this site is 515 pixels, however I set the video files at 500 pixels in order to accommodate the 8 pixel border around them).

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

blogspot stuff: adding a background color to the date header of the awesome.inc template

2011-06-04T20:22:00.006+03:00

Find this code in the HTML editor (widgets expanded, of course):

.main-inner .widget h2.date-header span {
font: $(date.font);
display: block;
padding: .5em 15px;
border-left: $(date.border.size) solid $(date.border.color);
border-right: $(date.border.size) solid $(date.border.color);
}

Then replace that one with this one:
.main-inner .widget h2.date-header span {
font: $(date.font);
padding: 1px;
margin-left: 14px;
border-left: $(date.border.size) solid $(date.border.color);
border-right: $(date.border.size) solid $(date.border.color);
background: #yourhexcode
}

As you can see I have removed one line and also changed the padding. I also added a left margin in order to align stuff, your values may again be quite different than these. These are things that looked good with my particular design, you may want to go with other values or even keep the block display altogether, in which case the colored area will stretch across the width of the post as a bar.

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

behance professional portfolio site

2011-05-14T14:31:00.002+03:00

Just received this as a behance notification and it does seem worth sharing:

http://prosite.com/home

Admittedly, the price for this (11USD per month) is rather on the steep side, considering that you could get a fully hosted site for about half the price at places like Bluehost, or indeed that with a bit of ingenuity you could very easily set up a similar site right here on blogspot for free.

However, on the upside, you do get the considerable professional design expertise of the behance team in the shape of some beautiful and fully customizable templates, which could save a lot of time. And, probably most importantly, given that behance is one of the highest regarded design portals online my guess would be that having a site hosted by them would be likely to get you exposure you might not get all too easily through a standalone site.

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

semi-transparent and/or image background for all posts in blogspot

2011-05-06T04:23:00.007+03:00

This is a step by step tutorial for creating a transparent/image background for the entire main posts section.

1- Creating a transparent .png:

Create a new photoshop (or whichever program you are using) file with 16x16 or 32x32 size, 72 resolution and tranparent background. Fill it with the color you wish to use, then change the opacity of the layer to a desired amount (a value between 70 to 90 is optimal). Save it for Web & Devices, making sure you have png24 and transparency selected. Now, upload it to somewhere (picasa etc.), so that you can have an url of the image which we will need later.

2- Template Designer:

Navigate to your blogger account's template designer tab. Select Advanced, here depending on your blogger template you will either have "Post Background" or "Background", first look for Post Background if you don't have it, select the other one.

For people with Post Background

From the color picker of Background Color, put a tick to transparent. If you don't want borders, do the same for Border Color.

For people with Background

From the color picker of Main Background, put a tick to transparent.

Finally apply to blog.

3- Edit HTML

Under the Edit HTML tab, look for this piece of code,

For people with Post Background in the previous step,

find,

.date-outer {

in it there is a line like this,

background-color: $(post.background.color);

replace it with this line changing the "image_url" with the actual url of your image

background: url(image_url) repeat;

For people with Background in the previous step,

find,

$(content.background.color.selector) {

in it there is a line like this,

background-color: $(content.background.color);

replace it with the following changing the "image_url" with the actual url of your image

background: url(image_url) repeat;

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

how to get google to be totally in love with you... ;-)

2011-05-05T23:06:00.026+03:00

What we were talking about just before the class broke up today, made into a little blog post for you:

1) Good, focused, (and if at all possible) original content. This is the one and only and penultimate thing that counts! Without good content, forget it, it just won't happen. What you have on your site simply has to be of interest to others - either specialist groups or general entertainment, but it has to be really good stuff! And my general hunch with this is that specialty sites are far more likely targets to get hits, since there is bound to be more search engine activity related to a specific topic, than there will be to general chit chat.

2) A large site will have more material for the search engine to find. Very simple logic really. If you have 100 posts it is far more likely that you wrote about something that somebody out there is searching for than if you have only 10. The larger the easypeasy site gets the more search engine results we get, no doubt about it. When we had only 10 posts, we had none. Nowadays with over 100 posts under our belts we have at least 5 or 6 a day and very often many more, sometimes as many as 20 even...

3) Make sure your site is structured well in terms of navigation. Even the best content in the world is useless if folk have to work too hard to get to it, they will simply not bother and leave and never come back. And needless to say, forget about them recommending it to anyone else... Read Selim's excellent post on navigation to get more insight on the matter here >>>

4) Post often and consistently. In other words, not silence for a whole month and then 10 posts all at once, but more like 3 posts a week, and every week. Remember that you can also write a whole batch and then pre-date them. I am not exactly sure how or why this makes a difference but a site which is consistently active seems to draw more traffic, a thing which I can tell very easily from the site stats of my own blogs.

5) Make sure your meta tags are in perfect order. More on this here >>>

6) Make sure your post title comes before your blog title. More on this here >>>

7) Make sure you have a lot of links to other sites, either inside the posts or as sidebar elements: Your courtesy to others is likely to generate courtesy in return by them linking back to you - after all, this is how the internet works...

8) Use social networks efficiently. Tweet your blog and also post it on facebook, linkedin etc. Also if your site's content is at all relevant, start creative network accounts such as on youtube, Flickr, deviantart, vimeo etc. Use the groups within these domains to put out videos and photos and link these back to your site.

9) Finally, be patient! It will take some time for people to find you - anything up to 6 months to even a year, depending on how fast your site is growing and on how good your content is. Usually you will hit the really big visitor numbers only after one of the major portals or blogs, one that covers the same area of interest on which you are focused, spots you and blogs you. This will take time. Just keep on posting and once you have enough good stuff it will happen - count on it.

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

embedding a flipbook into a blog with issuu

2011-05-05T15:33:00.020+03:00

Last time I looked into this (which was a few months ago) it still wasn't possible to do so but I just found out that you can now embed flipbooks which you create with issuu into other domains! Gave it a try just now and as you can see above it works beautifully!

So, all you need to do is create a free account with issuu, make your flipbook by following the instructions on the site which involve combining the images of your left/right pages into a pdf which you then upload into your issuu library. Once the book has been crunched by the system it will be published, at which point you will find the embed icon (looks like this < >) under the thumbnail of the book. Make sure you have all the correct things checked on the menu which appears when you click on the tags (such as having the double page view as default!), then copy and paste everything into the HTML tab of the post editor and you are done! You can also change the height and width of whatever appears on your blog by playing with the values inside the embed code. If you do so remember to use a calculator so that the aspect ratio remains correct.

Tip: When you publish this there will be several text links which appear under the small flipbook on your site. If (like me) you do not want these text links simply delete the bottom part of the code, which will look something like this:

<div style="text-align: left; width: 420px;">
<a href="http://issuu.com/elifayiter/docs/ctrl_xyv?mode=embed&viewMode=presentation&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBtn=true" target="_blank">Open publication</a> - Free <a href="http://issuu.com/" target="_blank">publishing</a> - <a href="http://issuu.com/search?q=computer" target="_blank">More computer</a></div>

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

navigate in style or fail miserably

2011-05-03T23:44:00.011+03:00

Good navigation is the most important aspect of a well designed website. If the visitor is not presented with a clear navigation, it won't matter how well your site is designed, it is highly likely that they will leave your page in a matter of seconds. It is a very tough challenge to create a meaningful and unambiguous yet stylish navigation that allows users to view content easily.

Some of the most important rules of a good navigation are;

1- Visibility: Make sure that your navigation is one of the first things that catches the eye. Do not make it obscure. Don't let it get hidden because of clutter or problematic placement.

2- Consistency: Make certain it has a certain style and placement that it keeps on every page.

3- Clarity: Make sure that every item in the menu is %100 understandable. No one likes to guess where the link will take them. Use either clear names, or little explanations, hover titles are a good way as well. If you are using thumbnail images as links in your menu, make sure they are clarified one way or another.

4- Creativity: Creative navigation will always make your site stand out more, just make sure you don't overdo it, sometimes simplicity is the real creativity.

Good Examples of Stylish Navigation

The Adaptd

It is both stylish and easy to use. Very clear menu with a classic top tier placement.

StephenCaver

Clear well designed navigation. Nice use of typography.

OwlTastic

This is especially for those designing blogs, very slick and clear navigation ina 3 column design. Nice use of sidebars and top level menu design.

CreativeNZ

A very good example of how to fit massive amounts of content into a navigation in a stylish way.

Sarah Hyland

Clear, playful, hand-drawn and animated navigation.

Jordan Gray Creative

Simplicity, minimalist design, left aligned side navigation.

Work at Play

Nice clear navigation.

RedNoseDay

Playful navigation consistent with the style and content of the page, usability is top-notch.

Typographica

Very simple and very attractive, everything is easy to follow and you always get to where you want to go.

Bernat Fortet

Creative way of categorization. Easy to follow, the only problem is it is a bit space consuming.

Nuttersmark

Interesting and creative menu design. Takes a little bit of getting used to but the filter and sorting menu is a must see.

Epic Agency

Impressive use of top tier navigation, clear simple and yet stylish.

Pixel Resort

Good example of Apple inspired navigation, everything is consistent and clear.

Paiko.de

Little explanations when you hover over the menu items is a great way of guiding your visitors through your site.

Things We Make

Another clear navigation

Blue Cadet

Very slick navigation. 2 tier top level navigation, the sub tier works especially nice in works section. It is a bit graphic heavy when you use the works next, previous project navigation, but it looks really cool.

Design Intellection

Unconventional right-side tabbed navigation does actually work very well in this site. Scroll down to see how the navigation changes style beautifully.

Also see these...

Students Association at Unitec

Time for Cake

Unstoppable Robot Ninja

Christina Ung

Sarah Longnecker

And when it fails....

ThereStudio

First of you are presented with bouncing links that kind of sattle later on. And guess what not everything that looks like a link is clickable, not a very satisyfying navigation for a visitor.

Design Sul

Seriously.. where is the navigation. Am I supposed click on those bottles, is that it?

Zinc Bistro

Don't get fooled by the top lunch and dinner items, they are unclickable. There is a small thing under the disturbing video called navigation, well it seems to work if you refresh the page 10 times.

HBO+EMTB

When simplicity fails miserably. Worst use of top tier navigation. It looks like a word document rather than a webpage. And that isn't the worst part, just go on, decrease the size of your browser window and see what happens.

Nomek Solutions

Wow simply amazing, the middle menu runs away when you move your mouse to click. Plus the content font is so small that it is impossible to read. Check out the news section and you will see.

mxyplyzyk

Menu items continuously change into images that don't give any clues to what they are connected. Very irritating navigation.

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

free flash photo galleries + free swf hosting

2011-05-01T22:02:00.004+03:00

Just stumbled upon this:

http://www.flash-gallery.net/index.html

A lot of these are freebies and some of them could look really cool on a custom designed header, or embedded into a page post as a photo gallery.

In order to be able to do this you will need to host your swf file somewhere - unless you have your own server or a remotely hosted site, that is. Here are a couple of places that seem to do the job, for free:

http://megaswf.com/

http://www.novamov.com/

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

blogspot: unlocking the header widget so that you can place it in a different location

2011-05-01T17:57:00.004+03:00

Oooops! A couple of posts ago I was talking about making a vertical header and completely forgot to mention something very important related to that: In order to move your header to a different location on the site you will have to do some sniffing around inside the HTML editor (with expanded widgets!), where you need to find this line:

<b:widget id='Header1' locked='true'
and change it to
<b:widget id='Header1' locked='false'

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

design + details: padding the widgets

2011-05-01T13:07:00.006+03:00

Fairly self-explanatory image I would say... On the left is the default state and on the right is the one where I have tweaked padding values by placing this code in the CSS box on the Advanced Editor:

#Label1 {
padding: 24px;
padding-bottom: 8px;
}

The padding makes a huge difference as to how this looks. The strokes become much sleeker when they stop a bit short of the border, and the top and the bottom of the box is also sitting much better now that I no longer have that big space below the last line.

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

design: making a vertical header

2011-05-01T00:24:00.015+03:00

I have been meaning to try this out for quite some time, for a number of reasons: First off, it does get kind of boring to always have horizontal headers at the top of a website: The way in which a website is constructed vertical elements such as the columns do look very good. So, why not use the vertical components of the layout for design strategies, as well as a place for info elements such as labels and link lists?

And then also, web real estate: If you have the content starting all the way at the top of the page, you will be showing considerably more at first sight - obviously.

I just made a website for an art project in which I am involved, and since the logotype of this is a square which works well when placed on a corner with the site description "dropping down" from it (so to speak), this seemed a very good opportunity to give the idea a shot.

Remember that before all else you will need to unlock the header widget! To find out how this is done read this post here >>>.

The template which I used is the one which I took from this site, except that I changed the layout and the number of columns, as well as their widths and proportions, so that the vertical header fit into the corner without looking cramped in. Needless to say the whole thing took a bit of aligning, which these days I do quite quickly by playing with the margin values, as is explained here >>>

See the result here:

http://lpdt2.blogspot.com/

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

blogspot page bottom: customizing the pager, the footer, the subscriptions links, etc...

2011-04-29T17:02:00.029+03:00

Again we have Furkan to thank for this really great information which deals with all of the elements on the bottom of a blogspot site:

To delete the "subscribe to posts (atom)" line find the line <b:include data='feedLinks' name='feedLinksBody'/> inside the HTML code, and simply delete it.

To remove the attribution gadget (that is the "powered by blogger" line), find /* Footer, and to the end of this section add the line display:none;

(Note: I am not sure if removing the attribution gadget is something that Blogspot takes very kindly to. There may even be legal issues involved with doing so. So be careful with this one, I would say!)

And now the really cool part: Customizing the pager, which is the section where you have the links which lead you home, to older posts and to newer posts! You can change the default link text with anything that you wish and you can even replace it with images.

Above you can see how I customized the bottom area of the shoezznutzz site with little arrows pointing left, right and upwards on the pager and by removing the subscription link. On his own site Furkan used the shark on his header which he converted into an arrow. Brilliant!

The code for doing all this is somewhat lengthy, so I am going to direct you to Furkan's post about this here >>>, or...

Find this part in your code:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>

Now, if you want to change the text, just delete these underlined parts and write you own text.
If you want to put an image source, delete them, put this: <img src="Image URL" />

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

blogspot stuff: removing the top navigation bar

2011-04-28T22:44:00.021+03:00

Very simple, if you know where to look, which our ingenious student Furkan obviously did: Go to the HTML editor and find this bit of code: ]]> Before this snippet put #navbar { display: none; }

Furkan tried it and as you can see it works perfectly!

I tried it too and the only fly in the ointment which I can see with this is that it makes one lose the quick access to the design button on the right hand side of the bar. I guess one could keep the design editor open in a separate tab or something.

Thank you again Furkan and keep the good stuff coming please. Much appreciated!

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

is becoming a designer a matter of "talent"?

2011-04-26T19:14:00.013+03:00

No, it is not, I would say.

What has brought on this post is that one of my students (a non-design major) has just let me know that she is dropping out of the class. It is the 9th week of the semester and it is her last chance to do so. Her reason is that she doesn't think that she has the talent for the job. I have tried to reason with her, however to no avail. She firmly believes that being able to put together a good website needs a special sort of talent, which she doesn't think that she has. Taking the class has made her realize that, she says.

Of course it does take what one might call a special talent if we are talking about the high end of design work: High powered art directors, visionary designers and typographers - these people do have a special something going for them, obviously. That said, anyone who has common sense, a sense of order and hierarchy, who takes the time to look at the design output of others and examines what they see critically, can develop a sense of good design. Or put differently, anyone who can put visual elements together into one continuous whole (which is something that most of us manage to pull off every morning when we get dressed) can become a competent designer.

Maybe not so before the days of the computer and the abundance of resources that it has brought to our doorstep. Back in the bad old days (which I am actually old enough to remember very well ;-), before all else you did need the ability to draw. Which, as far as I am concerned, is not exactly a talent either but a skill.

Common sense - that is what this is mostly about folks. And resourcefulness! Not some undefinable something that goes under the name of talent! Having a sense of huge enjoyment whilst making the stuff. Getting excitement out of finding a resource that will help solve a visual problem. And then getting a real kick out of the satisfaction of the problem solved. Those would be the basic prerequisites, in my book. Once those are in place, "talent" will follow - and much sooner than you think! :-)

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

blogspot post customization code snippets

2011-04-26T15:52:00.023+03:00

Some things that I could think of (and found the code for at various places) that all relate to modifying the appearance of your posts. All sorts of things from post and post title background colors, to post title icons, to initials. This is a long and somewhat messy looking post, so I am going to ask you to very kindly take a little jump break and... :-)

Whatever is marked up in black is what you will need to change. Remember that you can do most of the stuff that applies to the entire blog (and not just a single post) in the Custom CSS box of the advanced tab of the template designer. This will allow you to see your changes as you tweak the code:

Changing the background color and padding of a single post:

Place this line inside the HTML tab of the post editor, in the beginning, add your text, close with the slashed div tag:

<div style="background:#your hex value; padding:Xpx;">
Your text goes here....
</div>

Changing the background image of a single post

Place this line inside the HTML tab of the post editor, in the beginning, add your text, close with the slashed div tag:

(Note: If you have an image which you would like to repeat, just change the word "no-repeat" to "repeat", or you can also remove the whole thing from the code altogether).

Centering the post title on the whole blog:

The code for this will vary from template to template, however what you need to do is this: Find the line which says h3.post-title in the HTML editor. Then place text-align:center; underneath that line and just above the }

Adding a small icon before the post title on the whole blog:

Find the first line of code below in the HTML editor, then add the second line, with your image URL:

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><img src="Your image URL" style="border-width:0px"/><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

(Note: You can also place the icon in different locations, above and below or to the right of your post title. Read more about this here:

http://www.blogbulk.com/2008/11/add-icon-or-picture-in-blogger-post.html)

Adding a picture to the background of post titles on the whole blog

Find the first line of the below code in the HTML editor, then play with all the values highlighted in black:

h3.post-title {
background: url(URL of your picture); background-repeat:no-repeat;
height:Xpx;
margin:.Xem 0 0;
padding:Xpx Xpx Xpx;
font-size:X%;
font-weight:normal;
line-height:Xem;
color:$titlecolor;
}

Adding color to the background and borders of post titles on the whole blog

Find the first line, then play with the values highlighted in black:

h3.post-title {
background:#your hex code;
border:Xpx inset #your hex code;
margin:Xem 0 0;
padding:Xpx Xpx Xpx;
font-size:X%;
font-weight:normal;
line-height:Xem;
color:$titlecolor;
}

And if you want your post title to be underlined (like I did on this blog) use this line in the code above:
border-bottom:Xpx solid #your hex code;

Getting big dropcaps initials/or a big first letter in a single post

Go to the HTML tab in the post editor and place this code around the letter that you wish to have drop, play with the stuff highlighted in black:

<span style="float:left;color:#000000;font-size:Xpx;
line-height:Xpx;padding-top:Xpx;font-family: Times, serif, Georgia;">your letter</span>

This one below for the initial you wish to go upwards:
<span style="font-family:Georgia,;color:#000000;
font-size:Xpx;font-weight:X;line-height:X%;letter-spacing:Xpx;">your letter</span>

All that I can think of for now folks. Maybe more will follow at some point... ;-)

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

using the blogspot text widget (and the post editor) to make menus and thumbnail galleries

2011-04-26T14:22:00.030+03:00

On the right hand column of this site you can see a section where I have put a menu with thumbnails for template downloads. It just occurred to me that I never got round to posting on this little trick which I figured out and which makes it very easy to make something like this by using the text widget and the regular post editor. Here's how it goes:

1) Start a regular post - except do not publish it but save it as a draft! (You can always go back and add to it later as well if you just keep the draft).

2) Put all your images and text in the post. (Your text will wrap automatically, however remember that your images will need to be sized to the width of the sidebar that you are planning to put the widget into).

3) I guess you could also add a background texture/color, or a border, or a bit of padding while you are still doing the post entry, as explained here >>>. I haven't tried this myself yet, but I am assuming that all of these attributes would show up on the text widget as well.

4) Select all the stuff on the HTML tab of the post editor and copy.

5) Start a new text widget, go to the HTML tab, then paste the code you got from the post editor into there.

6) Save! Done!

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

finally! a good looking flickr widget!

2011-04-25T23:50:00.015+03:00

If, like me, you have a flickr feed you will be wanting to show it on your blog. There are quite a few flickr widgets around, except that most of them look horrible enough to make you want to run as far away from them as you can, getting you stuck with nasty looking backgrounds and borders and huge big type.

Just stumbled upon one on Flickr itself which actually lets you modify the layout in such a way that you can get rid of all the text, backgrounds, borders, buddy icons and whatever else and only show photos of your choosing. The whole stream, or a set, or a group... And at perfectly decent sizes at that! And if you want to you can get this as a flash thingy also - although that one seemd a tad too small thumbnailwise. And yes, they actually give you the code, so you could modify this even further should you wish to do so - but why bother really? Looks decent enough to me as it is.

Note: I made the screenshot above on the dummy easy peasy site, which currently has a very dark background. The thumbnails float on whatever your background may be, so do not be misled by that.

Check it out here:

http://www.flickr.com/badge.gne

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

moving the header image in blogspot

2011-04-22T01:27:00.007+03:00

I could beat myself up! All that time I spent trying to align header images! And it never even occurred to me that there might be a really simple way of doing it (or rather of polishing things off). Well, there is, and this is it:

#header img {
margin-top: 0px;
margin-left: 0px;
}

Paste the above code into the CSS box on the Advanced Template Editor, play with the values highlighted in black - and watch things move!

Not that this will save you the initial design work that needs to be undertaken in the image editor, obviously. To get a really good clean look you will still need to align the blog columns and the header elements in the way in which I described it here. However, all that done, you may (and probably will!) need to tweak things still further once back inside the HTML environment. And that would be the point where this code snippet will prove its weight in gold!

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

finding the broken URL's on your site

2011-04-21T23:57:00.009+03:00

If you have a big site with many pages, especially one with lots of images that you have linked to externally (or just a lot of regular links for that matter), it may end up becoming very difficult to keep track of whether everything is still in working order.

The free application below, developed by a very nice gentleman named Tilman Hausherr, does a scan which took about 5 minutes to complete for my HVC site, which has a huge number of links at this point. Found 2 missing images and one broken text URL. Of course, I had no idea that they were even gone! Very impressive!

Download, install and run to see how well you are doing with your URL's:

http://home.snafu.de/tilman/xenulink.html

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

blogspot stuff: how to make your blog wider than 1000 pixels

2011-04-21T18:37:00.010+03:00

Look for the first line of the following code inside the HTML editor and play with the values highlighted in black:

<b:template-skin>
   <b:variable default='930px' name='content.width' type='length' value='1000px'/>
   <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
   <b:variable default='360px' name='main.column.right.width' type='length' value='402px'/>

That's it!

Not that this would be a recommended thing for most sites, of course. However, if you want to do something of an artistic nature, which only folk with high screen sizes could see in full - this would be how, I guess... ;-)

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

search engine optimization: pingy

2011-04-21T13:58:00.007+03:00

I have been noticing on the easy peasy stats page that we seem to be getting quite a few visits from something called pingy. So, I just checked it out and this looks like a pretty neat service to help hike up your site visitor figures. Check it out here:

http://pingymasspingtool.blogspot.com/

http://pingywebedition.somee.com/

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

blogspot template modification - shoezznutzz

2011-04-20T18:20:00.015+03:00

http://shoeznutz.blogspot.com/

I indulged my love of weird shoes in order to make another template modification. ;-)

There isn't too much to tell with this one except that I like the menu on the bottom and worked quite a bit on getting that to sit right. The header text was created in photoshop, using layer styles. Although I am usually somewhat careful when it comes to colored typography, in this case it seemed to be a good choice since the site background and the design are both toned down enough for colored text to make a good contrast.

Something which has really added to the design here is the post recommendations widget which I was posting about a few days ago. And another thing which I put in here is a custom cursor, which I got from the free cursor site, which I posted about before here.

This one too started out from the picture window template, in this case the first one on the left. I just wanted to try something very simple and minimal to show the images. So, I changed the radius values and the background image URL's from the HTML editor, played around with fonts, type sizes, colors etc and that was pretty much it, outside of adding a border to the images. For which again, I used the CSS box on the Advanced Template Designer to put in this bit of code:

.post-body img {
padding: 12px;
background-color: #151515;
border: 1px solid $(image.border.color;
}

Download template and header visuals from here >>>

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

blogspot template modification - istanbul catz and dogs

2011-04-20T16:04:00.046+03:00

http://istanbulcatz.blogspot.com/

A Flickr contact of mine named István Tóth takes the most wonderful Istanbul cat and dog photos. With his consent, I have now started a blog for them. Partly to provide tutorial material for the easy peasy page, but mainly because it is so much fun to do it! (great content = easy design, remember? ;-)

For this one I used the picture window template, the one in the middle with the red header. What I was looking for was something like the rounded rectangle background that goes underneath everything, including the header. Nice unification of design elements, that. The radiuses of the rectangle's corners were smaller than what I have here, so I looked for the word "radius" inside the HTML code and changed the values. Also, I replaced all of the background png files with my own stuff by doing a ctrl+F in the HTML editor for "png". Then as usual, I went to the Advanced Template Designer and changed the fonts, colors, etc from there.

Another thing which I used here is the code which Furkan found on Southern Speakers a few days ago, which allows you to have separate boxes for things you post on the same day.

There is one thing with this blog, which is that it is bi-lingual. Which means that in the posts I would like to somehow distinguish between Turkish and English. So, the English stuff gets some added code inside the HTML tab of the post editor. Nothing major - only one small line:

<span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: 17px; line-height: 1.8em;">english text</span>

The widgets got a custom treatment: They got a special shape, became wider, got a background color, etc. All of which I did from the CSS tab on the Advanced section of the Template Designer. And here is the code which I used for that, which you will need to apply to all the new widgets that you create:

#Gadget ID{
margin-top:20px;
margin-right:-15px;
margin-left:-5px;
padding: 15px;
background:#222222;
font-family:Arial;
font-style: normal;
font-size:13px;
text-align:left;
color: #888888;
border-radius: 20px;
}

I also added a border to the post images, again with the same CSS tab. And the code for that is this one, obviously you can change padding and color values as needed:

.post-body img {
  padding: 6px;
  background-color: #975858;
  border: 1px solid $(image.border.color;

There is a custom cursor on this as well. Those who would rather not have this will need to go into the code and remove the line which says
<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-7/cur671.cur), progress;}</style>
and which comes just before
<b:skin><![CDATA[/*

And finally the header - where I tried something new: I placed the cat image (which is actually a part of the header) on the upper right hand corner in such a way that the header takes a curve around the post column. This was positioned as a separate image gadget, whose location I played around with using the CSS tab on the advanced designer. You can use your own image to replace what I have on the site. Create an image with a transparent background, save as a 24 bit png file and upload into the picture gadget.

The code for the placement of this is below, and please note how the margin values are huge big negative ones. This allows me to position the transparent png image above the header text, as well as the post, as a layer. Great! And I will certainly be experimenting with this feature a whole lot more:

#Image1{
margin-top:-100px;
margin-left:-44px;
}

And as for the header text, this was made with a layer style, however turned out to be way too strong in terms of color in the end. So, after I was sure of where everything was supposed to go, I merged the layers and colorized/desaturated the whole thing with the HSL palette and then saved this as a 24 bit PNG file with transparency.

Download template and photoshop file for the header here >>>

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

web image formats

2011-04-18T21:46:00.006+03:00

There seems to have been some confusion amongst you about this. So, just a very quick post on which ones to use and when:

GIF: Will only use up to 256 colors when saving, so this works best for solid colored things (preferably with aliased edges) that have few colors and no gradients. You can also have transparency with GIF, however it will hardly ever look right, will give you some very nasty jagged outlines unless you are using it on straight edged shapes such as bitmap fonts.

JPEG: The one which you will probably end up using the most, works very well with all types of images, in that it uses millions of colors when saving - except that there is no transparency.

PNG: There are two types to this - PNG8 and PNG24. Avoid 8 like the plague! Use GIF instead, works the same way, with only 256 colors. The one to go for is PNG24, which is a fabulous image format that also works with millions of colors + transparency. So, you cannot go wrong with this. Downside: Will create large file sizes when used on large, complex textured images, in which case JPEG is a much better option.

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

blogspot: separate boxes and timestamps for posts that were created on the same day

2011-04-18T21:22:00.006+03:00

This is something which is much needed indeed! Furkan has spotted the solution at Southern Speakers where it is all explained very clearly here:

http://www.southernspeakers.net/2010/12/show-date-for-each-blogger-post.html

Thank you Furkan!

Southern Speakers seems to be hard to reach at times, so I am also copy pasting the code onto here. However, this is a really long bit of code, so to see it please take a jump break and

Find the first line of this code in the HTML editor:

<b:include data='top' name='status-message'/>

<data:defaultAdStart/>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.isDateStart'>

<b:if cond='data:post.isFirstPost == "false"'>

</div></div>

</b:if>

<b:if cond='data:post.isDateStart'>

</b:if>

<b:if cond='data:post.dateHeader'>

</b:if>

<b:if cond='data:post.isDateStart'>

</b:if>

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "static_page"'>

<b:include data='post' name='comments'/>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<b:include data='post' name='comments'/>

</b:if>

</div>

<b:if cond='data:post.includeAd'>

<b:if cond='data:post.isFirstPost'>

<data:defaultAdEnd/>

<b:else/>

<data:adEnd/>

</b:if>

<data:adCode/>

</div>

<data:adStart/>

</b:if>

<b:if cond='data:post.trackLatency'>

<data:post.latencyJs/>

</b:if>

</b:loop>

<b:if cond='data:numPosts != 0'>

</div></div>

</b:if>

<data:adEnd/>

</div>

Select the code and very carefully scroll all the way to the end, making sure you do not miss anything or select anything extra. Then delete all of what you selected and insert this instead:

<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<div class="date-outer">
<h2 class='date-header'><span><data:post.timestamp/></span></h2>
<div class="date-posts">
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</div>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</div>
</div>
</b:loop>
<data:adEnd/>
</div>

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

blogspot stuff: this (too) is "awesome inc"

2011-04-17T23:06:00.026+03:00

I seem to notice in class that you are not really pushing the limits of the templates as much as you should. These templates are a fabulous start out point, however left in their default state they will hardly be adequate to suit any sort of ambitious design criteria. They are not even meant to do so - they are meant to be modified! And, as far as I can see, very few of you are modifying them to the extent where they will really suit your needs.

So, I have decided to do a few examples for you. Here is the first one: My visual communication history blog was long overdue for an overhaul, so it will be a good one to work on for this.

As visual material I have modified an earlier photoshop file, so nothing new there. I did make some new header typography for it, however. Which I may still change, not entirely happy with it yet...

The template that I have used is one of the subcategories of awesome inc, and as a matter of fact it is that particularly nasty looking pink one with the white band underneath the header. So, yes, it did take quite a bit of work to get this to look the way that I wanted it to look.

What I did want out of this was a semi transparent background for the widget area. To get rid of all the white stuff I went into the code and replaced the image file which they had used with my own image file, a tiny 16 x 16 pixel semi transparent dark gray 24 bit png file, which I had previously uploaded to Picasa. (Tip: just do a ctrl+F for "http" and you will find all of it, since it is one linked image which has been used several times. And after that it is just a matter of replacing it with yours ).

Next thing was adjusting all of the line heights. Which meant pasting this code into the CSS box all the way on the bottom on the advanced tab of the template editor. This is a really great thing (almost as good as the split window in Dreamweaver), since you can see the changes take effect as you are tweaking. The parameters you need to play with are highlighted in black:

#PopularPosts1 li{
line-height: 140%;
}
.post-body {
line-height: 1.7;
}
li{
line-height: 140%;
}

And then finally, all the other colors, etc, were fixed in the advanced editor as well. And, now I have a brand new look on my blog! See it in action here:
http://visualcommunicationhistory.blogspot.com/

You can also download the template from here >>>

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

linkwithin - post recommendation widget + beautiful design!

2011-04-17T18:32:00.009+03:00

Caution: Beautiful as this is, it does not serve the same function as the one that was posted before. That one gives you ratings as well as recommendations. This one here only recommends, doesn't let people rate the posts.

http://www.linkwithin.com/learn?ref=widget

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

fine line between good web design & usability

2011-04-14T01:04:00.004+03:00

As the technology advances, we get more and more freedom in how we design our websites. While this aspect allows creativity beyond imagination, it also creates dangerous pitfalls that should be avoided. First, you have to accept and understand that you are designing a web-page not a print (poster etc.), which is the most dangerous pitfall for beginner web designers especially for those with a graphic design background. (GripLimited; welcome to poster design 101, great typography but a ton of problems). Then, you have to think like a simple internet user, where will they look, what will they see, can they reach the desired information easily. Know that, not everyone will be as proficient as you are with internet browsing, nor will be able to see your website like you see it.

During the design process, there are mainly 5 issues that you have to be careful with. These are visual placement, visibility\accessibility, navigation, loading times\problems, categorizing\archiving (if used).

Below, I will try to give you some examples of what "NOT" to do. The selected sites are particularly well designed however due to one of the facts above, each suffers major problems in usability.

Visual Placement - or in this case Visual Mess:

ContentOf

This is what I would like to call hammering the visitor. I don't even understand what the page is about, nor where I should click.

Crative with AK

Nicely done, but what am I looking at? There is so much going on, stuff moving on its own. It is impossible to understand what is a link and what isn't. A navigation disaster as well. Plus on smaller screens, it re-sizes itself, I can't even imagine browsing this site on a netbook.

Visibility\Accessiblity - or in this case Invisibility:

BioBak

Incredibly fun and innovative design, yet an overkill due to the ridiculously big design. It gets tiresome to drag yourself around, not knowing what is where.

Lego

Innovative design and yet again too large for its own good, it is hard to understand what and where is content. Plus the site scrolls from bottom to top and the scroll is at the right bottom. Also too much content at one page, it takes quite long to load.

Navigation - how will I browse?:

Theologs

Where to begin? This site is a lesson by itself. Disturbingly long load time, no proper menu (just a bunch of images that bring out names that don't mean anything). Slow and jagged transitions on images. Again more load times for new pages. And marvelously, you have to go to a new page to actually shut off the sound.

On Toyota's Mind

There was on thing that wasn't on Toyota's mind while designing this beautiful website, navigation. It is really unsatisfying going over those numbers on the bottom to actually see where they might be linked to.

Loading Times - lets face it, no one will care how beautiful your page is if it takes more than a minute or 2 to load. This is especially a problem with those who tend to use flash. In HTML, the only thing you have to be careful about is the size of the images you use. If you are crating a page with massive and high quality images, try to use pre-loading and loading screen javascripts to prevent partially and slowly appearing images. Even in this case, there is the same problem with flash, if you overdo it, it will take disturbingly long:

Coca-Cola Light

Along with no proper navigation, it also takes quite a while to load. Add to this, the fact that there is no way whatsoever of skipping the introduction animation and you get a beautiful and yet useless website.

Categorizing & Archiving - you have to create an intuitive interface so that the visitor can find what he/she is looking for easily... or maybe you don't as in the following cases:

VanAlen Ins.

This is the pillar of confusing categorization. Just click one of those stripes and see what happens, how could anyone find what they are looking for over there.

Self Titled

Another very confusing categorization, just move your mouse pointer to the right side of the page and you will see.

Finally...

I hope this gives you a good perspective on what to consider when designing for web. Good and innovative design is very important but overdoing it results in losing visitors which I guess no one would want.

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

the trio: padding - border - margin

2011-04-13T21:14:00.007+03:00

The most common and confused elements of the css.

Border: As the name suggest it is the border around your element. If the border has 0 width, the border edge is the same as the padding edge and invisible.

Padding: Defines the space between border and element content. If the padding has 0 width, the padding edge is the same as the content edge. This means that your content will stick to the edge of your defined content box.

Margin: Defines the space between border (if you don't have a border then padding, and if you don't have a padding then content) and other surrounding elements. If the margin has 0 width, the margin edge is the same as the border edge(if you don't have a border then padding, and if you don't have a padding then content).

Each edge of margin, padding and border may be broken down into a top, right, bottom, and left edge. (for ex: padding-right: , margin-left: , border-bottom: etc.)

The image below may give you a better understanding.

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

CSS position attribute

2011-04-13T20:30:00.003+03:00

Position is the most vital component in web design and thus it deserves a separate post of its own. It tells your elements where and how they will be positioned in the flow of the page.

There are basically four different positioning properties that are available.

Static: The default property. You don't need to specify this unless you want to enforce a change on your element which receives a different position property from a parent element that is out of your control. Static does not do anything, it practically places the element into the flow of the page in the order it is written in the HTML.

Absolute: Like the name suggest, it is the most overwhelming positioning property. When you choose position:absolute, you have to specify the position by using attributes such as left: , right: , top: , bottom: (not all of them are necessary, use just the ones you will need). These will position your element according to the next parent element, if there are no other parent elements then it will take top-left corner as the reference point.

Beware while using absolute positioning, as powerful as it is, its improper use will restrict the flexibility of your page. As the absolute positioning removes your elements from the flow of the page, they will no longer be in interaction with the other elements of the page. They will rather become stand-alone elements that don't get effected by where other elements are.

Relative: The most commonly used positioning property. When used properly it is the most effective tool that opens up a bunch of powerful opportunities. However it is also the property that gets used improperly most of the time, leading to various problems.

It is confusing because when you say relative, people tend to think that it is relative to some other element, whereas it actually means relative to itself. Let me explain this with a simple example. Say you give an element position:relative; and no other attribute. In this case, you will have your element placed in the flow of your page just as it would have been in static. However when you start giving it attributes such as left: , top: , then you will have your element's position shifting relative to where it should have been.

With the relative property you also gain the chance to use z-index attribute, which is a very powerful attribute. It allows you to place elements on top of each other, the element with the higher z-index will always show up on top. There is a catch though, if you have a static element in that area, it will always be at the bottom even if you specify a z-index. this is something you have to plan beforehand.

Fixed: The rarest property among all four. It certainly has its uses, but has to be thoroughly tested because it has proven to be one of the most problematic on different screen resolutions.

This property positions the element relative to the browser window. When you scroll a page the browser window doesn't change thus your element will stay where it is no matter what, it will practically scroll with your page.

The most popular uses of this property are having a non-scrolling background image, having your header always stick up to the top of the window and having your footer always stick to the bottom of the window. Sometimes it is also used to keep sidebar navigation in view at all times as well, though this is highly unrecommended. Also do never use this for content area elements unless you have an overwhelmingly creative idea.

Bonus Tip: Relative+Absolute: If you have a parent element that has relative position, you can create a child element to it and then absolute position it inside that relatively positioned element.

If you want to delve into the topic more and get a good grasp of the uses, I recommend you to read this 10 Step Guide which explains the uses very clearly.

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

HTML/CSS starter kit

2011-04-13T19:31:00.007+03:00

I have prepared a simple webpage including a header, footer, navigation area and 3 columns. It is written in W3 standards and shows all the simple actions such as ordered lists, unordered lists, image placement, use of header and paragraph texts, linking, styling using css and also inline styling. Of course there are hundreds of layouts to be explored and it is up to your imagination. This is only an example to get you started and familiarized with the structure. You can download it from here. Alternatively here.

The .rar file also includes a commonly used styles.txt for a reference point. But it is impossible for me to explain how each one of them is used or what their variables are. I highly recommend that you take a look at this. It will give you a great insight on how you can use them efficiently, if you are planning on coding your own website.

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

using a blogspot template for a fast design job

2011-04-12T15:23:00.044+03:00

I was asked to put together a fast and furious promotional design package for this upcoming event at our university. And what better way to do it than right here? Ultra-fast, ultra-clean and ultra-easy design solution!

What this approach has given me is an instant visual identity, complete with color scheme, typographic scheme, visual side elements (the thin strokes), and of course grid, layout and structure. Such a visual identity normally takes quite some time to put together, but it has turned out to be a cinch here. And once you have this in place, it is very easy to adapt it to other media as well, which is what I may need to do eventually.

I took the Ethereal template, which I have been wanting to play around with anyway, because of those really nice thin lines which you can have running at both sides of your content once you make the main background transparent and keep the border as a color. Added a dark gradient background, changed fonts and colors a bit - and not even all that much, to be honest. Only problem with this template is that you cannot modify the size of the blog description, unless you go into the code. However, that can very easily be fixed by importing the header text as a png file from photoshop. And here we are:

http://isea2011leaf.blogspot.gen.tr/

The organizers may also want a poster at some point. No problem! This is a perfectly aligned, well structured, ready to go layout in which all the visual hierarchies are correctly placed. (Not bragging or anything, nothing that I spent a lot of time figuring out, just works that way - the indigenous web format sees to all of that most efficiently ;-). So, as I already said before, this will adapt itself to other media quite easily. And, since almost everything here is text based there will be no major resizing issues either. All I will need to do therefore, is to print this page as a pdf, at an A2 size (or even larger), open it up in Illustrator, where all of the text will still be editable by the way. Delete whatever isn't working (which will be all the bitmap based stuff), clear the background and the header (again, both are bitmap and won't resize without some very serious loss of quality), and then copy paste the whole shebang into photoshop, which I vastly prefer to Illustrator as a design medium. Add the images, the background, the header and - you have a poster!

Or even change the format (portrait to landscape, different aspect ratios, etc), move the elements around, and you have a flier, an invitation, a brochure - whatever it is that you need really...

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

custom header for blogspot

2011-04-11T18:03:00.029+03:00

As you will see up top we now have a custom header. Not just a plain header text image, but also a second line with a menu and image rollovers.

Very easy (and also very tough) to make: The tough part was getting things aligned properly and it basically just involves a lot of trial and error. Lots of going back and forth between photoshop, dreamweaver, blogspot and picasa to where I uploaded the blog title image which I kept tweaking to get right and then re-uploading. Still not completely there - but it will have to do, I guess.

I used a basic table*** inside dreamweaver to assemble this, from where I copy pasted the entire code (also including what was in the <head>) into a custom HTML/Javascript gadget. The gadget will automatically delete unneeded info as it saves, except for one line at the top - the document title, which you have to then go back and get rid of manually.

Something to remember when you do this is that you have to put all the images that you are using online first, and then embed the image URL's into the correct table cells in the HTML editor. The menu is actually a direct copy paste from the HTML gadget which we had on the sidebar, into a table cell in dreamweaver, and the images which that one uses are also online, of course.

Dreamweaver, with it's split window is wonderful of course, and I have been looking around to see if there is a comparable software which is free. However, no such luck so far. The best that I have been able to find is called Page Breeze and you can download it from here >>>. You do have a visual interface on this, which helps, however no split window, I'm afraid.

And finally, you can see the full code of the header, where I am also highlighting a few important parameters which you need to pay attention to in order for everything to properly work, here >>>.

*** No lovely CSS <div>s for me. My skills do not go that far - not even close... ouch!

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

the outbrain post recommendation gadget/widget

2011-04-11T11:10:00.025+03:00

Fırat has just found us another goody:

http://www.outbrain.com/getwidget

This website installs a gadget on your blog which puts recommendations underneath your posts, directing your readers to other related posts through thumbnails. Very neat for sites which have a lot of images in their posts. I have already put it into the visual communication history blog where it will make sense to have it since I do have a lot of images on that one.

Although the gadget configures it's appearance based upon your CSS there are still a couple of design problems with it: The "You might like" thingy, for one. Not sure if this is needed in the first place - stating the obvious it seems. But even if we do need it, do we need it to be quite that large? And bold? And then those fat wide borders around the thumbnails too, I could certainly live without...

I added a dotted line at the bottom of the posts, with an added space ( ) underneath it, and that seems to help since it gives the gadget a bit more negative space to breathe in. And yes, unfortunately once one starts one has to do this to all of the past posts as well, since the thumbnails appear on the entire blog. No sweat, did that too. Just a fast copy paste job really, took all of 10 minutes or so.

However all nit picky stuff aside, this is a very cool thing indeed. So, once again, thank you Fırat!

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

playing around with free vectors and photoshop layer modes

2011-04-10T18:35:00.016+03:00

The original vector file is here >>>
And here's what happened to it:

Read all about it (and also see other versions) here >>>

Download the photoshop file from here >>>

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

how to add a poll into a blogspot post

2011-04-09T20:34:00.007+03:00

Easy enough to add a poll as a gadget, however what happens if you want to put a poll into one specific post only? Can be done as well, and this video shows us how:

http://www.youtube.com/watch?v=qoK9lHMjnDc
Ingenious, huh? Tried it, works like a charm... ;-)

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

how to replace a blogspot widget title with an image

2011-04-06T01:04:00.014+03:00

From your dashboard, go to design and into Edit Html. Make sure that you have ticked the Expand Widget Templates checkbox on the top right. Now you have to find the widget ID of the widget title you wish to edit. To find the ID of the gadget you wish to modify, please read this previous post here.

For example, the widget id for my widget is Label1, you will find something similar to this code below:

<b:widget id='Label1' locked='false' title='Topics' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<--------------lots of data here that you don't need--------------------->
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Replace the data:title tag ( <data:title/> ) with the code below:

<img src="YOUR_TITLE_IMAGE_URL" alt="YOUR_GADGET_TITLE"/>

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

importing a table into a web page from office word

2011-04-05T21:26:00.029+03:00

I love tables! Stands to reason of course, alignment freak that I am! But then, I do not love any old table, I like them to be really sleek looking as well. And the best place that I know of to create really cool tables is boring old Microsoft Word!

I have been looking at a lot of options for creating tables with CSS on various websites and one of the big problems that I find is that you are not really seeing what you are doing as you are fiddling around with the code. Unintuitive, in other words. Whereas with Word, obviously you do, you have full visual control. So, if you wish to put data into your website which needs to be shown as a table, a smart designer's way of going about it might well be creating the table in Microsoft Word (or it's Open Office equivalent) and importing it into the webpage from there.

	February	March	April	May
Introduction	Completed
E-learning		Completed
Theories		Completed
GC			Interviews	Due Date

Simply draw the table on a brand new document in Word, tweak it's appearance in any way that you like, then do a Ctrl+A to select everything on the page; come to blogspot, go to the "compose" tab (not HTML!) and paste the table into your post. The one above was made just like that.

And... Tip, or rather a word of caution: Do not even look inside the "Edit HTML" tab on the post editor since what you will see there may give you a righteous heart attack! :-D

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

additional photoshop lens flare tips

2011-04-04T19:48:00.010+03:00

If you are working with a dark, more or less solid image field, the duplicate layer > apply flare > layer mask trick seems to be the easiest way to go. However, what happens if you want to use the flare on a photograph with a lot of different tonal values? There is another way to do this and I figured I should talk about that one as well, in case some of you want to try it out:

Create a new layer on top of your image, fill it with 50% gray, or lighter or darker. Apply the lens flare onto the middle of the gray layer. Then in the layer palette change the layer mode from normal to hard light, screen or exclusion - whichever works, this will depend upon the values of the underlying image - as will the value of the gray of the flare layer. Move around, see what happens around the edges (they may be visible), and if needed use curves or levels or brightness/contrast (or indeed, yet once again a good old layer mask) on the gray layer to blend everything together.

So, the whole thing involves a bit of experimenting, undo's and redo's, I'm afraid. But essentially that is how it works folks.

Open this photoshop file here >>> to get a clearer idea.

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

design: using photoshop plugins for website backgrounds and effects

2011-04-04T18:37:00.020+03:00

geek.folk goes elegant ;-). This is to show you how to use photoshop plugins and filters to achieve effects on your background and header.

I didn't change much from the previous layout and even the glass buttons are still here, except that I applied a dark layer style to them this time.

On the background I used a plugin named Sinedots II, freely downloadable, courtesy of a very generous gentleman named Philipp Spoeth, who has been making this wonder available (PC only - ouch!) right here >>> for a very long time. Just place it in your plugins folder and the rest is fairly self-explanatory, although there are a few tutorials on it available on the download page as well. In this case I just applied the plugin onto the full canvas and then used a layer mask to delete the top and the bottom. Moved it up to where I wanted it to be, and that was that. In any case, this is such a beautiful filter that it would be kind of hard to go wrong with it no matter how you use it...

On the header, where I switched the font to Bauer Bodoni this time, I used the standard photoshop lens flare filter which is under Filters > Render. Now, here is the trick with that: It is actually quite difficult to get this to sit exactly where you want it to sit. What I do is, I create two layers in the same color, and then put the lens flare dead center in the middle of the top layer. Apply a gradient on a layer mask from all 4 sides (Tip: make sure you have the gradient colors going from solid black to transparent white, otherwise you will keep painting over what you are doing ) then move, rotate, resize the flare to exactly where you would like it to be - which in my case is behind the header text so that I get a nice highlight there to offset the dark typography.

(Note: If I were to actually make such a site, I would place the flare on the background, together with the sinedots effect, so that the content slides over it as the viewer scrolls downward).

And you can see everything that I did in the photoshop file which you can download from here >>>.

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

a new (cleaner) look for easy peasy

2011-04-03T23:20:00.028+03:00

This blog is getting to be quite big now. We have lots of different material, from plain text, to code samples, to photo gallery and slideshow demos, to lots and lots of different types of images. And when we start thinking in terms of design functionality, such diverse and colorful content needs a much quieter, simpler container.

I had been wanting to do something with the "Simple" template ever since I started this blog since it has a really cool, minimalist interface. There were a few problems with it however, such as that the default line height is way too narrow, both in the post body and in the gadgets. And when I started this blog only a few weeks ago I had no clue as to how to fix that! This last month has been a hugely instructional time for me - and this comes with a huge big thank you to Selim, who has undertaken not only our student's education in "code", but also mine.

And - I am totally loving it as well. All this fiddling around with code values and hunting around for them has gotta be the best fun that I have had in front of a computer in quite some time!

So, first I saved the old template for all the bits and bobs that I had put in the header. Then I installed the "Simple" template, copy pasted whatever was needed from the old one onto here; fixed all the other stuff that I felt wasn't quite right with the new template (namely all the line heights), tweaked the old header image a bit, changed the background image - and hey presto - we now have a much cleaner looking blog!

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

proud of our own! Onur Yazıcıgil and "Duru"

2011-04-03T13:07:00.007+03:00

Duru is an ongoing multilingual font project, which consists of four weights with small caps and alternate glyph sets with accompanying italics. Italics are to be included in the font specimen booklet in May 2011.

The creator of "Duru" is our very own Onur Yazıcıgil, a much valued faculty member of our university since Fall 2009. He and I co-teach the main Graphic Design course of the 3rd year and he is one of the greatest colleagues and friends that one could ever hope for.

And... an amazing typeface designer, as the following will show:

Note: Duru is due to be distributed through an internationally renowned professional type foundry in the near future. So, please stand by for updates!

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

comic sans for everyone

2011-04-02T14:50:00.003+03:00

http://www.google.com/landing/csfe/

Happy April's Fool Day - from Google! Just about gave me a heart attack! :-D

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

creature house expression

2011-04-02T00:47:00.029+03:00

This is probably the greatest vector drawing software that has ever been made. Basically Creature House Expression lets you draw smooth vectors (as intuitive as a real brush if you also have a tablet) which can become the most gorgeous water color strokes you could ever possibly wish for! It will also transform type and all sorts of other vector shapes (you can open Illustrator or EPS files), into painterly effects, which you can then export back out as a 24 bit PNG image with full transparency at whichever size you want.

It used to be freeware but then the rumor has always been that Microsoft bought it up and integrated it's key properties into their design suite Microsoft Expression (not to be sneezed at either by the way, excellent package in fact!) and took the free version off the shelf.

And then today I read somewhere that this wasn't so, and that a free download of Creature House Expression, for both PC and Mac, was still hidden away somewhere in the depths of the Microsoft Expression website. And sure enough, a bit of burrowing around and I found it:

http://www.microsoft.com/expression/expression-design/Default.aspx
Just downloaded it, installed it, and YAYY! It is a fully functional software!

Go go go! What on earth are you waiting for? Download now! Before they change their minds over there!

Note: I have quite a few additional creature house strokes and environment maps, which I downloaded back when the software was all over the place and people were developing freely downloadable stuff for it. I have put them all here:
http://www.citrinitas.com/easy-peasy/creaturehouse-stuff.zip
The strokes go to C: \ Documents and Settings \ All Users \ Application Data \ Creature House \ Expression 3 \ Strokes. And the environment maps go to the same location except Application Data \ Creature House \ Expression 3 \ Images \ EnvMaps on a PC. Where they all end up on a Mac, I have no idea.

You can also purchase a huge package of brushes for the software (very reasonably priced) from here:
http://www.graphicxtras.com/products/express.htm

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

blogspot stuff: and if you want to edit the text attributes of your popular posts?

2011-04-01T18:53:00.020+03:00

First off, you need to be aware that although they look like as if they are, these are not really made up of regular text fields; in fact the whole shebang is hypertext - in other words these are all links. Which Selim, sharp cookie extraordinaire that he is, figured out in a nano-second of course. So, as an example, if you want to change the line height, again scroll to the end of the widgets section inside the HTML editor, where again you need to find the line which says

/* Posts
----------------------------------------------- */
before which (while you are still in the widgets section) you paste:
#PopularPosts1 li{
line-height: 140%;
}

And this will stop the text of your popular posts being all squished up in that horrible way. The value 140%, which is highlighted in black can of course be changed to whatever you wish it to be.

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

well done Ayhan!

2011-04-01T18:34:00.007+03:00

Ayhan is working on a site on Aikido, about which he seems to be very knowledgeable. Not only is the site rich in content - even at such an early date - but it is also beautifully designed, well researched and very well written.

He does have one major design headache, which is that the background image, to which he has attached a resizing code goes underneath his gadget columns at smaller browser sizes. We have been discussing solutions for this and I am confident that he will come up with something good to fix the problem.

There are also posts on his design process which I especially like, however by rights they belong in a separate blog, his homework blog in other words, where he can talk about all of that, and maybe even at greater length. And he has promised to start one ASAP, so I am awaiting that one with excitement now.

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

flickrslider, a very neat little app for slideshows and photo galleries

2011-04-01T14:26:00.015+03:00

This comes to us from Fırat, who is scooting around in search of slideshows or photo galleries which he wants to embed into the amateur mobile photographers community portal that he is developing:

http://flickrslidr.com/

Uses your flickr sets to create slideshows. Very nice indeed, thank you Fırat! And keep 'em coming please! :-)

One small problem seems to be that you can only create a slideshow which has a square format. Anything narrow and the images slip to the bottom. The good news is that they give you the actual code which would make it possible to tweak this. As an example, along with being able to adjust the size, ideally I would also like this to loop rather than asking me every time if I want to replay it.

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

splitting up the header in blogspot

2011-04-01T14:20:00.031+03:00

Today seems to be shaping up as a Fırat Gunal day here on easy peasy. While he is busily developing his own site he has been fabulous about finding some really useful stuff which we can share here as well:

You may want to add a button or a search box onto the header of your website. In which case you need to split it. Here, as re-blogged from BloggerSentral, is how to do this:

Go to Dashboard > Design > Edit HTML. Make sure the Expand Widget Templates check box is un-checked. Look for the following lines in your HTML code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test Blog (Header)' type='Header'/>
</b:section>

Insert the following code right under (after) it:
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

So the final code should look like this:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Sentral Widget Showcase (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

You now have two sections in the header, the section with the existing blog title on top and the new section below it. You will now need to position the sections side by side, by floating the section containing the blog title to the left, and the new section to the right. To achieve that, locate this line of code:

]]></b:skin>

Add the following CSS code right before (on top of) the line:
#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

Now it is time to add the banner, search box, or whatever it is that you want to add. Go to Design > Page Elements and click the Add A Gadget link to add your widget. If the added widget shows up under the blog title (instead of on the same level, on it’s right), go back to the CSS code, and change header and header-right widths and experiment with different values until you get it right. And you can see a screenshot of how this looks on Fırat's post.

(Extra little tip from Fırat: You can also do this by going to Design > Template Editor > Advanced > Add CSS where you will see the newly added code and also how the header looks on the page. Much easier to tweak values when you actually see what you are doing at the same time! ;-)

aligning the top of your columns in blogspot

2011-03-31T19:10:00.020+03:00

You may already have noticed that the top of the post column at blogspot stands a few pixels above the gadget columns, and if you are like me you are probably dying to fix that. Yesterday in class I was delighted to find out that our student Furkan is bothered by this as well, so this post is especially for him :-).

Funnily enough the blog section at blogspot is perceived as yet another widget by the code! Which Selim most ingeniously figured out - one smart cookie, that one! So, you actually need to go to the bottom of the widgets section of the CSS in the HTML editor, where you will see this line, which is the start of the next section:

* /Posts

----------------------------------------------- */

Then add this code directly above that line, while you are still inside the widgets section, that is:

#Blog1{

margin-top: 6px;

}

Then play with the pixel value highlighted in black until all the stuff is aligned. In the case of this page this was 6 pixels, could be less or more in yours, of course.

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

playing with blogspot widgets (gadgets)

2011-03-31T02:15:00.010+03:00

As we have talked in the class last week, it is possible to separately edit every widget, give them different backgrounds, alignments, borders, colors, fonts etc. Here is how you do it:

The "widget id" is the only thing you need to edit the widget, but first you need to find it of course. To find the ID of the gadget you wish to modify, please read this previous post here.

Now go into the HTML editor, into the CSS part and find the section entitled "Widgets", then scroll down to the end of the section, just above the part where "Posts" section starts. In other words search for this line:
* /Posts
----------------------------------------------- */
And then all you have to do is; add the code given below straight above this line. The word Label1 in the topmost line, which is highlighted in black, is what you replace with the ID that you have found in the way described in the above linked post.

#Label1{
margin-top:20px
padding-left: 5px;
background:#ddddd;
font-family:arial, sans-serif;
font-size:11px;
text-align:left;
color: #db4c46;
};

The styles I have used are just for example, you can use as many or as few as you wish.

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

backgrounds: one size fits all

2011-03-31T01:26:00.005+03:00

Here is what to do if you want to have a background image that will automatically re-size itself according to the browser windows size (thus also for different screen resolutions).

First off be sure to get a nice large image around 16:9 ratio size having preferably 1900 px width, reduce its size (not in pixels, as in kbs) so it is not larger than 300-450 kbs(even this is too large but it will do).

Then upload it to someplace where you can have a direct link to it.

Finally go into "Edit HTML" from the design tab. Find "body {" in the css section. (just searching that quote without the quotes will get you there if you can't see it). It will most likely look something like this:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}
Now, replace this part;
background: $(body.background);
with this;
background: url(http://www.yoururl.com/your_image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
You should have something like this as the final result;
body {
font: $(body.font);
color: $(body.text.color);
background: url(http://www.yoururl.com/your_image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

This will work in most of the latest versions of known browsers.

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

splashup - another great online image editor

2011-03-30T21:12:00.009+03:00

Beautiful dark, elegant interface. Makes one feel good just to look at it. You can edit and save images from and to various online domains, including Flickr and Facebook, as well as from and to your own hard drive, of course. And it seems to have quite a few of the necessary bells and whistles - such as layers, layer effects, filters and so forth...

Check it out here: http://www.splashup.com/

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

design tutorial: clean body text in your posts

2011-03-29T16:08:00.012+03:00

I have made some deliberately unaligned body text and taken several snapshots which I combined for a tutorial. Looks really ugly folks! :-P:

To get to the tutorial, please click on the image and read the annotations.

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

playing around with photoshop layer styles

2011-03-27T20:08:00.018+02:00

I downloaded the styles mostly from 22 pixels, however I may have looked elsewhere too. Just pull in a whole bunch and put them in the styles folder under photoshop presets. Then click on the little right arrow at the top of the styles palette in photoshop to load them. And my advice is to leave their values more or less as they are. It is quite easy to lose the effect altogether if you start tweaking them too much. I used the vector shape tool and I also installed a few dingbat fonts since layer styles seem to work especially nicely with shapes. (The two circle arrows on the right are in fact dingbats).

Only other thing I did was that I added a little divider line between the menu items. A tiny little vertical 1 pixel grey stroke and then gave that a motion blur at 90 degrees exactly, so that it faded out at both ends.

And the photoshop file, where you can also see how I aligned the stuff, is here:

http://www.citrinitas.com/easy-peasy/easy-peasy_gf_4headers.zip

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

blogspot stuff: finding your gadget ID

2011-03-27T11:59:00.005+02:00

This is something which you need to know about if you wish to configure the properties of your individual gadgets in the HTML editor. They are well hidden out of sight, however can be found at the very end of the address bar of the gadget when you are on the Design panel: Click to edit the gadget, scroll all the way to the right, to where the mouse cursor on the image is pointing - and there it is!

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

easy peasy downloads

2011-03-25T23:37:00.010+02:00

Wandering around the internet, gathering learning material for my students, I am touched by the amount of resources people make available to others. So, in my modest way, I would like to contribute as well - especially given the fact that I am making such a big point of using the resources and material of others as part of a web learning strategy:

Whenever I make a full photoshop file (or anything else that is remotely usable) for my own class I will be giving a download link to it as well. The very first one is in the previous post and they will all be collected under a new label called "downloads". My students will have the good sense to not to use the content "as is" for their course work, since I will obviously be able to recognize my own handiwork quite easily. Others who come to this site - please feel free to use as you see fit. A linkback would be very nice of course, but I will not be insisting upon it...

:-)

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

being "resource-ful": site layout with ready made visual components

2011-03-25T20:45:00.009+02:00

Read all about it here ;-)

Get the photoshop file here:
http://www.citrinitas.com/easy-peasy/geek-folk.zip

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

chaoscope: a great application to create website backgrounds

2011-03-24T23:04:00.008+02:00

Download and play! :-D

http://www.chaoscope.org/

(Tip: Start out with the stuff from the projects folder and take it from there. Pick different fractal formula from the very top of the panel. Choose different render modes. Drag your cursor to rotate the fractal. F3 makes a new shape, F4 renders it for you. Also remember to click on the gradients at the bottom to get random color schemes. )

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

no more bands underneath your top gadgets in blogspot

2011-03-24T22:37:00.016+02:00

And following closely, is another really good one from SouthernSpeakers:

Unfortunately it isn't only your pages gadget! Any gadget you place up at the top of your page seems to get this nasty old band underneath it. To get rid of them once and for all, simply go to Design > Template Designer > Advanced > Add CSS and paste the following code:

.tabs-outer {
background: none !important;
}
.tabs-cap-top, .tabs-cap-bottom {
border-top: none;
}

Then press enter after the last character of the last line } (after the last curly bracket, in other words). Apply to Blog. Done!

Thank you SouthernSpeakers! Awesome!
__________________________________

And here is Onur's addition: The page that he has directed us to tells us to do one of two things with the following text. You can either go to the Template Editor > Advanced > Add CSS. Or you can go directly to the HTML editor and look for ]]></b:skin> and paste it right before that line.

So, here is the code if you want to center your pages:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

If you want the pages to align right however, then this is it:

.PageList {text-align:right !important;}
.PageList li {display:inline !important; float:none !important;}

If the tabs stack on each other after you added the code, replace display:inline with display:inline-block.

( Note: And be sure to catch the little fullstops at the beginning of every line of the code. Very easy to miss, so be extra careful! )

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

how to stop your pages gadget stretching all the way across your blogspot site

2011-03-24T22:08:00.012+02:00

The fact that this happens is one of the reasons why I have not been using this gadget since it breaks up your page in a really nasty way. Here is how to fix it:

Go to Design > HTML editor. Find the line which says
/* Headings ----------------------------------------------- */

Then, paste the following code directly above it:
/*--Pages Gadget No-Stretch Starts--*/
.tabs-outer {
background: transparent !important;
}
.cap-top, .cap-bottom{
border: none !important;
}
.tabs-inner .widget li a{
border: none !important;
border-right: 1px solid $(tabs.border.color) !important;
}
#crosscol{
background: $(tabs.background.color) $(tabs.background.gradient);
border: 1px solid $(tabs.border.color) !important;
}
/*--Pages Gadget No-Stretch Ends--*/

Comes to us from SouthernSpeakers, a great site for all sorts of blogspot codes. Lots more there, definitely check them out!

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

seo: post title before blog title, or how to get google to like your blogspot site even more

2011-03-24T21:24:00.010+02:00

Here is another little code snippet which will make it possible for a search engine to search the contents of your posts as well as your blog's title and keywords. Result: Even better web visibility. All you need to do is find this line in your HTML code under the 'Design' tab:

<title><data:blog.pageTitle/></title>
And then replace it with this:
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
Save. Done!

(Tip: It will of course help if there is some indication in your post title as to what you will be talking about. As an example, a title such as "nice code" would not have gotten me very far with this one right here. So, as you can see, I made a point of mentioning all the relevant stuff in the post title itself. ;-)

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

nice clean search box

2011-03-23T16:21:00.009+02:00

I don't know about others, but I was hugely bothered by the way the default search gadget looks on blogspot - the way the 'search' button shoulders its way into the actual search area and then all that 'powered by google' stuff below...

So, here is the code for a squeaky clean one, no buttons, no nothing, just a plain empty entry field. And as is usually the case - "less is more" once again! Simply copy/paste this code into an HTML/Javascript gadget. Change the value highlighted in red to get the correct width and you are all set to go:

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="18" type="text" /></form>

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

how to get google to like you

2011-03-23T02:53:00.021+02:00

Want to get a top ranking in search engines? Be sure to have proper meta tags included in your html. Meta tags are not a magic trick to get you to become the top website on search engines, however they provide search engine crawlers with the desired information which proves that you deserve to be thereabout.

Definition & Usage (as explained on w3schools.com)

Metadata is information about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The <meta> tag always goes inside the head element.

Most Important Tags: (What you need to fill is highlighted in red)

identifier-url This tag provides google-bot with the information on where to start indexing your website.

[meta name="identifier-URL" content="http://www.yourwebsiteurl.com"]

description Provides the description of your website, you can use a maximum of 255 characters.

[META NAME="description" CONTENT="yourdescription"]

keywords Write a maximum of 12 keywords separated by commas, which are directly connected to your content.

[meta name="keywords" content="keyword1,keyword2,keyword3,keyword4,etc"]

language Provides the language of your website, if it is English, this is not very important but still it would be good to have.

[META NAME="Language" CONTENT="english"]

revisit This tag is important for bloggers such as yourself and for those who update their sites very frequently, otherwise it is just a waste of space. It tells google-bot, how frequently it should visit your website. Having a short interval means, you will have updated content much faster on google search engines.

Other than these there are many more meta tags, however they do not have much of an impact. If you are interested you can see the whole lists here and here. Also you can use the online meta tag generator to get a proper code which than you can copy/paste into your website.

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

pixie CMS

2011-03-22T20:11:00.002+02:00

http://www.getpixie.co.uk/

Pixie, a "small, simple", user friendly, (and free!) HTML editor, again comes to us via four Yip, my Second Life colleague and brilliant Dutch artist and illustrator.

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

free icon editor

2011-03-22T19:44:00.002+02:00

Nice little tool:
http://www.free-icon-editor.com/
:-)

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

clean typography for website headers

2011-03-22T13:11:00.014+02:00

I am not sure that what is shown above even needs much further explanation.

Clean typography, plenty of space, the usage of one strong color together with a lot of neutral ones such as grays, black and white - and you are more or less home and dry.

There will of course be occasions when the content of your site will necessitate that you use a company logotype or some sort of extra visual indicator on what the site is all about. But even then clean solutions will usually work much better since a website gives you a very small area to work on and things will usually end up being be placed very close together to begin with; so wherever you can be clean and simple it is good practice to go for it.

One thing web designers make a lot of usage of however are all the stylistic details which they use to enhance their work, by giving it a dimensionality which makes elements stand out from the page. When you look at the ones above you will notice that there are very few where the design elements have been placed on the page "as is". They have been worked upon with bevels, drop shadows, delicate touches, soft gradients, ultra thin strokes, and so on. Never overboard, never exaggerated, never so that it becomes coarse but very very carefully - almost like as if these designers are jewelers, working very patiently on exquisite ornaments or watches. This is something that I would encourage you to do as well.

Getting the exact right balance for these types of details is not so easy however. A lot of them are created with the layer styles in photoshop, but all I can say is that whenever I try my hand at doing something like this I cannot pull it off. I rarely manage to get something that has this level of refinement. So, my advice would be to use pre-created layer styles. A good selection can be downloaded from WebTreats. And here are a few other good places also:

http://www.photoshoproadmap.com/
http://www.dezinerfolio.com/
http://22pixels.com/browse/styles/

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

design tutorial: aligning a header

2011-03-21T22:31:00.033+02:00

Alignment (and also deliberate non-alignment) is one of the foremost principles of good graphic design since alignment is how one of the fundamental Gestalt principles, continuity works. In the previous post we were looking at visual continuity and alignment is very much a part of that as well.

HTML web design is done in two places: One of them is an image editor and the other one is an HTML editor. And we need to be able to switch back and forth between them and also be able to carry values from one to the other. Meaning that we often need to make things work together although they are located in different places while we are still working on them. So, we need to be able to visualize how things will look, even at a point where we cannot yet see them together as a whole system.

In terms of alignment the good news is that on an HTML website most things are aligned by default since the underlying structure is based upon a table, very much like an excel sheet, in fact. (Only exceptions are the elements that are made out of images which you import into the cells - such as the header!).

When you design a website you will usually start out in an image editor and then adjust the alignment of the table cells in the HTML editor according to what you initially did in the image editor. However, you can also work in reverse and start out with the HTML editor and go back to the image editor from there. And the really good news is that the template editor at blogspot makes it exceptionally easy to do so.

So, go to the template editor and temporarily put a black (or white - depending upon your template colors) image on the background. All black or white - a tiny square which you tile. Then go to the blog title gadget in Design and delete everything. We want the top, the header area to be completely blank, in other words. Now take a snapshot of the site and then open it in the image editor.

Place guides at the edges of the gadget lines (or whatever it is that you have on your site that needs to be taken into account for alignment purposes), the post lines, the text columns. Anything that you see that you think will be important when aligning things. Now start putting in the design elements of your header, always keeping an eye on the guides.

Below I am showing you a few examples, both good and bad. In all of them you will see the text both with the guides and without them to help make things even clearer:

The first one is made up of two long sentences for title and sub title, where the top one is aligned to the text of the left hand gadget column and the lines of the right hand column. And then additionally the blue letter 'P' is also aligned to the post column. The sub title aligns to the lines of the right hand gadget column but also to the text of the post column. I have used the text column for the left hand side since this is a much stronger element than the thin lines. On the right however it is better to align to the lines since the text column there is ragged on the right hand side and doesn't give you much to go by.

In the second one I am keeping the title as it is but I am now making a little paragraph out of the sub title which I am aligning to the post column as well.

In the third one I am taking the sub title and aligning it to the vertical stroke of the 'D' of the word design. So, in this case I am no longer looking at the template but at the relationships within the header itself. Except - I still have an eye on the template guides since I would not want for the sub title to get placed without a good relationship to the guides either. In this case this would be all about getting not too close to them! The trick with alignment is that it is perfectly OK to be unaligned provided that you are really and truly unaligned! The death sentence comes when you are close but not exact. When your placement is "ambiguous" in other words. As the following example will show you:

Here the trouble is that the placement of the sub title is completely arbitrary, of course.

However sometimes things can go wrong even with the best of intentions. In this one I did not place the sub title arbitrarily, I actually aligned it to the stem of the letter 'Y' in the word 'Easy'. Problem is that I was not paying attention to the guides of the template and so I ended up being way too close to the post guides, which is the much stronger element.

(Tip: Always align things to the strongest element between two that are closely situated, never the weaker one! )

In the final example I am showing you the sub title placed in such a way that it is no longer close to any of the guides or the vertical strokes of the letters. And this works too since I am making an unambiguous statement here. It is when you get caught in the middle that things will go to hell... :-)

And finally - once you are done, crop your image to the exact size, which will be your outer guides and upload as header image.

Even with all of this hard work, you may still end up not getting it completely right. In that case help is also at hand within blogspot: Copy paste the following code into the CSS box inside the Advanced tab of the Template Editor and play with the value highlighted in black:

#header img {
margin-left: 0px;
}

(Also remember: If you want floating elements and not a box, close the eye of the background and all unwanted layers before you save as a 24 bit png. )

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

design: creating visual continuity

2011-03-21T18:14:00.019+02:00

Time for a design tutorial now! ;-)

We shall be doing this by examining the structure and visual continuity of a professionally designed website template called 'boomerang 3D' from http://www.dreamtemplate.com/

HTML websites have a big advantage in terms of visual continuity since the structure of a site (header / menu / content) inherently provide for this. (Read more on website structure here).

When we design something we are actually creating a system. Not something that is good looking in its separate components but something that works together as a whole. So, when we are putting together visual elements we should not be making random decisions but always be thinking about whether the elements that we are deciding upon will work with everything else that we put next to them. There may be nice things that we see or think of, but if they do not serve the structure of the whole page we simply bookmark them for possible usage later, in some new project, but leave them alone for now since they will not work with the whole system.

In graphic design this system is made up of type, images, shapes and colors. And the usage all of these 4 components should be consistent. As an example, if you are using rounded rectangle shapes in the header of your page there should be rounded rectangles elsewhere as well - maybe buttons, or post backgrounds. Your typography should consist of a small selection of fonts that work well together and your type should always align in the same way. Your images should reflect a common color scheme (like they could all be black & white, or all color, or all colorized) and also how you crop an image may be quite important: If you sometimes crop images like squares and at other times like vertical rectangles and then sometimes as horizontal rectangles, it may well end up becoming visually inconsistent.

Now let us look at 'boomerang 3D' a bit more closely:

The obvious place to start out with any graphic design work is typography: In terms of graphical hierarchy type is always the number 1 element since it actually conveys the "spoken" information, which is of course the most important thing. Here the visual continuity in which type has been used is obvious - one font only, everything aligned flush left. Always a title above the images, with a sub-title to follow and then the body text below the image. And even when there is no image (such as on the 'contact us' page at the bottom), the same principle has been applied: Again title, closely followed by a subtitle, then an empty space - and then the actual body text.

However although type is very important, one of the first things that strikes me when I look at this template is the way in which how all of the images have been cropped to form long narrow horizontal rectangles. This usage is possibly the most important continuous visual element and it adds hugely to the effectiveness of this site.

But here is the really clever thing which was done here: These narrow images are actually a sub-system, or a mini version of the larger system into which they are embedded. If you look carefully you will see that the whole layout consists of long, narrow, horizontal rectangles, starting from the green band in the header at the top, down to the long and narrow menu at the bottom. Even the form on the "contact us" page has long narrow entry fields instead of the usual chunky ones. And then there are long bands of darker gray that break up the layout horizontally as well. And almost nowhere do we see a strong vertical break - except in one place, the "about us" page where the left column is set wide enough and there is also sufficient space between the two columns for this to become quite unobtrusive.

One seeming inconsistency might be the fact that the green blur is much broader on the homepage than on the rest of the site. This has been done so that the homepage differentiates itself from the rest, of course. However, in the end there is no real inconsistency anyway since the relationship that is lost in the height of the shape is more than made up through a color which is powerful enough to pull this off.

And speaking of color - fairly self evident: They use one strong color together with lots of grays and always full color images.

Very clever! Very effective! Very elegant!

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

professional web templates: a lesson in good web design

2011-03-21T18:00:00.002+02:00

It really is...

Dreamtemplate is one of the best and largest ones and it pays to look at their humongous selection of templates in order to get some good design inspirations. I have decided to use their templates for design tutorials - one coming up in just a few minutes, in fact...

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

custom cursors

2011-03-20T20:29:00.028+02:00

A friend of mine from Second Life, four Yip, has seen the easy peasy site and has given me a huge list of resources, of which I will be making good usage! Thank you four Yip :-)

So, here is one of them: Would you like a custom cursor for your site?

Think carefully before you say yes. While some people (myself included) will love them, others may become highly irritated by them; especially since they will not be getting the little hand thingy for the links. That said, if the answer is still yes - here is a good place for them: http://www.cursors-4u.com/

Find the one which you think will work well with your overall design scheme and then copy the code from the little box underneath it where it says "universal CSS/HTML code for your web page".

Now comes the important part: Paste this code onto a text file first since you will need to do some serious cleaning up before you can put it into the HTML editor. Here is what the code will look like:

Delete everything that is highlighted with red! Only keep the stuff that is highlighted with white, from <style type> to </style>, in other words. If you do not do this you will get a little "support Cursors4U" banner on your site. Which, in this case I find a bit excessive since Cursors4U seems to be doing quite nicely with lots of advertisements already.

Next step: Take the cleaned up code and paste it into the <head>, at the very bottom, just above the line which says <b:skin><![CDATA[/* and before </head>.

Done! You now have a custom cursor!

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

image tracking

2011-03-20T15:21:00.011+02:00

Here it is folks:

http://www.picscout.com/

This site lets the owner of an image find out where and how their images are being used. It also lets web designers locate the owner of a photograph to contact them about licensing.

If you link back to an image by right clicking and copying the URL (inline linking), then you are OK, since the software would only track the image back to the original website. And in any case, there seems to be no plagiarism involved when you do inline linking as this article on wikipedia tells us.

However, if you download an image into your computer, play around with it a bit (resize, crop etc) and put it back online - then you are toast! Or could very easily be if the owner of the image were to set their mind on checking on things.

I am not sure if this would also work with highly processed and manipulated images, however I would err on the side of caution and stay away from such practices altogether. For one thing, regardless of whether you get caught or not, it is not the right thing to do. Second, why take the risk when there are literally millions of images online, which you can use under the proper creative commons licenses? Read more on where to find them here.

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

can you resize a full background image on an HTML/CSS website?...

2011-03-20T00:54:00.027+02:00

... one of my students wanted to know last week. Well, seems that you can:

http://css-tricks.com/how-to-resizeable-background-image/

And you can see a demo of it in action here:

http://css-tricks.com/examples/ImageToBackgroundImage/

Apparently this works with just a few lines of code which you insert directly into the CSS:

#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

Very very nice indeed! Lots and lots of other really cool code snippets (as they call them over there) to check out on their huge site. So, thank you Chris Coyier and CSS-Tricks!

Note: I have been thinking, and in order for this to give a good result your image aspect ratio would need to be 4 x 3 so that it reaches down effectively at sizes like 1024 x 768 or 1600 x 1200. However the width would need still need to be 1920 so that it also stretches to 1920 x 1080. Which makes the vertical value 1440. So, 1920 x 1440 is what you need. Which is pretty big and may be difficult to bring down to 300KB, which is the limit on blogspot background images. Read more on browser sizes and background images here )

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

"handwritten" fonts

2011-03-19T21:12:00.028+02:00

I was going over my student's homework blogs and there seem to be quite a few of them who want to use handwritten fonts for post titles and headers. (Quite a few available on the blogspot template editor - ouch!).

Most graphic designers will probably agree that for the largest part handwritten fonts are problematic design elements. And the reason is pretty much right there in the word "handwritten". Well let's face it, they are not, are they? They are artificial constructions which try to imitate something that is quite impossible to imitate since it is so organically individuated.

When we write we follow a personal rhythm; so personal in fact that handwriting is considered to be forensic evidence, just like a fingerprint: We never ever duplicate the same exact shapes; the way we write individual letters depends entirely on the letters standing next to them - each one we shape, link up and place differently.

Handwritten fonts, on the other hand, link or place the (same shaped) "a" in exactly the same way, regardless of whether this "a" is standing next to a "t" or an "m" or an "r". And so what comes out, in most cases ends up looking rather phony, I'm afraid. There are lots of different handwritten fonts to choose from, of course - but not that many are well made enough to be able to get over this inherent limitation of being imitators. Flight (below) is one such good one, I think:

Note: And then there are also "script" or "calligraphic" fonts, which should not be confused with "handwritten" fonts at all. These fonts are based upon historic engraver's texts where each letter does in fact follow the same exact rules, is linked similarly, if not indeed identically to the ones standing next to it. So, these fonts usually do look very sleek and find very good usage within the proper context. Below are three nice ones which you can get from dafont. )

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

playing around with (HTML) type

2011-03-19T03:00:00.029+02:00

I haven't really been looking too carefully at the compose tab when I am entering a post, I guess. Just noticed now that (unlike wordpress) blogspot allows you to change the fonts and sizes of bits inside the text intuitively.

Great news! Means you can have custom designed block quotes on your posts, without having to write too much code! (The default block quote command does not look too clever since it pushes the text inside, so it is usually quite tough to get things correctly aligned with it).

Of course, one would need to be very careful when doing any of this because it might end up looking absolutely awful if you don't get it right. Still, I cannot resist and am trying one out right now. The body text on this blog is Arial so I will use Times New Roman to get a nice contrast between sans-serif and serif. Usually works very well - especially if serif is also set in italic:

______________________________

And now I will make this quite big, so that it really stands out from the body text.

______________________________

Since this is a special element, a strong color should be OK to use for type: So, I made this a dark blue for added accentuation. Now, I will go back to the regular font size/color and write some more, so that I have enough text to fill the post - a block quote needs a lot of text to nest inside properly. Notice that I also added lines to top and bottom to give it even more definition. While the body text is justified, the big text is flush left since at such a big size it would be very difficult to justify the type and not get "white rivers", which are the lines that run through and break up body text vertically. Very clumsy whenever that happens...

Although I started out on the compose tab I ended up tweaking the code in the HTML tab of the post editor quite a bit: Changed the font size from x-large to a pixel value, and also I changed the line height with an added <div> tag. So, here is what the code for this ended up looking like (the stuff that I added/tweaked is marked up in black):

<div style="line-height: 30px;"><i><span class="Apple-style-span" style="color: black; font-family: 'Times New Roman', serif; font-size: 38px;">And now I will make this quite big so that it really stands out from the body text.</span></i></div>

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

embedding a flash file (swf) into a blog post

2011-03-18T23:35:00.006+02:00

You might need this for all sorts of things, but especially for stuff like flash based photo galleries. All explained beautifully, right here:

http://www.aleosoft.com/flashtutorial_blogger.html

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

well done Onur!

2011-03-18T21:21:00.015+02:00

One of my students has just thrilled me by designing a really cool, minimalist homework blog. Only one post and one page so far, but already there are beautiful details, like the tiny bit of black highlighted text on the page, the typography/colors of the header, (a great color scheme on the whole site, by the way), a gorgeous favicon at the top...

I am well impressed:

http://onuroral.blogspot.com/p/about-this-blog.html
:-D

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

structure: having the best of both worlds?

2011-03-18T21:09:00.043+02:00

Ahumm... All these pull-down menus and so forth... Very nice and everything, but let's face it, what use can they possibly be on a blogspot site unless you can have an infinite number of pages and nested sub-pages?

A regular website and a blog both have their shortcomings but also their advantages. Could there be a way to combine the advantages and minimize the shortcomings?

The two diagrams above show the way in which a blogspot site is set up (above), and the way a regular website is set up (below). On a blog the home page is a stream of posts going backwards in time (so the home page is in fact the main content); whereas on a regular website a home page is just a plain old home page from where you are expected to go to other pages, (in some cases, more or less immediately), to reach the actual content of the site.

Blogspot allows only for a limited number of pages and the navigation is mainly achieved through the labels, which I think are brilliant. The labels do not search inside the pages, only the posts. So, depending on how careful you are with labeling stuff, they work a bit like the categories in wordpress. Or, if you go totally overboard (I think you can have a maximum of 2000) they would correspond to a kind of a tagging system. But, one way or another, although the labels are very cool - they do not make up for the loss of the pages, and especially not the loss of nested pages, which are another thing that you cannot have on blogspot.

So, would there be a way to bring together the labeling system, the post stream on the home page of a blog and the unlimited number of sub-pages and nested pages on a regular website? I think there is, yes. You would simply need to set up a child blogspot domain which would have the same design as the mother domain and use the posts of the child domain as pages, as I am showing in the diagram above.

This allows you to keep the labels on your mother blog and you have an infinite number of pages and sub-pages (depending upon how you link things up) on the child blog.

(Tip: To transfer the design of one site to the other, download the full template from the mother site and re-upload it to the child site. Or, click inside the HTML editor (expand widget templates by checking the box first), do a ctrl+A to select the whole code. Then copy paste the stuff into the same location on the new site. Everything will appear as if by magic. Only exception is the header image - that will need to be uploaded again, I'm afraid. )

What's more is that you could also diversify layout widths between the two sites in such a way that your "pages" could consist of a much wider entry column, since you would not have the labels on the child site. (Pages do not get labels to begin with, remember? ;-). So, you could go with only a 2 column layout or maybe even a single column one.

I have actually already started putting this to the test with a child blog for this site to which I have already linked one post which I started here and then completed over there. The second easypeasydesign site has a single column layout since I want to show really big images sometimes inside the post. Which was in fact my main reason for starting the child site. However, the more I think about it, the better the possibilities seem to be with linked domains all working as one site.

It is of course highly likely that all of what I am talking about can also be achieved all on one site through coding. However, for folk like me, who would not be able to pull this off all too easily, my suggestion may still be a good one to work with.

Oh and - there is a glitch, which even a non-coder like myself would try to fix, which is that you wouldn't want the footer on the child site, where it says "older posts" and "home", since you would expect the "posts" to work like stand alone "pages". However, that I am fairly sure is something that can be fixed on the HTML editor by simply deleting that gadget altogether.

Note: The diagrams above were made with the open sourced yed graph editor, which you can download from here:
http://www.yworks.com/en/products_yed_about.html

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

all kinds of menus

2011-03-17T23:30:00.009+02:00

You can find some very nice custom menus at http://bloggerhowtotips.blogspot.com/

The image above shows you a selection from the available styles which you can generate on the site. On the left are vertical HTML/CSS menus and on the right are drop down vertical menus. Both pages give you the codes for all of the different design styles and also tell you exactly how to use them, which incidentally is through yet another HTML/CSS gadget - love these things!

And then there is also a smoothly animated multilevel drop down menu; again you can obtain the code for this from here, and again, this too works through the HTML/CSS gadget.

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

HTML codes for the ASCII

2011-03-17T02:09:00.014+02:00

or simply put, how to get any symbol, letter etc. to show up properly on your website.

Writing simple blocks of text into your site is no problem at all, but what happens if you want to use symbols or letters such as; ¢, ¥, ¼, æ...

On some platforms such as Blogspot, you are in luck, you can open your character map or search the web for the symbol you want to use (which is a huge waste of time) copy/paste it and there it is. However you won't be so lucky if you decide to hard-code your website which will result in these symbols appearing jumbled up when you put them online. So here is the solution for both coders and those who don't want to waste precious time looking up the symbol.

Go to this link: http://www.ascii.cl/htmlcodes.htm

Look up the symbol you want and copy either the html-name or html-number (both works) and paste it into your code to wherever you want it to be.

This next part is for those who will use it on Blogspot: While you are on the "New Post" or "Edit Post" Screen, where you have the title box and the text box, there are 2 options towards the top-right end of the text box; originally you always have Compose selected. Whenever you are going to paste one of these codes, select Edit HTML and paste it, then return to Compose and it should be there. You can keep on writing normally back in Compose and switch back and forth whenever you want.

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

ajax/javascript/flash image galleries

2011-03-17T01:41:00.004+02:00

Here are some really good and popular image galleries that you can use in your web pages. All of them are free, however some do have Creative Commons licenses, so read carefully if you are thinking of monetizing your sites in future. All websites contain step by step tutorials on how to setup and customize the galleries, however most of them will require you to get your hands dirty, meaning you have to go into the code.

Ajax Galleries

MiniShowCase

GreyBox

Lightbox (most popular, slick and cool design)

Javascript Galleries

Highslide (personal favorite, very customizable, probably requires the most coding among these)

Flash Galleries

DF Gallery

Flash XML Gallery

FlShow

Will be updated... Check back for more soon.

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

bitmap/pixel fonts

2011-03-16T22:59:00.014+02:00

http://www.dafont.com/bitmap.php

Now that we are beginning to speak about image based menu items - the above link will take you to one of the best collections of free bitmap fonts online.

(Note: Since bitmap fonts are based upon an exact pixel count they need to be used at the exact specified size which you will see all the way to the right on the red bar above the font preview. (Typographic point sizes correspond to the pixel size at 72 ppi screen resolution by the way). So, be sure to have the right size - anything less or more will make the font break up in really ugly ways. )

(Also: Remember to set the anti-aliasing value to "none" from the pull down menu on the font palette, as shown in the screenshot below, since this value is what will give you the crystal clear sharpness that you want from a bitmap font. )

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

image based menus

2011-03-16T21:22:00.015+02:00

Look on the left column right here on this site and you will see that the pages menu now has image buttons with rollovers instead of just plain text ones. This was done with a code generated here:

http://javascript.internet.com/generators/preload-images.html

So easy it is almost ridiculous!

Once you have the code, go to Design and add an HTML/CSS gadget to one of your columns, paste the code, save - and you are done! (Tip: Needless to say, you can make more than just 3 buttons. The generator gives you 5 to begin with anyway. However if you have even more than that, simply copy paste the lines from the script and change the image and destination URLs in the added lines. )

Some other nice stuff too on this site by the way, such as a pull down menu generator, a pop-up window maker, a story generator - gotta love this one! :-), lots of image effects, text effects, and and...

http://javascript.internet.com/

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

for slideshows...

2011-03-15T20:02:00.018+02:00

Absolutely fabulous!

All you need to do is go to http://web.photodex.com/ and create a free account. This is an online version of the famous proshow slideshow application. These people are simply the very best in their field, so naturally what they have now developed for the web stands head and shoulders above all the competition as well. There are beautiful themes to choose from (I didn't even touch the one which I used, it was that nice to begin with), but you can customize them as well. Add music from your computer or their library. Again, I was lazy, used their music...

Once your show is done, you can get the embed code and paste it straight into the HTML editor of your post here. (Or wherever else you are creating your site, of course). And another neat thing, which I just discovered is that if you edit the show at photodex it will automatically refresh itself to the new version wherever you have linked it to, since the original URL doesn't change.

(Tip: The show is rendered 640 pixels wide and unless you post column is wide enough for it, it will hang off the side if you do not resize it properly. Simply resize by changing the values from inside the code, just like you do with images. )

A free account has its limitations, obviously - such as that you can only use 15 photos per slideshow, your videos (yes! you can in fact embed videos into this!) have to be below a certain length, and your upload space is limited to 100MBs in total. And also I do not think that you can have HD.

I splurged and got a yearly plus account since I know that this is something that I will probably make quite a bit of usage of on my many blogs, but to start out with the free plan certainly gives you enough to play with as well.

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

content = design: fireworks!

2011-03-15T01:40:00.033+02:00

One of your classmates just sent me the link to her blog: From what I could gather from her mindmap she is thinking about designing a site on all the things that inspire her in life. Fair enough, I guess... But then in her very next post she is talking about a specific thing which inspires her - fireworks!

So, here is the thing: If you don't know her at all (which, obviously most of her readers will not), what would you rather read about? Fireworks in particular, or a medley of all the things which inspire her? My choice would be fireworks. A fascinating subject where she can go in-depth - and that is what makes the big difference here:

"Fireworks at Swindon", courtesy of Stephen Gunby

As she is building the site she will also be learning - which is at least half the fun when creating a website. There is a whole history there for one thing. Local customs which I am sure must have developed around fireworks all around the world, fairy tales and myths which they have probably brought about. There would have to be writers and artists and musicians who featured them in their work. Not to even mention the whole technological aspect. Huge big industry, after all. Must some active technologically there.

So, she has a subject there which would allow her to develop a specialized site, which people who have a specific interest in this subject would bookmark and put on their RSS feeds in a nano-second. She would get re-blogged by them and even more people would come to read and see what she has to say. It is a subject which she can take as far as she wishes, there is certainly enough material there for that. It will also involve doing research and rooting out information online, all the good stuff which I think of as good web design to begin with: In other words, she will be able to focus.

And the importance of focus in terms of design is that if you have a focused subject - such as fireworks - then you also have a great opportunity to focus your visual elements. Good design is about visual continuity. It is about creating a visual language where every component of your structure goes with everything else. Focused content will bring this about almost naturally. Images of fireworks, videos of fireworks, background and typography which complements them...

So, in many ways (if not in fact all-ways!), content = design. Brings about design...

YAYYY! Fireworks! Go go go!

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