Jump to content

Adding a gallery to a mobile-friendly site


Bert Coules

Recommended Posts

What is the general view on adding a gallery to a mobile-friendly site? Obviously it would be sensible to make the image file sizes as small as possible consistent with quality, but beyond that, is there any agreement as to the best method of presenting a series of images? Presumably the simplest way is just to be low-tech and stack pictures one above another in a long single-column page, with captions beneath each image, but are there better approaches which perhaps don't put too much strain on a mobile connection? Many thanks.

Edited by Bert Coules
Link to comment
Share on other sites

Are you familiar witth "responsive" design with CSS? It's not very hard if you're familiar with both languages. It goes as follows:

 

@media screen and (insert "max-width:" along with a specific width here) and (insert "min-width:" along with a specific width here){...}

 

For example: @media screen and (max-width:767px) and (min-width:480px){..}

 

 

Now let's assume each of your images are normally 500px in width, and 500px in height. And let's also assume the description's font size is exactly 1.0000em (16px). You can now change these sizes any way you want with responsive design. I'll show you how you can change it:

 

@media screen and (max-width:767px) and (min-width:480px){

img.gallery{

width:300px;

height:300px;

}

p.description{

font-size:0.7500em;

}

}

 

 

I hope it helps!

 

ps. if you want to see how it looks in a mobile browser, you can press the "Restore Down" button in the top right corner (right beside the X button), and change your screen's sizes that way. And if you want to see what it looks like in specific devices, here is a link: mattkersley.com/responsive/

Edited by Redredc
Link to comment
Share on other sites

Redredc, thanks for that, especially the width-comparison site. I knew of several others but not that one.

 

I experimentally created a very simple single-column gallery and uploaded it to the test directory where the rest of the site is being developed. On that comparison site it doesn't look bad: I used a standard image width of 640px, and on wider screens the blank space at the right hand side is acceptable, I think, though the longer captions aren't wrapped at the same width but continue across.

 

If you'd like to take a look, the gallery and the rest of the site is now live at http://www.merrisonholmes.com . A mobile or cell phone or a tablet should redirect automatically. To view the mobile site on a larger screen the link is http://www.merrisonholmes.com/mobile .

Edited by Bert Coules
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...