I have a very simple, though image-intensive website that I’m trying to make more mobile friendly. I plan to eventually redesign it altogether with a “mobile first” approach, but for now I just want it to be usable to most mobile users.
I’ve managed to convert the absolute values to relative values and the changes seem to work OK. I’ve been using Chromium’s emulation tool and Firefox’s Responsive Design Mode to check the results. My first question is “are these tools reliable?” The changes aren’t always reflected the same on both tools.
My second question is "how is text made responsive? Much of the font was specified in percentages to begin with.
I’ve been working off-line on copies of the css and html files, so I don’t have a live site to direct you too, and I don’t see how to attach files. I thought of pasting copies of one page and the css, but all the images would be missing.
Do you mean font size? There are various techniques for that, but one neat trick is to use vh or vw units on your font sizes. Just be careful to check the effects on all screen sizes, because if you aren’t careful, text could be microscopic on small screens, so you’ll need @media to cover various screen sizes.
Aren’t vh, vw and vmin still only minimally supported?
I was hoping to put off queries until the site was fairly responsive on its own, then work queries in for one smaller screen (320 maybe) and possibly one larger. I don’t believe the general public is as lazy as the industry seems to assume, and I do plan to start from scratch in the near future. I just want to avoid loosing traffic in the meantime.
You can always check the caniuse site for questions like that. These units are quite well supported these days, going back a fair way, too: http://caniuse.com/#feat=viewport-units
OK, thanks ralphm. I used vmax in two spots and it helped. I’ve gone live with my changes: www.drumdr.com.
The site is far from perfect but I think mobile users will appreciate the changes - for the most part. I’ve made most of my key images scalable, but still need to work on my thumbnails (thousands). The problem I’m having now is that the image width will respond well to a percentage value but the height will not, and it’s the height that is common to 99% of the thumbnails. Am I correct in supposing this is because I’ve set the parent’s width but not height? It’s the height I want to set. I’d love suggestions.
A minor irritation is the facebook and linkedin buttons. Haven’t been able to figure out how tho make them act right either.
What exactly are you having trouble scaling? You shouldn’t need to manually set the heights. As the width gets smaller for images, the height should scale down appropriately as well.
If you set the with of the image as a percentage then just set its height to auto and it will maintain its aspect ratio. You don’t want to touch the height or the image will get stretched.
Generally though your thumbnails should be in a container which is set to a percentage width and then you just set the image to width:100% and height:auto.
A bigger issue I see is that your left nav is unusable on a mobile and that should be your first priority because no one can use the site at the moment. Big images are not as much an issue as that left nav so get out your media queries and set the left nav to 100% wide at about 600px width because that’s the point where it becomes too small.
Yes, I’ve been thinking I might have to set the height for the parent then adjust it as the page grows/shrinks.
If you look at my key pages (djembe-repair.html, for example) you’ll see that 99% of the thumbnails are of equal height, and I’d like to keep it that way for aesthetics’ sake.
Think about it. Based on height, I would only have to do the math for one image then cut and paste the results for all the others, which is trouble enough since there are thousands. If I go by width I’ll have to do the math for every single one in order for them to match in height.
I’ve been using Chromium’s emulation tool and Firefox’s Responsive Design Mode to check my work, and the site seems quite navigable on viewports as small as 320. This seems like a good time to ask again if these tools are reliable.
No need for al those tools most of the time you can just close your browser window (assuming you have coded the media queries for width and not device width).
As you can see the left nav is almost invisible. The display on an actual iphone is much the same and although you can click the links you have no idea where you are going :).
There’s nothing as good as the real thing apart form the ios simulator on the mac which is 99.9% accurate in nearly all departments. Other tools (unless they are the SDK) are mostly windows sized to fit but chrome tools does go a lot further than that and emulates quite a few things.
However as I said above your best friend is the browser window and just open and close it to see what it will roughly look like on smaller devices. If you are doing basic stuff then that will suffice but obviously the real device is (usually) the only thing that shows up any bugs etc (apart from the ios simulator which is pretty accurate all the time).
Assuming you’ve given them the same class then you could just reduce them with a media query.
@media screen and (max-width:800px){
.leadingPlate{height:100px;width:auto}
}
You won’t be able to scale them properly otherwise because of the lack of structure in the page. It’s always hard to retrofit issue like these so unless you want to code from scratch you just have to to do what’s feasible.
That’s probably the best I can do for now. Not exactly elegant, but I’ve worked in three queries corresponding to three of the smaller veiwports and adjusted the thumbnail dimensions accordingly. Thanks for that.
[quote=“PaulOB, post:10, topic:179508, full:true”]It’s always hard to retrofit issue like these so unless you want to code from scratch you just have to to do what’s feasible.
[/quote]
You’re telling me!
I will be coding from scratch in the foreseeable future, but I’m learning as I hack some patches together.
Drag the edge of your browser window until it is as narrow as you wish (tablet width… smartphone width…). The site should adapt to the narrowest width and all widths along the way.
So it turns out that my instinct was spot on about vmax. Opera, IE, Safari and Epiphany do not support it, at least not the flavors I’ve tried. Now I need to find a work around. Any suggestions?
My website is broken. Not real terribly since the problem only affects my tagline, but it sure looks like crap.
Depending on your setup, I’d recommend using REM, and then you could simply update the html{} with a new font size in your media queries. I do that, when it makes sense.
Do you mean query for viewport size and set absolute values accordingly? I don’t believe there’s a query for browsers. For a bit I thought I might be able to use Conditional CSS, but I think that went the way of the floppy disk.
So I was finally able to get my brand and tag line to scale (somewhat gracefully I think). Managed it without REMs and was even able to get rid of the VMAX by simply uisng queries and resizing fonts and background image accordingly.
Seems OK on all the browsers I’ve tried.
Still have a couple of issues, but i’ll keep plugging away.
