Dripbook releases five new responsive HTML5 website designs - Left Slider, Left Thumbnails, FilmGrid Filmstrip, Style Tile, and Simple Thumbnails.
Posted on 7th May 2013 by Alex Wright

As many of you know, we've been on a bit of a tear lately developing and releasing responsive HTML5 designs for exported websites. These new designs utilize the most modern web technology and are optimized for display on iPhones and Android phones, tablets like the iPad, desktop computers, and even large monitors. As with all exported displays, these new websites automatically synchronize themselves with your Dripbook account.

Dripbook releases more responsive HTML5 website designs.

Back in December of 2012, we released our first two designs for exported websites using responsive HTML5 technology . Then in February of this year, we released three more responsive HTML5 designs. And today, we're happy to double the number of responsive HTML5 designs we offer by releasing five more.

If you've been thinking of upgrading an older design, now is a great time. You can change the design of your exported website anytime, and these new designs are easy to use. And if you have any questions, you can always get in touch with us to get help.

These new designs offer the following features :

• All HTML5 - no Flash, no plugins needed
• Full bleed Splash images plus large display for images and video
• Disabled righ-click for viewer to save or copy images
• Responsive design means the website shrinks to fit on iPads and iPhones, expands to fit large monitors
• Responsive design means navigation automatically adapts to work on iPhones and Android phones
• No mobile re-directs - all links work on all devices
• Deep linking of URL web address - send links to individual genres or portfolios
• Sharing enabled for individual images on individual portfolios - share to Facebook, Twitter, Pinterest, Tumblr, Linkedin + Email
• Track individual views in real time with Google Analytics
• Use a custom logo with transparent background to display over images
• Use custom Google fonts
• Use the computer's keyboard arrows to advance images (for designs like the Left Thumbnails where images can progress next and back)

Let's get on to the fun part - what do these new designs look like?

The Left Slider (HTML5) design :

Responsive HTML5 design optimized for desktop, tablet and mobile. Navigation is a column to the left. Portfolio images are presented as a slider.

For an example of the Left Slider (HTML5) design,
see Sivan Miller Photography :

Sivan Miller Photography

The Left Thumbnails (HTML5) design :

Responsive HTML5 design optimized for desktop, tablet and mobile. Navigation is a column to the left. Portfolio images are presented above a strip of thumbnails.

For an example of the Left Thumbnails (HTML5) design,
see Alex Wright Photographs + Motion :

Alex Wright Photographs + Motion.

The FilmGrid Filmstrip (HTML5) design :

Responsive HTML5 design optimized for desktop, tablet and mobile. Genres open to a full page presented with all the portfolios "open" showing a wide range of work right away. Portfolio images are presented as a filmstrip. Clicking an image from the small thumbnails on the FilmGrid takes the viewer directly to that image in the portfolio.

For an example of the FilmGrid Filmstrip (HTML5) design,
see Lucy Quintanilla | Art Director :

Lucy Quintanilla | Art Director

The Style Tile (HTML5) design :

Responsive HTML5 design optimized for desktop, tablet and mobile. A modern design with portfolios presented as uncropped images arranged in vertical columns. Main images are presented with next + back selections.

For an example of the Style Tile (HTML5) design,
see Owen Photo :

Owen Photo

The Simple Thumbnails (HTML5) design :

Responsive HTML5 design optimized for desktop, tablet and mobile. Portfolios are presented as a simple list. Portfolio images are presented above a strip of thumbnails.

For an example of the Style Tile (HTML5) design,
see Allison Michael Orenstein Photography :

Allison Michael Orenstein Photography

Looking for even more examples? Here's examples of all of Dripbook's website designs.

These new responsive HTML5 designs are built for modern browsers, so they won't work in older browsers like Internet Explorer 8. You are welcome to continue using the previous Flash designs - it's up to you.

Now let's get on to the funner part - how do you use these new designs?

Head to QuickNav > Export > Exported Websites, choose one of the designs, configure it, and export your new design to your web host.

Here are some important details when thinking about using the new designs:

• We highly recommend creating and uploading a custom logo with a transparent background. Check this FAQ with detailed instructions.

• Dripbook's new designs operate best with larger images. We are now asking that you upload images at least 2,000px high. Smaller images will work but may not look as good.

• Dripbook's new designs work best with high definition video - We are continuing to ask that you upload video at 720p or 1080p.

• Dripbook's new designs use larger Splash images and work ideally with Splash page images of a horizontal aspect ratio. We suggest that you upload Splash images from 3,500px wide by 2,000 px high to 3,000px wide by 2,000 px high. You are free to try any sizes you'd like.

Let us know if you have any questions.

Comments

av
From: Jonatan Gretarsson , May 10th, 2013 : 12:27a.m. UTC
Just wanted to say thank you for great new looks and for being constantly working on making your design better!
av
From: helene loussier , May 10th, 2013 : 03:54p.m. UTC
WAOU ! ! ! ! THIS IS G R E A T ! ! ! Thanks you ! Helene