How do I use different logo sizes (responsive) on Skeleton format?

[daveharr1s0n]

Hello all,

I have been trying to learn how to put together responsive sites using the Skeleton boilerplate. Skeleton: Responsive CSS Boilerplate​ It's going well, pretty straight forward, but I'm trying to figure out how to code for different versions of a logo for different orientations and devices. Anyone know how to do that? Media queries, I would imagine, but how does one go about changing or adding to the existing CSS?

Any ideas? Thanks!

Dave

[BenPleysier · Accepted solution]

Media queries are useful when using background images as in

/* For width smaller than 400px: */

body {
    background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */

@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

For foreground images it is best to use  <picture>-<source>-<img> combination as in

<picture>

  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">

  <source srcset="img_flowers.jpg">

  <img src="img_flowers.jpg" alt="Flowers">

</picture>

The examples were copied from Responsive Web Design Images. If you Google the subject 'picture element' you will come across articles like Built-in Browser Support for Responsive Images - HTML5 Rocks

[pziecina]

Just like to say thank you for posting this Ben

[BenPleysier]

Thank you for the feedback.

In an endeavour to reduce file sizes and the number of HTTP requests, all in an effort to reduce band width, I initially overlooked the importance of images. I have now come to the conclusion that compressing a CSS file to save a few KB's is nothing compared to the savings to be had when using correct image optimisation and deployment.

There is still a lot of work done in this area, especially SVG's

Have you had a look at WebP - Wikipedia?

[pziecina]

BenPleysier  wrote

Have you had a look at WebP - Wikipedia?

Thank you for the link Ben.

Until WebP has better support we will have to wait on its x-browser use, but -

The good new is that one can use it with srcset, as fallback images formats can be coded in -

https://responsivedesign.is/articles/adding-webp-images-progressively/

You may remember we had this problem with png's originally. Some things never change do they .

[osgood_]

pziecina  wrote

Just like to say thank you for posting this Ben

Never going to work unless the website is completely controlled by the web-developer. As said before no client who uploads images via a CMS is going to mess around sizing up 3 images correctly. Resizing on the fly is possible but its a 'design hack' in terms of layout as the images will never be cropped at their best on tablet or smartphone.

The correct cropping of an image can only be done manually, anything else is a failed concept in my opinon. Just putting it out there so people dont think this is the 'holy grail' solution for responsive images.

The only solution for faster download on mobile devices is faster download speeds and lower bandwidth prices. Maybe they will come maybe they wont but until they do this is a grey area which can only be controlled by those that are willing to spend time optimising and cropping images across the devices manually. I cant see myself doing that for 200 images as you will end up with 600 'uniquely' sized/cropped images to manage, madness. Might be ok for a site with a few pages and limited number of images, for anything else its a non-starter.

[pziecina]

I was surprised when your post landed in my mail, as i had completely forgotton about this discussion.

I'm positive a simpler method of creating image sets for use with srcset and its css equivalent image-set, could be created if enough people wanted such a feature. It would not solve everyone's requirement but very little ever does.

The reason it will never happen, is because most of those who represent Dw users to the Dw team, do not create web sites or only do so with nothing beyond the point and click, no knowledge required features. If you were to ask that group, (known as CAB) only a handful will know what the W3C is, (let alone what it does) or have any idea about what is happening in the web development world, (most think the W3Schools site is the W3C).

Dw has gone backwards because many in that group, never actually build modern web sites, from the ground up. If you look at many Adobe products they use html5, css and javascript, and include a javascript debugger in their tool set for users. Yet the program that should have the best tools for html5 and javascript, the majority of that above mentioned group thinks users do not require them, probably because they cannot use them, or have no idea what to use them for. They certainly have no idea what browsers and devices support regarding W3C specs.

Only very few of that group post in this forum, (they know who they are, and in general the criticism is not aimed at them) but they are in the minority of that groups members. 7 years ago many of that group posted in this forum. If we and that group do not want to talk about what is missing and what is required for the modern web, the support required from programs, and the use and development of tools to use those features, then no one should be surprised when people try Dw, and decide it's no better than a free code editor, (which is true).

[osgood_]

pziecina  wrote

I was surprised when your post landed in my mail, as i had completely forgotton about this discussion.

Yeah, I did'nt realise until I re-checked it was an old post, otherwise I would not have bothered to post.

[daveharr1s0n]

Sorry for the delayed reply, Ben. But THANKS for the tips! Exactly what I wanted, although I have yet to use as I haven't quite figured out how I want to use, as far as logo-variation. Haven't been doing much in working on that responsive site lately -- too busy with the day job. But I was reminded of my design hurdle the other day when I saw how a big name e-commerce site (which shall remain nameless (hint, named after a big river in South America) looks on my phone -- aesthetically, not much to look at, but I know it does the job.

Anyway, looking forward to starting up again where I left off. Thanks again.

Dave

[osgood_]

daveharr1s0n  wrote

But I was reminded of my design hurdle the other day when I saw how a big name e-commerce site (which shall remain nameless (hint, named after a big river in South America) looks on my phone -- aesthetically, not much to look at, but I know it does the job.

Thats ok for Amazon because its a well establish website. But for a couple of smaller local companies in competition with each other the look of the website on mobile maybe more important to consider.