Produktnettsted: Bajt the Site

Bajt the Site


This is a static website. It is based on manual updates and input rather than an underlying business logic with a database providing a dynamic solution. Administrating the site is very depended on a web developer to do even minor changes and additions. A CMS would probably be the most cost efficient.


Changes are made to the final product that differs from the initial sketches. The adjustments are basically due to RWD and are structural alterations in the HTML. However, the sites content and overall look and feel are maintained. I also cut down on the number of pages from 6 to 4.

Tools used


Dreamweaver is used for assembling the sites bits and pieces, setting up the HTML structure, writing CSS styles, scripting Javascript, and uploading it to the server. Dreamweaver is a great choice when building up a site from scratch, and also when building a site in an existing CMS environment like WordPress.


Photoshop is used as an important part of the workflow. For creating the design and also breaking apart files into assets.


Vector graphics was needed for making smooth details especially with the paint drips that need nice curves.


The workflow is looping between these tools constantly after the initial planning and design phase is settled. Naturally, Dw was used the most. I also needed to learn more about Dw than the other apps as well.


File structure


File structure is set up in Dreamweaver and transferred to the server.

HTML files are located at the root while fonts, stylesheets, JavaScripts and graphics are put into each separate folders.

Fonts: A font called Philly Sans is imported using the style property @font-face and exists in three versions to support different browsers.

Assets: All the graphics. Images are in two formats: Jpg for backgrounds. The backgrounds are large in dimensions and they pack better in jpg than png. Png are used where transparency and smooth anti-aliasing (no jagged edges) is required.

CSS: This folder stores two stylesheets. Both are included in the “Fluid template” in Dreamweaver. The main.css is the one that’s customized further for this site.

JS: All the minified javascript of the jQuery library. The bajt.js is written specifically for this site.




The site is mostly build up by block-tags, DIVs, each with their unique ID. Several LINK and SCRIPT-tags are used in the HEAD-element to include resources from elsewhere in the file structure. For instance, javascripts and CSS are imported into the HTML-file’s namespace. Also, fonts from Google are downloaded using the same principle.




Stylesheets include breakpoints for responsive web design. Properties inside each breakpoint-statement are written specifically for a viewport of a certain size.



Customized jQuery statements were written. Calls are made when the window is resized or links are clicked. In the example below, we see a small script getting two files from the root, and includes them into the source at a specific location when the page is loaded.


Responsive web design

Break points

A lot of screens and resolutions exists today and it is not possible to make a design for each and everyone. Bajt has 3 breakpoints and a default style. The breakpoints either inherit from the default properties or included with new values. Bajt is heavily dependent on graphics but scales well when resized.

Please watch a hilarious demonstration on how Bajts various breakpoints behave on a tablet:

Well, that concludes this project.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Create a free website or blog at

Up ↑

%d bloggers like this: