Bert Coules Posted March 2, 2015 Share Posted March 2, 2015 (edited) 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 March 2, 2015 by Bert Coules Link to comment Share on other sites More sharing options...
Redredc Posted March 3, 2015 Share Posted March 3, 2015 (edited) 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 March 3, 2015 by Redredc Link to comment Share on other sites More sharing options...
Bert Coules Posted March 3, 2015 Author Share Posted March 3, 2015 (edited) 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 March 4, 2015 by Bert Coules Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now