Bajt the Site

rwd_bajt-screens_indexpage

www.ironnie.graphics/bajt

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.

Refinements

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

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

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

Illustrator

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

spray-dots2

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.

tools

File structure


Hierarchy

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.

file-hierarchy

Code


HTML

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.

html

link-script-tags

CSS

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

breakpoint

JS

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.

jQuery

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: http://www.ironnie.graphics/back-in-da-days-bakery/

Well, that concludes this project.

Advertisements