Shiba

Adventures in WordPress

  • — Home —
  • Dog
  • Art
  • Contact
  • WordPress Articles
    • WP Plugins
    • WP Programming
    • WP Admin Panels
    • WP Theme Design
    • WP How-To
    • WP Theme Images
You are here: Home / WordPress Design / Mobile Responsive Galleries and Images

Mobile Responsive Galleries and Images

Tweet

by ShibaShake Leave a Comment

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.

  1. 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.
  2. 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.

Mobile Responsive Galleries and Images
Mobile Responsive Galleries and Images

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.

The client side approach is simple, and works purely through the use of stylesheets.
The client side approach is simple, and works purely through the use of stylesheets.

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.

There are several issues with the client-side approach, including longer page load time, more limited galleries, and extra load on the client device.
There are several issues with the client-side approach, including longer page load time, more limited galleries, and extra load on the client device.

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.


Masquerade_Image2

Masquerade_Image1

Masquerade_Image5


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 Cancel reply

Your email address will not be published.

Recent Posts

  • Screen-shot of mobile responsive Poll Daddy object, where text floats properly to the right of radio buttons.How to Make Poll Daddy Objects Mobile Responsive
  • Screen-shot of blog post with no page border (flowing design).Genesis Skins 1.5
  • Screen-shot of the media manager Create-Gallery screen, while doing a post search.Shiba Media Library 3.7
  • Screenshot of the Edit Gallery screen after we hit the Create Gallery button.How to Expand the WordPress Media Manager Interface
  • Blonde girl looking through and holding a circular picture frame.Shiba Gallery 4.3
  • Close-up of beautiful blonde holding a square picture frame.Google Authorship - Good or Bad for Search Traffic?
  • Shiba Widgets 2.0
  • Media Temple screenshot of editing my sub-domain DNS entry.Using CDN Cnames with w3tc and MultiSite
  • Shiba Skins WordPress ThemeShiba Skins WordPress Theme
  • How to add the Media Manager Menu to the Theme Preview InterfaceHow to Add the Media Manager Menu to the Theme Preview Interface

Recent Comments

  • WordPress Search Widget – How to Style It (56)
    • Nelson
      - Tanks master - Fine
    • TelFiRE
      - How do you style the "X" that shows up when you start typing?
  • Update custom inputs with the proper data using Javascript.Expand the WordPress Quick Edit Menu (58)
    • Mike G
      - This is exactly what is happening to me. It is updating the value in the database and in the column, but I have to refresh ...
    • PhoenixJP
      - Thanks for this tutorial. Does someone knows if this still work with wordpress 5.03 and 5.1.
    • Francine Carrel
      - This is a very long time away from your original comment, but did you ever work it out? I am stuck on the exact same thing ...
  • Custom meta-box with a set of radio-buttons.Add a Metabox to Your Custom Post Type Screen (27)
    • mike
      - Hi Shiba am a newbie to wordpress, I just installed a plugin with a custom post type, but has no option for discussion and ...
  • Write a Plugin for WordPress Multi-Site (45)
    • Andrew
      - Hi,action 'wpmu_new_blog' has been deprecated. Use ‘wp_insert_site’ instead.
  • Populate our Edit Gallery menu using a gallery shortcode.How to Add the WordPress 3.5 Media Manager Interface – Part 2 (29)
    • Janine
      - Still relevant in 2019.
  • WordPress Excerpt – How to Style It (36)
    • James
      - Great post. I really need some help. I have set border lines around my excerpts on my blog page/post page. The problem is ...
  • Add Custom Taxonomy Tags to Your WordPress Permalinks (123)
    • Darshan Saroya
      - Update permalinks. Go to settings > permalink and just save it.

Copyright © 2021 · Genesis Skins by ShibaShake · Terms of Service · Privacy Policy ·