Focussion, the photography community!

Aljan Scholtens — Fri, 11 Jun 2010 13:30:46 +0000

Focussion is your new website for all your photographic expressions, creations and needs! Share your best photos, receive feedback and improve.

Give other photographers feedback. Everytime you give feedback you’ll get credits. With credits you can post your new photos to Focussion. Focussion is the start of becoming a better photographer!

I’ve worked on this website for a few months, it was a challenge to keep it real simple and easy to use. There are a lot of photography websites that have loads of features. It’s hardly about the photos anymore. So we decided to keep it real simple and let the photos do the work. I’ve had a pencil in my hand for several weeks, but I think there is a great new photography website on the market with a focus to become better as a photographer.

Visit www.focussion.com

Before you start slicing

Aljan Scholtens — Fri, 20 Nov 2009 09:25:50 +0000

In the past few years I experienced the problem that I had to reinvent the wheel on every website. This post will help you starting to slice your website design in a consistent way and use it again on future projects.

To start, I have a basic folder for slicing a website. So every time I am going to slice a new design I just copy this folder, rename it and start immediately. Occasionally I adjust this folder because of new techniques and stuff. This is important, because using for example outdated JS files can be very frustrating for you or the programmer on the project. I am not teaching HTML and CSS here, I expect you to know basic HTML and CSS!

Folders

First, lets create some folders to organize all the assets. It is very important to put the same extensions in the same folder. For instance, put all your CSS files in a folder called “css”. This is the folder structure that I use for my projects:

css, for all your CSS files;
img, includes all imageworks for you design like backgrounds, icons etc.;
inc, extra HTML files for inclusion are located in this folder;
js, javascript files;
media, this is for photos en videos in the content;
swf, and if you use flash files, put them in here.

Be consistent. Do not capatilize the folders, this could give you problems in programming. You can adjust your folders to whatever you like, but create a structure that makes sense. Get rid of folders you don’t use. No flash means no “swf” folder.

The folders that I use most as a front-end developer are “css” and “img”, but I think that will be the same for you. If you are a programmer you might want to add a folder like “functions” or something similar.

The basic HTML

Secondly, HTML files in different projects have a lot in common. Why not make a standard template for these files as well? The first HTML file is index.html, on most servers it will be loaded as the default page. Put a doctype at the top of this HTML document, so the webserver will handle your html on every project the same.

The head contains the title, meta tags and links to the stylesheets. I’m requesting two stylesheets, one for the screen and one for printing. After the stylesheets I include the javascript files. All the programmers I work with are using jQuery and for IE6 I’m using a very nice PNG Fix, DD_BelatedPNG.js.





	Website Title

If you can’t get your website to work good enough in Internet Explorer, create a seperate stylesheet for it. This line will only be used on versions of Internet Explorer lower than version 7:

In my standard HTML document template I already stated the most common HTML elements. There is almost always a header, navigation or a place for content. If not, simply remove them. When I close an element I comment it to know which one is closed. When you are working with big HTML files you can get confused about when closing which element.

Also try to prepare for HTML5, I gave my elements classes like header and nav. In HTML5 the

will be replaced by

and

will be simply



  

    
      Header
    


    
      Navigation
    


    
      Section
      
        Article
      

    


    
      Aside
    


    
      Footer

Seperate your CSS

I am using a CSS framework, called Blueprint, for my grid and stylesheets. With Blueprint you work faster and it prevents you from reinventing the same code over and over again.

In the I call out master.css, in this CSS file I am importing several other CSS files:

reset, to set all the browsers (especially Internet Explorer) to one consistent standard;
layout, includes the basic interface elements and where they are positioned;
elements, all other elements like hyperlinks, headers, lists, tables etc;
colors, if you want to change colors sometimes, set your colors apart (I don’t use it often);
forms, for all forms and buttons.

Imagine that you only use one stylesheet on a large website project. I would really lose my focus. With multiple stylesheets I know exactly where to find the tag where I am looking for. This advantage is not only for you, but as well for others who are working on the same project as you do.

Helpful resources

I hope this post can help you to organize your design process, you can download my folder structure and the basic files to start make a start.

Hello there, I'm Aljan Scholtens » Design

Focussion, the photography community!

Before you start slicing

Folders

The basic HTML