More and more, people are browsing the web through their iPad, iPhone, Kindle, Android phone, or other mobile device. As a result, it is becoming increasingly important to make our websites not only work for desktop readers, but also for a variety of mobile devices; with a variety of screen sizes.
This is also known as responsive web design.
In addition to making our site layout flexibly change based on screen size, we also want to make our galleries and images change in a similar way.
There are two general approaches for dealing with mobile responsive galleries and images.
- Client-side approach – We set the width of images to 100% in our stylesheets, and let the client browser deal with resizing the images as necessary.
- Server-side approach – We let the server determine image size, and send over the appropriate images, with the appropriate dimensions.
The client-side approach is the one most commonly used today.
Client-Side Responsive Galleries & Images
The client side approach is simple, and works purely through the use of stylesheets. This provides a very general solution, which flexibly resizes images not just based on device width, but also based on browser width. In this way, it is consistent with text and layout changes, thus providing a seamless look.
However, there are several issues with the client-side approach –
1. Large images
The server sends the same images to all devices. Therefore, we end up transferring larger images, that are designed for a full-width desktop, even to much smaller mobile devices. This increases page load time.
2. Requires dynamic galleries
While images can be easily resized, it is more complex to dynamically resize a gallery. Many galleries work by stitching all of its images together in a long strip, much like a strip of film. When we scroll through the gallery, we move the strip of images forward and back. For this to work, we need a fixed gallery size at the outset. Changing the size of the gallery would require regenerating the entire image strip.
Other galleries operate based on background images. In this case the images will either be cropped when the gallery is resized, or the client will need to create a temporary resized image. This will place extra load on the client device.
This is not to say that all galleries require a fixed width at the outset. Some galleries can dynamically resize based on browser width, but in those cases, extra checks have be made to determine the gallery size during interaction. This will also require additional client resources.
3. Increased client-side load
While we can be sure of our server-side resources, client-side resources are less predictable. In the case of mobile devices, processing power and bandwidth may be much more limited. Placing most of the load on the client device, may cause gallery operations to become choppy, when there is too much going on.
Server-Side Responsive Galleries & Images
The client-side approach uses very loosely styled images and galleries. In contrast, the server-side solution sends a strongly-styled set of images to the target device. Size and layout are mostly determined by the server, and the client simply needs to show the gallery or image according to server specification.
In the server-side approach, we query the client device for its screen width during page generation. Galleries and images are sized according to device screen width, which means that any changes in browser size will have no effect.
Consider, however, that most mobile devices are used in full-sized mode, i.e., the size of the browser is equal to the size of the device. As a result, dynamic re-sizing of images or galleries may not be a crucial mobile user function. Modern mobile devices do allow for simple zooming operations, that will also work on our server-based galleries and images.
In addition, there are many advantages to a server-side solution –
- We are able to send over images that are pre-sized based on the device width. This saves on bandwidth and can provide a significant improvement on page load time.
- Most galleries will work with a server-side solution.
- Much less load is placed on the client device and more load is placed on the server. This is an advantage because server resources are much more predictable and also under our control.
The Shiba Gallery Plugin allows for *both* server and client-side responsiveness. Server responsiveness is set blog-wide, while client responsiveness can be set on a gallery by gallery basis.
There are two main methods for obtaining device width –
- User agent sniffing – This solution is based on having lists of user devices. During a page request, we sniff for the user device and generate our galleries accordingly. However, new devices get added, old devices get modified, and we may not always have a given user device on our list. As such, this method is not very flexible and may not degrade gracefully.
- Cookies – We query for the device width using javascript, and pass that back to the server using cookies. This is a better and more flexible solution, but it requires both javascript and cookies to be enabled on the client-side.
The Shiba Gallery Plugin uses cookies. Javascript and cookies need to be enabled for the server mobile responsive operations to work.
Example gallery that is rendered using the Shiba Gallery Plugin
Hybrid Solution
The Filament Group is experimenting with a hybrid solution that targets some of the weaknesses inherent in the client-side approach; particularly in serving up appropriately sized images.
This space is still changing and developing, so please let me know if you come across any other web responsive gallery and image solutions.
Related Articles
How to Make Poll Daddy Objects Mobile Responsive
Currently, the standard Poll Daddy objects that I use are fixed width and not mobile responsive. Here are some simple CSS styles that I use to make Poll Daddy objects responsive to small devices. 1. Scale poll object to fit the screen. The first step is to add some styles to scale my Poll Daddy objects so that they expand to fit the screen. I do this when the browser width hits 400 pixels. Note that pds-box and pds-input-label have fixed widths assigned by default, so we need to override [...]
How to Create Dynamic User Agent Groups in w3tc
Currently, in the w3tc plugin, we can create user agent groups by specifying agent names, e.g. android or iphone. By using this function, we can create different caches for different sets of devices. On my blogs, I need to create different caches based on screen width. This is because I serve up different widgets, ads, images, and galleries, based on device screen width. For a site to be truly responsive, we want to alter not just the layout of the site, but also some of its content (i.e. page [...]
Shiba Gallery 4.3
This is a very big update, so please try things out on a test site first. Feel free to post bug reports here or in the main Shiba Gallery article. New features for Shiba Gallery 4.3 – 1. Client Responsive Galleries The biggest addition to this release is client responsive galleries. In release 4.0 we added server responsiveness which makes sure that the server sends the right sized images based on device width. In particular, we do not want to send a large desktop image to a smaller [...]
Leave a Reply