Responsive Web Sites - Page 2

User 271657 Photo


Ambassador
3,816 posts

I tried something dumb, but it seems to work... I just removed the height/width from the image tag (on a test photo). It still shows at full size on the full screen but shrinks proportionally with the site for smaller screens.
I've got some slideshow gizmos to try out, but that will come later. Got to get the HTML/CSS in order first. :P


Prism, from what little I could grasp... it seems one way to deal with images in responsive sites is to set up an array or database that includes all the sized versions of each image, then there's some sort of PHP script to pull in whichever image is needed.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 104702 Photo


Registered User
293 posts

Jo Ann wrote:
johnvanhulst wrote:
The Nivo Slider is responsive. I use it here: http://trivium-interieur.nl/nieuw/project1popup.html (a 'under construction' site) Click on the popup link and resize it to find out.

This is their website: http://nivo.dev7studios.com/

Success, John


that there is a good example of where "responsive design" is a bit flawed. I'm on a 24 inch monitor and trust me when I tell you that image doesn't look good that huge, it's not that huge of a picture and yet it sizes to my browser window. There are some places where responsive design may not be the best solution :P


I know it doesn't look good on a big screen because, as you said, it's not that huge of a picture. But you can use a huge picture instead. That I don't USE a huge picture has nothing to do with:

a: the Nivo slider being responsive
b: a responsive design in general, being flawed.

Shall I make a demo for you with huge pictures?

Success, John
John van Hulst
User 38401 Photo


Senior Advisor
10,951 posts

If you've got the time to just put one up with a couple pics that would be great John. I'd love to see this in action the other way around :)
User 271657 Photo


Ambassador
3,816 posts

Here's one I'm thinking about using:
http://flexslider.woothemes.com/

The demo starts with a big image, shrink your window and see it go down to phone size.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 38401 Photo


Senior Advisor
10,951 posts

strange that that slider's image is also blown up at least 2 times what the original image is. I would imagine for that one that it's extremely high quality images it's using since the images don't seem to degrade all that much when being blown up that much larger. Interesting concepts with this stuff.
User 271657 Photo


Ambassador
3,816 posts

Just saw this on Smashing Magazine:
http://mobile.smashingmagazine.com/2011 … lexslider/
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 187934 Photo


Senior Advisor
20,266 posts
Online Now

With all this talk of adaptive design, you may just want to hide content from the user.
I used this script to hide a link with the css class link when being viewed by a screen resolution below or equal to 699.

<script type="text/javascript">
$(document).ready(function () {

if (screen.width <= 699) {
$(".link").hide();
}
else {

$(".link").show();
}

});
</script>





<a class="link" href="mypagename.html">Can you see me</a>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 271657 Photo


Ambassador
3,816 posts

That seems to be the big complaint against adaptive design – many users want to have access to all the content – to be able to decide for themselves what they want to view/read.
I guess now, more than ever, it's really important to know who your desired market is before jumping into the site design.
IE6 goes away and a whole new can of worms gets opened up :lol: So many devices, so many browsers...
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 187934 Photo


Senior Advisor
20,266 posts
Online Now

I know what you mean. I'm working on my moms site updating 360 virtual tour pages and it looked great on my iPhone and all the scripts behaved just like I wanted but then I got on her Android powered phone and holy %$#@. The problem was the generic browser they were using that came on the phone. It's so generic I never did find a name for it in the app itself.:lol: I set her up with Firefox and all was well.:cool:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 464893 Photo


Ambassador
1,611 posts

I did some checking and even the Javascript screen size check can come up with a different reading on Androids. I do not usually like Apple computers but hate to admit they got it right with their phones, Ipods and Ipad's.
The Guy from OZ



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.