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...