---
author:
email: mail@petermolnar.net
image: https://petermolnar.net/favicon.jpg
name: Peter Molnar
url: https://petermolnar.net
copies:
- http://web.archive.org/web/20140720005708/https://petermolnar.eu/linux-tech-coding/use-responsive-layout-for-image-galleries/
lang: en
published: '2014-05-04T11:23:48+00:00'
summary: What is the best approach to show images on smartphones & tablets? To swipe
or not to swipe? How about fluid videos?
tags:
- CSS
title: Optimize your site experience and your image gallery for any device
---
About a month ago I decided to heavily redesign my website. This little
site has been my cutting-edge technologies playground for years but it
was becoming outdated by some many ways.
The base points of the planned design were:
1. Mobile first. Mobile is unquestionably becoming the standard for
content consuming - reading, browsing, looking. Even I find myself
using my smartphone for reading the articles and using the laptop
only for writing or creating content. Therefore the site needs to be
at least as good on mobile, than on desktop, if not better.
2. Responsive images, fluid videos One of the main topics is to show my
photos, I want them to be responsive and give the best experience on
any device.
3. Get rid of round corners, box shadows, double borders, etc, in short
remove unnecessary, outdated design features. I don't think I need
to explain these :)
It's not that hard, is it? YES IT IS.
## The Problem: the image gallery
There are: carousels[^1], lightbox[^2]-(clone[^3]) galleries, fancy over
animated galleries[^4], mobile friendly swipe galleries[^5], the one I
did for myself gallery[^6], the other I borrowed into a WordPress plugin
gallery[^7], the old-but-still-cool gallery[^8], even some 3D, real-life
gallery mimicking ones[^9], and soo many more... How could anyone choose
from these? And which one is giving the best user experience?
### The solution - for now
I don't have The One True Answer, I only have my answer: **for mobile,
go as static as possible.**
Remove the fuss, remove basically everything that could make the visitor
miss an image. Swiping can be buggy, can be counter-intuitive. Full
screen pop-up galleries, slideshows, carousels are all hiding the
overview option and they require the user to rotate through all the
images. They are also without the ability to quickly revisit one. (Why
sliders and carousels are evil?[^10]) and a brief explanation why you
should never use them[^11] ) For mobile, thanks to the mostly vertical
displays, you can simple place the images below each other and have
vertical scrolling.
But the desktop is still a different world. *( I'm not messing with the
touch screen desktops yet, that still needs to evolve and show the
actual usage patterns. )* Desktops have mouse which is a high precision
tool compared to your finger. They are mostly horizontal compared to the
vertical screen ration on the handhelds so if'd I want static images,
I'd need to create horizontal sliding for the same experience making the
landscapes full-screen size, and that is a bad idea[^12]. Sticking to
the original, thumbnails-and-preview layout it is then.
The **desktop** version **can stay fancy**.
Until the actual picture set[^13] tag truly emerges, I need to stick to
CSS3 media query based background changing[^14]. Ugly as hell, but it's
at least scriptable and even saves bandwidth a little.
### How about the videos?
Thankfully this topic is much easier due to the already present
different resolutions on most of the video sites. The List Apart article
Creating Intrinsic Ratios for Video[^15] made a clear point for
presenting fluid videos on a page, and for WordPress, check out
WordPress Canvas - Responsive Videos[^16] and use it without even
touching code.
Of course it might need some hacking and maximum width limiting if you
want to avoid fullscreen videos on desktop, but it's much easier than
with the image galleries.
### The cons?
There are always cons, and in our case, it's the different design. I
used to have customers, where no matter what I said, no matter how I
tried to make them understand, what is screen resolution, or pixel
density, they wanted their websites, galleries and everything look
exactly the same on all device. *( Of course it's not possible. )*
But this is something you need to learn to live with. We're using our
mobile devices very differently than we used our desktops. Even the
social activity shows a crazy difference on behalf of the mobiles. So
let's face it: we need different layout to have the same effect.
### Future issues: the limits of media queries
There is also another problem which we are soon about to face. I'm using
this to add the desktop additions to the LESS stylesheet:
``` {.css}
/* DESKTOP */
@media ( min-width : 960px ) and ( orientation: landscape ) and ( -webkit-max-device-pixel-ratio: 1.5 ),
( min-width : 960px ) and ( orientation: landscape ) and ( max-resolution: 220dpi ),
( min-width : 2400px ) and ( orientation: landscape ) and ( -webkit-max-device-pixel-ratio: 1.9 ),
( min-width : 2400px ) and ( orientation: landscape ) and ( max-resolution: 290dpi ) {
}
```
The first two for traditional desktops, the second pair for retina
desktops. But with 4K, there's more to come, again.
##### Credits
Featured image icon is from Ian Crowter's Responsive Web Design
article.[^17]
[^1]:
[^2]:
[^3]:
[^4]:
[^5]:
[^6]:
[^7]:
[^8]:
[^9]:
[^10]:
[^11]:
[^12]:
[^13]:
[^14]:
[^15]:
[^16]:
[^17]: