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.
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 is set up in Dreamweaver and transferred to the server.
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.
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
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.