Final Website Changes and Review

After posting the site live I went to Facebook to promote my page. I was declined posting due to using a non approved Facebook logo. After some research I found the required logo for the background I had already designed. Since I could only use a white facebook logo it changed the feel of the site and as a result I ended up eliminating all the blue text. It's not exactly what I was after but it's not bad and does create a more balanced feel overall. I was also able to display my logo on the browser window tabs by adding this bit of script before the end of the header info tag:

The site has been tested on 4G and 3G phones, 12MB and 40MB internet speeds. I also tested the site on Firefox, Safari, and Chrome. I tend to overlook Internet Explorer now as many sites have issues with IE and the browser soon be discontinued and will be replaced by Microsoft's Spartan. Testing for that browser will be interesting...

Seven Pages Down!

I went with a minor change in the color scheme. While I am not a fan of white type on a black background I do favor the use of gray colors on a black background. It seems less striking on the page and easier on the eye. Ultimately, overall I will need to adjust the layout so the site always appears centered in the browser window. I went with a fairly large layout that will need to be adjusted with media queries to fit on iPad screen size on down to smaller tablets and then a completely different layout for cell phones.

For this page the layout remains the same with slight text color changes. I did start this animation with a full set of images to start. The cycling text will need to be adjusted in timing to give the reader a better chance to finish before the next one starts.

For this page the layout changed in the first third replacing the animated bar of images to three images that appear, one after the other, and stop the animation. I was also able to create the animated "open gallery" button.

This page follows the new layout scheme for the upper third of the page. So far all images in the galleries have been tested and are in working order on all pages done to this point.

Again, this page follows the new layout for the Featured Clients pages.

This page was a new design incorporating one of my personal pieces. This one was the best for the eye contrast to the type. In researching for a better way to save space on the page I incorporated the use of Spry Collapsable Panels. I was able to adjust for a default open on the first item with the rest closed. I am still searching for the code that will close the previous panel when a new one is opened. I chose this new color for the body copy and plan to incorporate the color on text in all pages with a more subtle approach.

This page follows the layout of the previous page. The light blue color will be added to the existing copy (most likely just the address and phone numbers). Additionally, I will make the animated image bar at the top start with a full set and make this change to the previous page as well. Another slight adjustment will be the alignment of the text and images on the right site throughout all pages.

All pages can be viewed at www.designsource-bfg.com/redesign

First page done and tested!

Type and Responsive Design

Well, I have been taking the new approach to Web Design in regards to responsive design. Unfortunately this approach has been riddled with problems. Having a fluid layout became quite problematic with type styling (or rather how to make divs respond to layouts with type in them). In my previous design I created a static website and when viewed through Screenfly it fits within layouts nicely even if having to scroll around the browser vertically. Nothing to bothersome and the layout holds until the smaller screens with approximately 950 horizontal.

The new design has issues so far throughout most layouts when viewed in Screenfly. After scratching my head for several days on how to work with these new "limitations" I am convinced that the best way is to design with a mostly fixed and static design and create a separate layout designed with CSS and media queries. So I will begin the process of rebuilding the rebuilt website in such a manner.

I invite you to try these two separate urls at http://quirktools.com/screenfly/

www.designsource-bfg.com and www.designsource-bfg.com/redesign/new.html

This being said, I was able to resolve the issue with the jQuery Cycle with the responsive layout. Seemed I needed to simplify my code slightly and was able to get that to work across all browsers so I got that going for me...