High-end wedding album design software in the Cloud - thanks to CSS3 & HTML5.

Posted on November 02, 2013 by Sweet Memory Albums

When we started our premium flush-mount wedding album web-to print business in 2008, it became quickly apparent that a lot of potential customers wanted to create their own wedding album design. Looking at all the fotobook web-to-print websites that have popped up over the last couple of years, one would think that this is hardly surprising, but keeping in mind that our albums are high-end and cost 300 USD and more, we were indeed a little bit surprised. Nevertheless, we investigated the possibility to purchase a design software from a third party and it turned out that while the quality of most programs was low, the license costs involved figures well in the 5 digit area. That's why we decided to develop our own software - and we wanted it to be web-based!

A glance at our visitor browser statistic (see below) revealed that we had a relatively even spread of Safari, Internet Explorer, Chrome and Firefox users on our website and therefore had to come up with a solution that would work flawlessly and in the same manner across all of these browsers.

html5 wedding album designer

Furthermore, at the time we were using Lumapix Fotofusion to design our albums - an offline software - and wanted our online software to offer at least the same functionality. Since this included a lot of processor-intensive rendering operations, e.g. image rotation, shadow-blurring and color transitions, the big and daunting question was: is it possible to create a cross-browser-capable online software that facilitates the creation of professional wedding album designs suitable for premium photo albums?

CSS3 & HTML5 to the rescue..

Just two years ago the answer to this question would have been a resounding "No!" - but thanks to the arrival and ever-improving browser support of HTML5 & CSS3 some of the most difficult to realize functionalities became readily available in a cross-browser manner. Those include:

1. Drop-shadows & vignette effects

Applying a drop-shadow to a photo is one of the first features an album designer will ask for. While browser support for shadows in combination with blurring has been around for some time, it was implemented inconsistently across different browsers. Thankfully, the new box-shadow attribute provided a uniform way form implementing shadows:

Code example:

box-shadow: 10px 10px 5px #fff;

And this is how it looks in our online software:

html5 wedding album designer 2
Online shadow functionality

The box-shadow attribute in combination with the inset setting also provides for the rendering of vignette effects. Vignette effects open up interesting design options and with a bit of JavaScript trickery can be applied only to one or two sides of a photo, thus making smooth transitions between photos and the background possible.

Code example:

box-shadow: inset 0.3em 0.3em 0.9em black;

And this is how it looks in our online software:

html5 wedding album designer 3
Online vignette functionality

2. Rotating photos

Any album designer will want to rotate the odd photo in order to spice up the design or to flip a photo that was taken with the camera held the wrong way. Thanks to the transform attribute this has become reasonably strait forward.

Code example:

transform:rotate(7deg);

And this is how it looks in our online software:

html5 wedding album designer 4
Online rotation functionality

Just one word of warning: during the development of our software, rotation turned out to be quite difficult to implement in combination with other functionalities, i.e. photo clipping - for example, if you flip a photo by 180 degrees, you will have to make the clipping functions aware of the angle to prevent it from "inverseing". This is when we had to add a lot of basic geometry calculations to many parts of the JavaScript code.

3. Photo- or background opacity

Like drop-shadows, opacity has been around for a while in some browsers, but with CSS3 it is finally supported in a uniform cross-browser manner.

Code example:

opacity:0.5;

And this is how it locks in our software:

html5 wedding album designer 5
Online opacity functionality

4. Scaling css-sprites

Using CSS sprites has become common-place to reduce server requests and of course, our software uses them intensively to display GUI-icons. Initially, we ran into a problem when we wanted to adapt the size of photo-specific icons to the size of the photo they belonged to - in other words, small photos where supposed to have small icons. Before CSS3 we would have had to resort to using standard images instead of sprites, which would have slowed down the software. Thanks to CSS3, we were able to scale the sprites themselves via the newly introduced background-size attribute.

Code example:

background-size: 232px 24px

And this is how it locks in our software:

html5 wedding album designer 6
Scaled down css sprites

5. Multiple file selection in file browsing dialog

Uploading multiple files used to be a nuisance before HTML5, since you were not able to select more than one file at a time. This is why Adobe Flash was usually used for the job. With HTML5 came the multiple attribute, which enabled multiple file also for non-flash uploaders.

<inputátype="file"áname="myfiles"ámultiple="multiple"/>

To be honest, not everything is HTML5..

To be fair, most of our online design software was written in plain old JavaScript with a lot of jQuery. What's more, the core logic of the most intelligent functionalities, e.g. the automatic photo distribution, lives on the server and transfers its results to the frontend via JSON. Naturally, the rendering of the final printing files is also done on the server. And of course, there is a MySQL database to persist album data. So, not everything in our software is CSS3 & HTML5, but without it the software would have been worth only half as much.

Finally, to answer our own question..

To answer our own questions from earlier: yes, it is possible to create a professional wedding album design software that runs in all browsers. We warmly invite you to see for yourself:

Our online software has been live for more than a year now and people are using it successfully every day - as we can tell from the great designs they create. Half a year ago, we even switched our own graphic artists to the online software. Since we have added some functionality like automatic DPI calculation or automatic photo distribution, Fotofusion can't compete any more.

Aside from having achieved our high goal of creating a online software that makes equally if not better designs than the old offline software, our customers are now benefiting from some features that only an online software can provide:

  • Nobody has to download an installation program to their computer - everybody can start designing right away.
  • Our customers have an online help tool at their disposal that allows them to so send us their questions - our answers are displayed within the same tool.
  • Finished designs can be easily shown to family & friends online with a non-editable animated album previewer.
html5 wedding album designer 7
(c) 2008-2013 sweetmemoryalbums.com