New to Pinegrow. I like what I see so far. Can anyone tell me how to do different size header images? One size to show for desktop / Laptop, and the other size for mobile version. Greatly appreciated. I’m coming from Dreamweaver, just use to right clicking and hiding element.
well… that depends… on just what Mobile is.
iPad, iPhone, Blackberry, …Android toaster etc etc.
as well as what @mandarin suggests, there are other ways to do it too.
The Bootstrap framework… kind of takes care of it.
but you end up with your overly LARGE for mobile images being presented in a smaller format - but the whole image is still downloaded. inefficient.
ie, a stupidly large 4MB banner image would be downloaded to your nice shiny mobile device, but shrunk to fit just nice
not very efficient for Phone data connections. Ok for the display render, but would be slow and costly to data package.
And also terribly slow compared to the , say 73KB image that it should have had.
There are also other frameworks that do this too, so that you end up with the end result but really not data efficient.
So! you need different images… different size… but… what sizes?
back to the first point about just what is mobile - in your eyes? do you have user data for your new shiny site? recoreded/anticipated user device data? say …
Hey! 95% of this sites clients use an iPhone! sorted!
If not then you have to cater for the best selection of screen sizes you can currently anticipate your user base having and supply them accordingly so that each device downloads its most apt image size.
This will employ break points, or “Media Queries” where the device reports back its viewing portal size
Pinegrow manages Breakpoints, Media queries quite well.
and basically, for each media query you would have a link to the BEST SIZE IMAGE for that viewport.