http://obrienj.richie.idc.ul.ie/

A particular module for my Masters course required us to design our own website in order to display our assignments for the module to be graded. In semester one I had a simple site that I decided I didn’t much like in semester two, so I re-designed it from scratch.

This website was created with:
– HTML5
– CSS3
– JavaScript
– JQuery
– Dreamweaver
– Photoshop
– Love and care

The old design was incredibly simplistic in terms of colour and font. It had a mostly greyscale look and feel, which in retospect I didn’t love. So I decided to go with more colour this time around. I choose a background image of a shot I took myself in Paris. I feel like it gives the site some character and makes it more enjoyable to look at.
The differences below are clealy evident between the two headers and menu bars. No longer do I have a large centred logo, but a smaller, classier-looking one on the left-hand corner. The font I use is different also and the navigation links are simpler this time around. I decided also to put the content for each page in a semi-transparent div box, and one of the nicest features I have added is the jquery tabs. This means I can fit more on each page, without the need to have too many page links in the menu bar.


I also decided to move the social media links to the footer instead. It makes for a cleaner design I feel. I added HR tags after the header and footer to give a nice-looking line break.


An important part of web design today is making your site responsive to all screen sizes, and I have tried to do this with my site also. I did this using media queries in CSS. I have made some changes to the mobile site vs. the desktop site. One change is that the logo changed from “Joe O’Brien Media” to “J O’B Media”, and it centres. The navigation icons also become vertical instead of horizontal. This is all about maximizing the screen size. The content boxes are also wider on mobile to allow the mobile width to be utilized better.