How to use multiple logos in responsive design | Modules Unraveled
When re-designing my site, I needed to make the logo responsive so that it could stay out of the way, and not take up more screen real estate than needed. Here's my (debatably hacky) solution to creating a responsive logo using css and display:none.
Comments
maybe this instead?
The only drawback to this is you are loading unnecessary image sizes which the visitor doesn't need.
After reading this I'm thinking - maybe try creating the logo as a div with the logo set as the bg - then your media query will load only the image size the client needs.
Yeah, I like that!
Yeah, I like that! I agree that loading both images for every user isn't ideal for performance. I'm not exactly sure how to create an empty div and set the background at the moment though. I'd love to see some example code if you've got some!
Or do some sort of sprite thing
You could also utilize the technique when having sprite images?
Sprites would work
The technique Trevor mentions would work with sprites. And that would be the way to go if your logos are very different. (Like having words be above the logo for one size, and then beside them for another.)
In my case though, just having the one logo should be enough (the one with logo and words), because the position of the text doesn't change in relation to the logo. In this example, I should be able to set the height and width in the media queries so that only the logo shows at one resolution, and the full thing is visible at another.
I haven't played around with that yet, but theoretically it should work...