Website Dev/Design

I will say a few words about the main website on I started developing this page in a way I would normally didn’t follow, but time restrictions led me to this. I used one of Dreamweaver’s html template (1 column liquid, centered, header and footer) and it’s CSS file. This is a screenshot of the template.
Dreamweaver CS6 html template

I can’t say I spent more than 2 hours on 98% of the page. This 2% of development was the site name on top of the main image. It took me overall about 4 hours as I didn’t know the best way to place it. I tried several ways placing the name. Initially I had placed an image in the content class and the text as an h2 in the container class.

source code of html file

source code of html file

When though I styled the h2 with a big font size and to be positioned on the bottom half of the image it created a big gap in the header because it was the original position.

screenshot of

I didn’t want to make it a graphic in photoshop as it would be an issue with different resolution screens, so after a few days I tried creating a separate class for the image, which would eventually hold the h2 element, then set the image as background with a css reference background and the value url(images/bg.jpg); in order to pull the file from the directory.

In terms of the the lines on the top and bottom of the image, they are border-bottom and border-top properties for the header and footer respectively. They are styled 2 pixels thick and colour #dadada, in order to match the blog’s lines. I set quite a few common points. They don’t have to look exactly the same, but it’s nice when they look similar.

common points

  • 2px #dadada lines footer/header
  • #fff (white) body colour
  • #f1f1f1 (light grey) page colour

Apart from making a connection of the two, they help concentrate the viewer in the middle where the content lies, without strong colours that might make reading harder or degrade the visual value of the images.

This template didn’t have a navigation class and I created one. I could always use the header class to place the links, but I though I might change position of the title to the header, so it could better to have a separate class. I have noticed that more divs give you more control over the design.

I found very useful the word-spacing css reference for making a bigger gap between the text/links of the navigation element. The links of this element and probably throughout the site, will change colour on hover to #dadada in order to match the header border and of course because they are easier to read that the #f1f1f1 colour on text.

At the moment of writing this, I have created only an index and about pages. Though on the navigation element you will find a portfolio dead-link and a link to this blog opening on a new tab.

Soon, I will place a link on the portfolio text linking to a #picbod13 digital exhibition page created for the Picbod module. Or I will make one more page with a link to #picbod13.

The about.html page is a copy of the index.html with minor changes, such as deleting the main image class and h2 class, added a paragraph, to include some text on copyright and other information. I changed the title at the top in the head element. In a few words the structure I followed so far is to keep the same layout for every page and make all the changes in the content class.

I should also mention the addition of a favicon.ico link to every html page. This is the tiny icon displayed by the browser in the tab, to represent the site. This is not the final, but it’s good for the time being. I placed the line right below the the style.css attachment in the head.

The website was designed after taking into consideration that people browse the web from different displays. At the moment the the main container is 800 x 614 pixels. I have tested it on displays from 15″ up to 24″. I will have to make more tests with smaller sized screen like net-books, pads and sometime in the future mobile compatibility. As far as the accessibility features, I keep the links and images up-to-date with descriptions and alternative text and titles. This blog is full of them so far.

This is how the web page looks at the time of writing.

screenshot of home oage


screenshot of the about.html page of

Minor changes

I made minor changes to the css file as recommended by Christopher Trafford on his comment.  I added colour to the links (with #content a:link) on top of each post, in order to differentiate the categories, time and date from main text of the post. In the future I will either change the font or simply put a background to make the more distinct.

screenshot minor changes css code

To answer his comment, the images pulled from flickr on the sidebar, that seem to overflow are an intentional design decision. The idea is to make it different and “break” the minimalistic but also monotonous design I have done so far.

The category titles are something I want to change as the developer of this theme had styled as code. The main issue for me was that they are embedded in the php code with some functions I am not familiar yet. I tried a few times and I broke the blog. Luckily I had a backup. Also I managed to remove some of these pointed brackets at the navigation element and in the sidebar. When I have more time I will learn the functions and change them. fixed

The bottom border is a good idea to differentiate meta from body, although I have to create a new div tag for meta as it doesn’t exist so far. Lousy developer…

edit: Just found some time to deal with the div id content and gave it a make over. After I added the class .post .date on the CSS code, I added a background, colour #f1f1f1 with a dashed 1 pixel border, pushed the .post .title inwards with padding-left of 7 pixels.

Further down added .entry a:link so I can give some colour when hover the links of the post entry, as well as remove the underline styling from the post.

screenshot of css code

screenshot of css code

CSS Modification #sidebar

The sidebar can be consider as important as the post body of a blog. The sidebar holds important information, internal or external links. It is the opposite of the post area while holding some of it’s features. The post area is dynamic, meaning that the information is constantly flowing, in comparison with the more static use of the sidebar. The sidebar area is used to keep some information static while serves as a feed for certain other applications.

At the moment I am using this area for both types of information. I will keep some important links to other pages that showcase my work, a twitter feed and links to other peoples websites. In the future, depending on the use of this blog, I might need archiving widgets, in order to make access of information easier, as it will be more than today. I explain more about the widgets I am using, on this post.

Starting with dimension and font. I increased the width as I had already increased the #wrapper width. The font order was changed. Helvetica is first. The line-height, which is the gap between lines of text was decreased from 160% to 125%. I added a border to the right of the sidebar with a fixed width of 8 pixels and colour of #f1f1f1 to blend with other borders. At the end bottom end of this border I added a radius of 18 pixels, and a border at the bottom of 1 pixel and the same colour. The two borders blend and create a nice rounded corner. I need to add the browser-specific radii properties for the just to be sure it’s compatible.

As I described in a previous post about the functions of this theme, apart from changing the specific symbol of this function, I changed its CSS property. Margin (left) had a value of -15 pixels which made the symbols float between the body and the sidebar. By setting this to -4 pixels it’s aligned with the rest elements of the sidebar.

For the sidebar’s link styles I changed the tag #sidebar with selectors :hover :focus and :active. The text-decoration was underline and I changed to none and the colour was #000, which I changed to #1c9bdc.
This way the links will be visible on hover by changing colour instead of underline.