I'm new with responsive design and am designing a web page starting with 240px width for old phones and building up from there.
On my banner image, which is a PNG, is it best to:
1) Start with my largest image and shrink it for each media query?
or
2) Start with a small banner and then display a higher resolution file for each breakpoint?
Stretching and shrinking images seems fine for vector graphics but on some gifs and other images it looks rather ugly.
So I wasn't sure if I should load one banner image that I manipulate or if I should have at least 3 images (phone, tablet, desktop sized) that I load at certain resolution trigger points.
Thanks.
Overall, I'd say to use media-queries to find the size of the screen and use whatever image fits best.
Example of CSS:
.banner{
background: url('banner-1024.png') no-repeat;
background-size: 100%;
}
#media all (max-width: 400px){
.banner{
background-image: url('banner-400.png');
}
}
#media all (max-width: 900px){
.banner{
background-image: url('banner-900.png');
}
}
But if you aren't expecting a lot of viewers on mobile devices, don't have the time to create the re-sized images, or just want the least amount of CSS, I've never had to much of a problem just using a large image for all devices.
If that's the case then just use the top four lines of code and you'll be good to go.
using at least a few images works great for me, phones (iOS, Android, Opera Mini) seems to choose whitch one to download, without requesting those for desktop, and medium-screen-devices. I started with one desktop image, performance was horrible. Then tried few smaller for each media query (with a little bit worse quality at 240px ;) ). It's way much faster.
Related
I published my first website (www.dirkwolthuis.nl). It is a one page website with a lot of images and elements. In chrome on my mac it loads fine and scrolls okay. On a iPad or iPhone the elements tend to render more slowly than the user scroll. Is this a common problem with one page websites? And can I do something about it?
Page load shouldn't be that much of a problem. But some of the images are quite large, especially the ones being served up for your article images, some of these images are over 1000px wide but only being used at 450px or less.
As these are CSS background images this can easily be dealt with the aid of media queries.
For instance:
.article-card.privacy {
url(/images/articles/whatsapp-small.jpg);
}
#media (min-width: 720px) {
.article-card.privacy {
url(/images/articles/whatsapp-medium.jpg);
}
}
#media (min-width: 960px) {
.article-card.privacy {
url(/images/articles/whatsapp-large.jpg);
}
}
You would obviously need to create three different images, one for each size and of course.
You could help speed up their download times by compressing them a little further. Try an online service such as https://kraken.io, even if you've saved for web in photoshop you can always squeeze a little more out of them.
Further to this you could make use of Google's page speed insights which will give you pointers as to where you're site is winning and where it can be improved in terms of page speed
As a relative beginner, I seem to be struggling to find the right balance between creating media queries based on content rather than specific devices.
I'm wrestling at the moment with a landing page that has a css background image covering the entire viewport. In order to ensure the image remains consistent (i.e. no cropping) across all mobile devices, I started writing device-based media queries that each load different versions of the image. By the time I'd created them for four different iPhones (portrait and landscape) alarm bells were going off.
Is there a better way to achieve what I'm trying to do or should I just accept that the image is going to look different from device to device?
All help gratefully received.
Steve
http://sixrevisions.com/css/responsive-background-image/
body {
background: url(background-photo.jpg) center center cover no-repeat fixed;
}
This should look relatively good across all devices.
http://stackoverflow.com does this, as well as www.ancestry.com. How do these sites keep from showing the mobile layout on a desktop when resizing the browser window if they don't have a separate subdomain? With my understanding, media queries will resize the website according to the viewport, but the both StackOverflow and Ancestry only resize to a certain point - on a phone the layout is completely different. Any help with this? I'd like to know how sites like the examples given achieve this.
Technically it's done by forcing a min-width on your document, which will incur horizontal scrolling below that size, with:
html {
min-width: 1000px;
}
But you should only deliver such CSS if you a have a 100% guarantee that this site will be served only to desktops. That can't be applied to mobile devices. Showing the mobile layout on desktop if a user resizes the window is perfectly normal. It naturally adapts to split screen mode situations.
I should probably make this a comment but they look at the device width, not the viewport width in their media queries and javascript. (I'm sick and don't feel like writing any more). There are also services available that can help you detect what type of device there is. However, these services can be slow and pricy sometimes. More often not worth the effort.
You can detect if your viewer is a mobile or a PC, then load different CCS files.
One way you can detect if there is a mobile is by javascript UserAgent BUT it is not very effective.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// is mobile..
}
I haven't tested this recently, but there is a 'mobile' device specifier:
#media mobile and (min-width: 400px) {
.col { width:50% }
}
#media mobile and (max-width: 400px) {
.col { width:100% }
}
That'll work on mobile devices, but not desktop
I deployed the same scenario on a WordPress site using "mobble pluging" which simply detect the device then generate a HTML version for mobile, tablet or desktop.
Why does iOS scale images up? I am building a site and want it to be mobile friendly, when I look at it on iOS my pixel-based images are getting scaled up for some reason.
Shouldn't the browser keep the images the right size? I have been testing it mostly in chrome using Dev Tools and setting it up to emulate iphone 4 and the images don't scale at all, it displays them as they are supposed to be.
I took a couple screen shots and the iphone width its taking is 640px, but my media query is as follows:
#media screen and (max-device-width: 479px)
What am I doing wrong? I can't find a solution to this. I need the pixel font images to stay pixely. Same for my splash screen. Screen shots available if you need....
You probably haven't been seeing the issue because your emulator isn't retina display, and therefore your images aren't being scaled, but your device is probably an iPhone 4 or later, and therefore has retina display, which assumes it needs to scale images unless directed otherwise.
Regarding devices with retina display, image resolution works in the browser similarly as it does on the device. If you want crisp images, you need to specify a separate image for the retina display. This stack overflow post has a few suggestions for implementing it: Apple retina support for images in HTML
I'm currently developing a website. I'm using an img in HTML file with dimensions 1466x530. It works fine on laptop (1366x768) but it is kind of zoomed in desktop (1024x768). Also the pages that were perfect in laptop resolution are zoomed in desktop. Could you help me please.
.center-shadow {background:url(../images1/center-shadow.png) center top no-repeat; }
Yes It happens, because 1480x530 is bigger image for 1024 resolution hence it looks zoomed and same goes for fonts which you have sized in pixel units it will tend to look different sizes in different screens.
if you want to show your site in same proportions in all screens you must use Media Query or setup such way it looks best in all screens.
Thanks
Manoj Soni