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.
Related
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.
I have a problem that I believe is a quick solution... I simply can't figure it out myself, however, and a quick run through search didn't help me either.
Basically, the only real issue I'm having I'd like to address is the logo (SERVICE FIRST) not shrinking down to fit inside of the width of the site in a mobile form. While the rest of the site responds fairly nicely (as nice as it usually gets) to the responsive web design, the header image doesn't so much as twitch, meaning it runs "off" the edge of the page.
My site is at www.test.servicefirstsvc.com
If you view it on a mobile device, or simply shrink your web broswer window to a phone size, you'll see the problem. Any help? I can paste relevant portions of the responsive CSS if needed.
Just give the img tag a max-width: 100%; via CSS.
You should add a height: auto; as well because of some weird issues with the Safari browser not paying attention to the aspect ratio of the image.
I'm a graphic designer, I have a small question, Ive learnt some of css and completed the HTML tutorial package over the internet multi time, so I have a good base of html-css coding at least, I do want to start converting PSD webdesigns into HTML-CSS, I've seen many tutorials step by step guides etc.. and they were helpful for sure but I'm afraid of many points:
The flexible point of the website, which means the following: my monitor is currently 1920x1080, let's say that I will code the website to fit on my screen and someone with a small / big screen than mine would open the site, will he see the objects moved from its original place? because defining by px is measured to fit to the user's monitor as far as I know.
Ensuring that the site will be working on at least 3 browsers plus, I know that every browser has its own css base reader and its very hard to set the website to fit all browsers especially internet explorer.
So, I don't want a special help to be honest, all I need is some points / well-guided tutorials to follow to ensure that the points I've reviewed being at least 50% solved..
What you are talking about is Responsive Web Design. Literally just search it up on the internet and you'll find tons of resources and blogs.
My tips are:
For testing multiple browsers download all of them (Chrome, Firefox, Opera, IE) and when you save your work (do this all the time) open it in all browsers so you know where your errors are coming from
Use the developer tools on your browsers. Chrome and Firefox have very good developer tools and help me figure our my problems. You can also use it to emulate mobile browsers and show your media queries (explained later).
Use em instead of px. pixels may look nice on your screen, but if the users screen is small they may find it hard to read your text. here is a good px to em converter http://pxtoem.com/
Use percentages. For example you can make your content div have width of 80% so that you have some space on both sides of your screen (like the design of stackoverflow). This means that your content will fit on most desktops well. Another example is a navbar, you can make it 100% wide so that it always fits the screen no matter the desktop.
Then we have media queries. These allows us to change the content based on the size of the screen. For example you can hide the navbar using a media query when a mobile user is viewing your website. Here is onc elink about media queries:http://cssmediaqueries.com/what-are-css-media-queries.html
Some people still develop for IE8 but it is a pain in the ass. You need to decide whether your audience will be using IE8. I'm guessing as a graphics designer you're going to be making a graphics blog, meaning that your audience will probably be using up to date browsers. So have a think if you really need to develop for older browsers.
As for the first point: there are some ready css frameworks, with responsive elements included. The most popular, I suppose, is Twitter Bootstrap. It has a grid system to help you make your html blocks change their width and even get hidden depending on the viewport width.
If you want to understand the techniques, you can study how media queries work.
As about cross browser stuff: you will have to test your pages in all browsers you want to support. That's the rule. On your way, this link can be useful.
The flexible point of the website, which means the following: my
monitor is currently 1920x1080, let's say that I will code the website
to fit on my screen and someone with a small / big screen than mine
would open the site, will he see the objects moved from its original
place?
The general way to get around this is to build a centered window, thus:
<html>
<div id="container">
<!-- your design lives here -->
</div>
</html>
#container
{
width:728px;
margin: auto 0;
}
Your design is now set at 728px which should fit most resolutions. You can have graphics that expand beyond this, see the bar at the top of SO, but your content should live inside this container.
Another potential solution to this is to allow you design to be completely flexible and contain all your elements in divs that float about, see Masonry for an example of a tool that helps with this.
Ensuring that the site will be working on at least 3 browsers plus, I
know that every browser has its own css base reader and its very hard
to set the website to fit all browsers especially internet explorer.
This is a bain of every web designers life. There is no substitute for good testing here. Something that will help is a CSS rest script like this one. This will remove some of the inconsistencies across browsers. But really you just need to, test and test again.
I want to learn some basics in website development so that I can control the look and design of my site.
My website developer says that a full screen header with a gradient left to right won't work because screen size differs from 1920 down to 420 for mobile phones. My website is being optimised for browsing on mobile phones. Is there a way around this?
I have an image of what I am referring to. How do I post it for users to see here? (My website is a customised Magenta Go website.)
The question is not extremely clear, but it's possible that what you're looking for are CSS3 Media Queries and "responsive design".
I really recommend looking at how Twitter Bootstrap is doing it: http://twitter.github.io/bootstrap/scaffolding.html#responsive
Basically, you modify your CSS for different screen widths, possibly in your case providing different gradients for each case. And screen categories defined by Twitter Bootstrap in the aforementioned documentation seem pretty reasonable for most cases.
A general way to get a horizontal gradient to work on both large screens and mobiles is using CSS gradients, like this example. You can find an indication of browsers that support CSS gradients on the Can I Use website.
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