HTML/CSS starter kit

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


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:

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

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 borrect 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

Fırat has just found us another goody:


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 (&nbsp;) 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

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 >>>

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