Designing for the web

I usually create my initial design sketches using photoshop, but other people might use different programs. But no matter how you create your designs, in the end it has to be translated into a web-ready template. I think it is important that the people I work with understand the various aspects of this.
During the creation of a template several things are done. If textures are used in a design, or other image elements that are an integral part of a design, I have to translate those image elements into a web-ready format - and sometimes they might need some editing in order to be usable in a template (repeating textures for instance).

The actual layout of your template is created using HTML, CSS and sometimes javascript. (The programming language PHP can also be used, but that has no direct impact on the resulting layout.) You might have heard those terms before but for a more thorough understanding I would like to explain something about them.

HTML (Hypertext Markup Language)

The content of a website is presented to the visitors in the form of html files (that is: files that usually have a .html extension - even files ending in php are in fact html files). HTML files contain nothing but text. The text in those files can be one of two things:

  • Textual content of your site (the text for your blog article for instance)
  • Textual instructions on how to handle certain elements in your layout (put an image or a video here, this text is a title, this text is bold text, put a table here)

What is important here is that - apart from the textual content of your site - the html file does not contain things like images, or movies. If you want to have an image in your site, the html file tells your browser where that image is stored and where it should be shown, the html file tells your browser that a certain text should be linked to another file and where that other file is stored. The html file contains a textual representation of what the content of your website is and what the elements are. Nothing more. It is therefor up to the browser to interpret that in a meaningful way.

The funny thing ist hat Officially HTML is not intended for layout.  HTML is intended to structure the content of your website in a meaningful way using things like titles paragraphs, bold text, lists, blockquotes, tables, links, etc.

CSS (Cascading Style Sheets)

Designing a layout with colors, background images an text columns is done using CSS. A .css file is just like an .html file: it contains nothing but text with instructions that tell your browser how to represent certain elements in your .html file.  For example:

  • Use an Helvetica font for this text, make it 24 pixels high, line-height is 36 pixels and the color of the text should be white against a black background.
  • All images in a certain section of your site should have a white border of 10 pixels and if the user moves his or her mouse over them, the border should turn black.
  • Use a background image with an arrow on all links.

The important thing to note about both HTML and CSS files is that browsers might interpreted what is written in them in their own way. This is one of the most important thing you have to realize about designing for the web. This means: if you want a certain feature in your layout, it might be that it is possible in theory, but in practice it is not possible because one of the browsers does not know how to handle the instructions given to them. You could choose to ignore that browser, of course. But what if 40% of your visitors use that browser?

Another important aspect  is that you can not control what happens on the computer someone uses to visit your website. This point becomes more clear when you observer how some nearly blind people use the web. In every browser they should be able to implement their own style sheets to - for example - read your website with big, bold white text on black background).

Javascript

Javascript can be used to add extras to your website:

  • A slideshow with images that fade away and are replaced with another image
  • A so called lightbox: when you click an image you see a bigger image against a semi transparent background layer placed on top of your design
  • Certain drop-down menu's and tabs

Javascript can add great features to your website. But - again - you can not control what is happening on the computer your visitors use to read your website. It might be that they do not (want to) use javascript. Because of that I support the idea that every design that relies on javascript - for example to create a slick navigation - should also function without javascript, otherwise the people who do not use it are not able to navigate your site. Usually this is not such a big deal, because you do not actually have to create two versions of your website. You only have to make sure there is a fall back plan and that it looks ok.

About AnnoMedia

My name is Jeroen Goulooze, I can help you to present yourself on the internet in a useful way.  If you you need a website, we can get together and discuss what you expect from your internet presence, what the look and feel should be and what functionality would fit your goals. If you think I am the right person to do the job and if I think I am able to fulfill your needs we can work together. We then start out by writing a plan that describes the various aspects of your website and based on that I can create that website for you, but always in close cooperation with you. The end result will be a tailor made website, designed and developed to meet your needs. And as an extra I can also offer you hosting and support so you will have someone by your side that knows your website inside-out for questions and problem solving

I've been working as a freelance web designer since 2005 (most of that time in Berlin where I live), but started out as a web-editor in 1996 when working as a journalist for an online-magazine in the Netherlands and from there I moved into web design. Between that time and now I have had various web-related jobs, among them working as a web editor for the website of a major mobile telco in the Netherlands and working for various (web) design firms in the Netherlands and in Germany.
Because my career started in the days the web was still young I have seen various technologies come and go (Explorer 3 was released the year I started working for the web) and I therefor favor simple solutions and compatibility over the latest technological trends because it will ensure that the visitors of your site have the best experience possible.

My services include:

  • Web-design: in cooperation with my client I create a design and discuss the functionality you want to help you make the right decisions
  • Coding and templating: I convert a design I made or a design you made and into hand coded web ready templates that will be tested in the most used browsers of today
  • Content Management System (CMS): I can also offer you a CMS. A CMS is an online program that lets you manage the content for your website and manage the structure of you website (create new pages and menu items) without needing knowledge of web-design or coding for the web.
  • Services for Designers: If you are a designer I can offer you my advice and give feedback on your designs to tell you if they are web-ready and I can explain the various things you have to pay attention to. I can also explain various options todays browsers offer.

 

Portfolio

Portfolio

Services for Designers

Services for Designers

Art / Alien Saints Project

Under the name AnnoMedia I offer web-design, coding/templating and services for designers. Under the name Alien Saints I offer designs for the people who are interested in something different. Alien-Saints.com is the website where I show my art, but it is also the entry point for those who want something a bit more extreme.

Aliensaints

Alien Saints

Contact / Impressum

My name is Jeroen Goulooze. And I am a freelance webdesigner/coder. I live and work in Berlin, Friedrichshain (Kreutzigerstraße 18 10247 Berlin to be exact). My website is www.AnnoMedia.com.

I can be contacted by phone with the number (++49) (0)15 772 753 760 when you are in Germany. You can also contact me via (++31) (0)6 13 203 439 when you are in the Netherlands, but it can be that I have to call you back when using that number because I do not always have it with me.

You can also contact me by email.

That's me