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

Previous Website Modifications

Initial design for web pages designed with Photoshop

Below is a series of jpgs that will be the basis for my site. This will be the start of the base pages. I will still be using the script to make the text cycle and the images rotate. For the portfolio pages I will have simple animations on the circuit board layout. I am still devising a better layout scheme for the individual portfolio pages but I am well on my way.  I plan to build the site from scratch to eliminate the junk code (I have been building on the same layout for over two years and there is a substantial amount of junk code).

Opening up the width of the page will allow for more visual content. The animation for the image bar at the top and the cycling text for the recommendations will remain the same with adjustment for timing in the sequence displayed.

The portfolio sections will have a more modern approach to the navigation with small animations of the circles appearing at different timed intervals and roll over colors will be added as well.

In keeping with the overall design the Featured Client section will be changed with the logos being the navigation just a bit larger.

The individual pages of the Featured Client sections will be adjusted to the new look with an animated gallery button similar to the Portfolio sections giving more prominence to the photo gallery attached.