Sarah Aires Technology

After we finished designing the Sarah Aires Photography website it was time to take up the challenge of bringing it to life. Not only was it challenging due to the technical aspects of the design, it was challenging to ensure that the beauty of the design was kept through out the site and reflected in the way it interacted with the site’s visitors.

Having discussed and decided what functionality we wanted the site to have we set to work building it, incorporating some of the latest web technologies available to us. The site itself is built around HTML 5 yet remains backwards compatible with older web browsers. We’ve also utilised various features of CSS3 to deliver some of the more advanced styling and transition effects.

Here’s a break down of the technical aspects behind Sarah Aires Photography

• CSS3 transitions have allowed us to add a smooth fade effect when you hover over a link, transitioning between it’s normal colour and it’s hover colour
• CSS3 transforms are used to rotate images throughout the site. The best example of this is the images on the blog board on the home page
• CSS3 multiple backgrounds lets us use multiple background images on a single element reducing the amount of HTML mark-up required and allows us to cater for larger screen sizes
• jQuery Cycle was used to power the interactive elements on the home page including changing the room scene and background image on the home page. It was also used to create the galleries and includes a toggle on the gallery pages to allow you to enable/disable the automatic slide show
• jQuery Easing plugin allowed us to add a smooth scrolling affect when linking to areas on the same page. For example any time you click on “Contact” it smoothly scrolls the page down until it reaches the contact section at the bottom
• CSS Pie allows us to bring CSS3 features such as multiple backgrounds and rounded corners to older browsers that don’t support them. This ensures that we cater for as many browsers as possible. Any features that aren’t supported degrade gracefully on older browsers and don’t affect the usability of the site.

The site was built using WordPress as the CMS (Content Management System). This allowed us to give a great deal of control over the content to Sarah and we made sure that as many of the images and as much of the content was customisable as possible.

We were also able to utilise some of the handy built in WordPress features including image resizing to ensure that images are optimized before being delivered to the site visitors. This keeps the file sizes down and allows the site to be delivered as quickly as possible whilst using the least amount of bandwidth possible.

We’ve also created a mobile landing page for mobile phone users that delivers the key information without loading the full site. This keeps the load time to a minimum for those on slower mobile connections yet still reflects the beauty of the site and what Sarah offers. We’ve included a link to the full site too so mobile users can enjoy the full site experience too.