Storysmith ®
The kind of stories Susan tells or teaches you to tell - depends on where you want to go. Most of her performance and teaching work delves into the overlapping worlds of living history, writing, storytelling, and public speaking. For over two decades Storysmith® Susan Marie Frontczak has brought literature to life, created stories from thin air, and honed personal experience into tales worth telling again and again. She plays in theatres, corporations, schools, libraries, and festivals nationwide.
01. Approach
This project ended up being 18 months long the develpment was onerous and extremely detailed. This was a professionally designed project by Dallenbach Designs it was beautifully crafted, unique and very clean. The concept was simple and that was to take the design concept and devlop the site in that image. The challenge was the design in a PDF doesn't always remain the same in responsive design on different sized screens. Another challenge was the volume of colors and changes necessary for each living history section which essentially became a separate mini-website for each character.
02. Design
The logo was already done and the color palette for the main pages were already chosen. The colors and variations for the 6 lady pages was a challenge and varied widely. The font choice for the main pages was Gotham and Futura Book for the main website. Different fonts were utilized on the 6 lady pages as well. The entire design was done by Dallenbach designs so I was just tasked with creating the pages and responsiveness.
#11515b
#bdb9a6
#ffffff
Gotham
Futura Book
03. Technology
The Storysmith project is a totally responsive design based on CSS Grid Layout with a Flexbox fallback. That means the project is not reliant on an outside library of code to be fully responsive. The starting point was HTML5 Boilerplate to make sure the project was utilizing current best practices and most browser based styling was reset using Normalize.css. We don't utilize templates so all coding was done by hand using the Brackets code editor. Susan and her team is also able to add blog articles, maintain the verbiage and images on the site by utlizing Perch as the content management system. Every page in the project was validated and confirmed to be W3C compliant with the exception of image lazy loading and Cloudlfare Rocket Loader for speeding up load times. All css files are modular in nature so Gulp was used to combine and condense all CSS files in the final project build in order to make the page load speed better. The final page load speed is a ridiculously fast 1 - 1.2 seconds seconds per page and a page speed indes ranking in the top 10% of all websites on the Interwebz. CSS and javascript animation was created by using the following libraries Animate.css, Hover.css, & T-scroll. Other code and libraries used include Modernizr, jQuery, Akismet, Cloudflare CDN, Vanilla Lazy Load and Google Analytics. Software utilized to create this project included Brackets, Photoshop, Perch CMS, VectorMagic.com and CompressPNG.com.
The coding and software skills used by Colorado SEO Design to make this project take off included:
- Photoshop
- PHP
- HTML5
- CSS3
- Javascript
- JSON
