Mon, 2015-07-20 15:07
I hand coded the http//www.lifecasting.net web page three years ago. I am in a redesign for responsive adaptability and am wondering if my "gallery" pages for Ann's work (http://lifecasting.net/face_1.html) should continue to be in the table tag? Is this the proper usage of that tag in this instance?
As I live in a remote part of Texas and all I have is dial-up, I want to design this page so that anybody in the world can visit it, including myself. So I am somewhat opposed to j-query and javascript to create a portfolio. So I am most interested in html and css for my code.
Any ideas of where to look at alternatives would be gratefully appreciated.
Mon, 2015-07-20 19:45
#1
Hi Derek, Tables aren't the
Hi Derek,
Tables aren't the best choice for the gallery.
Gary has an example gallery using inline-block that is worth a look:
http://gtwebdev.com/workshop/layout/inline-block-gallery.php
It will be more responsive by default.
You should also look at smoothing out the transition on hover of the images.
Mon, 2015-07-20 23:31
#2
I'd enjoy helping on this
Are there major changes in the content planned? If not, the refactoring for a responsive, user-friendly and accessible site should not be all that difficult.
There are some changes I'd recommend, but they're not major; simply there to make the site easier to use.
Let us know what you want to do and when you want to do it.
cheers,
gary
Tue, 2015-07-21 11:29
#3
There are not major changes
There are not major changes to content. I will be updating some of Ann's work and adding newer pieces. The problem I had with inline block, and Gary's work up seems to verify, is that when the images are not the same width / height they flow awkwardly. My choice for the table tag was that I could create a line of images that contained three, or change that to one or two as the design called for. Also, arranging placement with h-spaces and v-spaces.
If I was doing that with in line blocks, wouldn't I have to create a different class for nearly every artwork?
I believe that in the smallest version I will have to change how many images are supported, as it seems that keeping them all would overwhelm the small screen user.
I believe I am eliminating the hover state, as it doesn't make sense on a tablet or phone, although I could target that with an @media tag.
I am starting the research now, and hoping that as fall progresses I will begin the actual coding. Any input is welcome.