Class 5 (Web Design) 26th October 2011

 Web Design  Comments Off on Class 5 (Web Design) 26th October 2011
Nov 302011

Week 5 already. Working completely with mind maps now for my notes (hopefully this will help me to remember), anyway its below:

Mind Map

Also available as a PDF file

 Posted by at 11:59 am

Absolute positioning: graphic design vs web design 0-1

 Uncategorized  Comments Off on Absolute positioning: graphic design vs web design 0-1
Nov 292011

As a graphic designer I found absolute positioning to be the answer to many of my layout problems I was facing.

And then it became my biggest problem.

When i first started studying about how you can position your elements in a page I said to myself: finally all my problems will end with absolute positioning. You can create a layout quite easily: by using values for top, right, bottom and left, you can position every element exactly where you want it! And that was my intention: to have complete control over the look of my web designs.

And then without much knowledge on how elements relate to each other and how the visual formatting model works, I starting using absolute positioning. Things got complicated and I was actually left in a position without any absolute control on how things look.

At the beginning everything seemed great, my layout looked great on my pc, at my window size and the text size I had chosen, but as soon as I started playing with any of those variables different from mine, things started going absolutely completely wrong.

Let me show you an example:
my layout on my screen as I wanted it to look.

notice the slogan next to the cup. It collapsed when I started resizing the text in my browser. Not a great sight right?

That paragraph was absolutely positioned in my layout, again trying to control my design without fully understanding the implications when not considering how absolute positioning really works.
This reason why this happens is very simple: absolute positioning takes elements out of the normal flow of the document and do not affect other elements which share the same containing box.

That means that absolutely positioned elements although they have a very well positioned point of view, have no awareness of what’s happening around them. Absolute positioned elements- in our case the slogan- does not move in relation to other elements but rather in relation to the values I have set for top, left, right and bottom.

And in most cases in which CSS newcomers (lime myself) use absolutely positioning to place various elements, the container in which these elements are placed is the body itself, so when the body resizes, you get the same problem. A tragedy.

How can I take back the control over my designs?

Simple. First understand how different positions work!
But in general, work as much with the normal flow of the document as possible. Let the elements naturally position other elements that come after them.
Second, let the floated elements come to save the day. Although Floated elements are also taken out of the normal flow of the document, the content will flow around the outside of a floated element, which is not the case with absolutely positioned elements. You can also use clearing to have content appear below the area of the float.

That’s why floated elements are much more flexible than absolutely positioned.

 Posted by at 4:44 pm

Easy Thumbnails

 Uncategorized  Comments Off on Easy Thumbnails
Nov 292011

We haven’t started doing JQuery etc (yet!), and there are loads of thumbnail viewers available as javascript libraries. However, I used something in my Richardson’s site to get my gallery to work. To see it in operation click here.

This is basically a small piece of javascript and an associated CSS file (thumbnailviewer.js and thumbnailviewer.css) – it really was a piece of cake (no pun intended) to implement on the baker’s website.
Continue reading »

 Posted by at 2:53 pm

Lost my way with Google Maps

 Uncategorized  Comments Off on Lost my way with Google Maps
Nov 292011

Just a quick note about the use of a Javascript alternative to the standard Google IFRAMES option.

I did my map implementation for the Richardsons project using this because I wanted to (a) avoid the markup errors (iframes not available in Strict) and (b) wanted to find out more about the Google Maps API (incidently there are loads of tutorials out there, but the one I used was Google Maps API have a look).

It was initially a bit of a pain in the neck because needed to work out the co-ordinates of the postodes I wanted and also get a handle on the way it worked – but like all these things once you work it out its relatively straightforward (in fact the Google Maps page allows you to get the co-ordinates). The API also allows you to have popups with the location details + put other relevant info on the map – I included local parking info in mine, and this implementation can be seen here.

Also one other thing, getting it to work with javascript off – have a look at the code for the page above, particularly the CSS you will notice a background image on the DIV where the map is loaded… a simple workaround.

A better approach is (probably) to use a Google Maps JQuery – but I didn’t do that, but I may next time. This can be seen in Jim’s coursework.

 Posted by at 2:29 pm