HD Event Photography
HD Event Photography is a professional photography business located in Longmont, CO. They specialize in weddings, events, portraits, and fine art photography. Their mission is to create timeless, original, and professional photographs that elicits a memorable image of elegance, commitment, and love. HD Event Photography is committed to providing finished, polished, and high quality photographs for your memorable event, while also providing great customer service that is engaged, professional, and creative.
01. Approach
This project had a fairly narrow scope because the logo was alredy finished and the site was focused on making the images stand out. The old website was a custom design but it was created in Wordpress and after a few years a plugin broke the whole site. Ontop of that the site wasn't optimized properly so the page load was very slow. Sergio was really focused on growing his business so we wanted to appeal to both genders but also show users the quality of his work. The owner Sergio is a fantastic photographer so we wanted to make sure that no elements on the site took attention away from his photography. If anything we wanted to make sure we could enhance the images.
02. Design
The color scheme was essentially black and white, but Sergio wanted to have a large amount of white space and he wanted plenty of space between elements. The white and open area on the site gave the user the impression of clean and organized. After some discussion we did give the slight an accent yellow color which added a color pop but wasn't overwhelming or distracting to the user. We used Lato as the font for both the headers and the body. It is an elegant non distracting sans-serif font that has a flair for modern. We used a Flickety scroller to show some of his work on his main pages. The site ranked fairly well so we utilized the same keywords as before but we added areas for JSON-LD and HTML5 elements to give Google a better understanding of the website.
#262626
#e2dd7a
#a7a7a7
#ffffff
Lato
03. Technology
The HD Event Photography 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 like Bootstrap 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 reset.css. We don't utilize templates so all coding was done by hand using the Brackets code editor. Sergio 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 (the only validation problems are related lazy loading and script enhancement for page speed purposes). 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 smokin' fast 1.5 seconds which is pretty amazing considering the size and resolution of the photgraphs used. 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, Instashow, Infinite Grid, Lazy Loading (Verlok) 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
- Schema.org markup
