Online Web Design Degree

Saturday, 12 March 2011

perfectly clean images at all sizes for blogspot

A small but highly annoying problem comes along when you upload images from your computer to your blogspot blog. Linking images from other sites will not do this by the way, with that you don't have to worry at all. However when you upload directly from your computer, the code will look like this:

Your image will be 320 pixels wide. The height can change depending upon your image aspect ratio, but the width is always 320 - no matter what, even if the width of your post is 1000 pixels! This is the default state and should be fixed, of course. Which needs to be done by hand in the Edit HTML tab of your post editor:

The bits you need to tackle are highlighted in black in the above code snippets. You obviously change the height and width. However, there is another little thing you need to change also and unless you take care of it your images will look really bad and blurry. This is the s320, which needs to get changed to s1600. Don't ask me why, this is how you get it to work.

(Tip: Need to know how to get the correct measurements when you resize your images? You can of course do it in photoshop by going to Image > Image size and pretend that you are resizing the image from the pixel values on the top. And then you can also install the opensourced Faststone Image Viewer (greatest app in the universe - please make a donation!), right click on the image, and... )

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

design: hierarchy / text / lightness values

Since a website usually has very little white space (space which is empty of informational content, that is) the hierarchical components of a site will often end up being placed very close to one another.

The two images above should hopefully explain it: If you make all of your text one color (white in this case), it will be quite difficult for people to know where to look first when they come to your site. If however, you use various tones of gray then it will become far more obvious where the most important stuff is, and then what comes after that. As a rule, things on the side bars are less important than your post, these should be darker than the post. Inside those, visited links are less important than unvisited ones, and the rollover link should pop out the most.

Inside the post itself it is a good idea to highlight or make bold the stuff which you would like to stand out. (I prefer highlight since I do not like the way bold text looks on websites at small sizes - becomes smudgy).

Size is also an element that can be used for establishing visual hierarchies, however since most of the text will have to be on the small side you can only really use that for post titles and the header: When it comes to body text, a change from 13 pixels to 14 or 15 is not going to give you enough difference and will only make your design look 'ambiguous' - a term which designers fear like death! So, tonal values for type hierarchies are one of the best ways to go in web design, I think.

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

auto-cycling backgrounds

If you want to have multiple backgrounds on your blog that randomly appear on every refresh, then you should add the following javascript code in this way:

Go into design, then into page elements, choose add a gadget, from the pop-up menu select HTML/JavaScript, there is no need for a title, into the content area copy/paste the following code:

image1.url, image2.url etc. shouldbe changed with the actual url of your image.
if you have more or less images you can adjust the number accordingly, keeping the same style in mind either by deleting extras or creating "banner[3], banner[4]" etc. You also have to adjust the number in red and make it equal to the number of images that you are using.
if you are using small images which should repeat themselves such as textures for backgrounds, then you should replace "no-repeat top left" with "repeat center center"

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

homework: template mods

OK people - question: When I was checking your homework in class last week, the ones that I saw had done absolutely nothing to their blogs. I am amazed! How could you possibly have resisted? Something that is so easy and so much fun? And that is in fact a righteous introduction to web design? Which is the class that you are taking?

I am putting my money where my mouth is and setting you an example now:
http://easypeasydesign1.blogspot.com/2011/03/modifying-template.html

Please go to the above link and look at the examples that I am showing you which have all been made using a blogspot template, by simply changing the background images, making simple header images and replacing the default header with them, and then going to the template editor and choosing different layouts, widths and changing values from the advanced tab. No coding, no nothing! Except in very simple cases, such as adding a background image to a single post, which I was talking about in the entry just before this one. There are cases where some advanced CSS editing will be needed to tweak these into a perfect state but (with Selim's help) we will get to all of that when and if needed.

This is your homework now! grrr... I want to see some action on your blogs! And I will be even happier if you keep experimenting and take different screenshots and put them into posts. And furthermore, I would like you to keep on doing this - not only this one time, this week, but always! This is how you will get a sense of web design - not by sitting around and waiting for a miracle to happen, you know? And ooops - sorry, the miracle has actually already happened: You have a fully editable template, courtesy of blogspot, for free! And if that isn't a miracle, I don't know what is!

Here are a few good tips before you start to play around - so that you actually have elements to play around with:

1) Add gadgets - a nice text box, even two maybe. Links (find some stuff to link up!). Make different link boxes, for different categories....

And please delete the default gadgets: Absolutely no point in having a follower box on a brand new blog where you have no followers yet - or so few that it is kind of better to not show them at all, you know? Same for 'About Me'. This one is almost impossible to make look nice and aligned. So, get rid of it, for God's sakes! Make an 'About Me' page and put a nice big photo of yourself and some nice text. Easy peasy... And also 'Archives'. Again, too soon, you have only been around for 5 minutes - what archive?

2) Labels (which you can rename as 'Topics' or whatever you like: Now these will only happen once you start putting them at the bottom of the label box of a post. So, create a 'dummy post' (you can call it 'for labels' or something) and put a lot of labels in it. This will give you the list which you can then use as a gadget box. Similarly, add pages and use a page gadget. (The page menu on the top looks pretty awful in its default state and you cannot change it unless you re-code it, so for now I would stay away from that and go with a side gadget instead). You don't need to write anything in them yet, simply give them a name and write 'under construction'.

And, again, absolutely no kidding guyz - this is now your homework! ;-)

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

Thursday, 10 March 2011

putting an image into the background of a post!

Verrry nice indeed! Here's how it works folks: Place this line of code at the very top of the post:

Fill your post with whatever - photos, text... Then, close the whole thing with </div> And you can do the same thing for the title of the post also if you would like that to have a background as well - different images too, if you want. Simply change the image URL and the padding value at the very end to 0.5em, so that the title and the text of the post align nicely. Easy Peasy - except for a minor bug: For some strange reason sometimes blogpost wants you to save the whole thing as a draft first. So, no big deal, you save as a draft (even if the post is already published), close, re-open and then get the preview and publish...

Oh, and - if you want a border around the post and/or the post title - then here is the additional bit of code for that (you can change the color to anything you like, of course):

The image on the background is only a little trial of course, but I have to say that my mouth is watering at all of the possibilities with this! :-D. And here is the blog where the original tip is coming from. Thank you so much Carissa Rogers!

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

starting to think about page structure

The diagram above shows you the three distinctive design areas, which are determined by the content of a website.

First off, the image is exactly 1024 x 768, however as you can see quite a bit of this area is taken up by the browser, so you are actually left with considerably less space to work with. What you do have left needs to be thought of as three distinctive areas:

The header is where the site's information (such as the title, subtitle and so on) go. Also some buttons, such as 'contact' or 'FAQ' or 'Home' may go here as well. Essentially this is the area that will be initially visible when someone comes to your site and so this is the place where they are most likely to see things. Next, comes the area through which someone would access the (initially hidden) content, such as pages, things grouped together as labels (categories in wordpress), also links to other sites, and so on. So, in a word, this second area is the menu. It is highly desirable that this part (along with the header, of course) stays consistently visible throughout your site. And then third, is the part of your site that changes and is updated very often - the main window, or the content.

You should be aware that these areas do not need to be placed in the way that I have put them here but can be located quite differently as well. So, as an example, a menu could be on the right side only, or it could be on both sides (as it is here on this site), or it could even be on the bottom or the top like a narrow band running underneath the header. Again, the header could be on the side or even the bottom - in which case you would of course need a special frame so that it would always slide upwards and stay visible inside the screen. What is important is that you need to be aware of these three parts and that all of them are accounted for in your design.

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

webtreats...

... is so nice that it deserves a post of it's own. You can get all sorts of things from here, including background patterns - but much more as well: Photoshop presets for one thing - brushes, custom shapes, really cool layer styles - and then even layered photoshop files for web sites and themes. Check it out - you will love it!

http://webtreats.mysitemyway.com/

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