Web Development Examples by Andria Bird

Image Galleries

High resolution images are a must have for any modern website and there are ways to optimize your images so that you don’t have issues with images loading slowly. If a user has to wait for more than a few seconds for content on your site to load, they are likely to have a poor experience overall. There are a couple of websites that offer image optimization: TinyPNG and Optimizilla. Both of these support both png and jpg formats. When using these tools, the file size reduction factor is anywhere from 47-63% of the original image size. TinyPNG even offers it’s users a Wordpress plugin. Corey Hammond from A2 Hosting says, “Optimizing your images is one of the simplest methods you can use to lower your website’s loading times. It doesn’t even require that much work on your part, besides picking a tool to help you, and uploading the images once you’re done. (Hammond)”

Breakfast
Breakfast
Lunch
Lunch
Dinner
Dinner

When faced with the decision of which site to choose when incorporating responsive html galleries to your website, I’ve found that the following seem to be most top rated: Flexslider and various jQuery Mobile gallery plugins. Flexslider offers simple, semantic markup that is supported in all major browsers. It has horizontal/vertical slide and fade animations and is compatible with the latest version of jQuery. JQuery Mobile is a cross platform framework that enhances the development of mobile web applications. It integrates HTML5, CSS3, jQuery and jQuery UI into one framework that is maintainable and easy to organize.

Instead of writing one application for each mobile device or OS, jQuery mobile solves the problem by using HTML, CSS and JavaScript, which are standard for all mobile web browsers. JQuery image sliders offer a wide range of effects including full width, simple fade, simple layer, banner slider and carousel slider to name a few. The jQuery Foundation states that “ jQuery image sliders allow you to easily create powerful sliders with animated text using HTML standard tags, making the sliders very easy to setup and maintain. (The jQuery Foundation)”