I'm just now diving into responsive CSS and design, and I'm wondering how I'm supposed to figure out various device widths out. I don't want to spend all day testing every single mobile device possible, I just want to get the responsive layout enough to where it works.
I saw some sites using #media only screen and (max-device-width: xx) but it seems that limits it to very specific resolutions, not actual browser window sizes.
Any advice at all would be great. I'm not new to web development or CSS, but totally new to responsive design.
It would seem that you're trying to figure out where and when to apply your breakpoints.
Rather than testing resolution on a bunch of devices why not build a responsive design that is acceptable at every resolution? There are no magic breakpoints that fix responsive websites for every device because every responsive website is going to differ depending on layout, content, etc. and there are tons of different devices with varying resolutions.
You might be thinking, "what the hell, I am not going to go pixel by pixel and check my website," but that's not really what I mean.
Finding your website's breakpoints:
Jump into a browser, navigate to your website, and open the console
Resize the viewport to a very low resolution. 320px is a good starting point.
(Note: To get the size of the viewport type window.innerWidth in console. See Resources for more ways to enhance debugging your design)
Analyze your layout. How does it look at this resolution? If you need to change the layout at this resolution then its time to add a breakpoint!
Slowly stretch the browser window until something breaks or looks horrible. At this point you'll need to insert another breakpoint.
Repeat step 4 to your heart's content
Keep in mind:
The point of responsive design isn't to make your site look good on all devices, its to make your content look good anywhere - Sam Richards
Resources:
Responsive Web Design - Programming with Anthony
Responsive Typography
Logical Breakpoints For Your Responsive Design
As mentioned in the above video, Modernizr is an awesome JS library that helps in detecting device-specific features
Responsive Design View Feature in Firefox 15+
Responsive Design View Tutorial for Chrome
Related
I am currently studying responsive concept and media queries, and I havent be able to understand the purpose of it, since we can use "%" for size properties in our CSS files. In fact for example in my CSS file if I add the "width" style property like this : "{width: 70%;}", my Web page will fit into any screen sizes because it will take 70% of it, without regarding the screen ? Or maybe she will be displayed with too small characters, that would be the explanation of why we use responsive methods ? It seems like maybe I didnt really get the purpose of it. Thank you for all your help.
Have you used a news website? In broad devices like laptops, there are multiple columns across the screens. While you use the same website on mobile phone, a single column takes all the available space. This is where responsive design and media queries come in. You can observe the same effect almost everywhere on the web.
Suppose if the news website had set the width of each column as 25%, the it would look good on a laptop, but the width of each column would be then very less when you view it in mobile phone (as 25% of mobile screen width would be very low) and this would make the text unreadable. This is why % units don't work everywhere and we need responsive design and media queries.
This is not the only use of media queries. You can even specify how your webpage will look when printed with the help of media queries. Modern css frameworks like Bootstrap are completely based on media queries
Still if you have any doubts related to the use of responsive techniques like media queries, you can just google "uses of media query" or "uses of responsive design" and you will get tons of articles and posts on their usability.
The use of % and other units can be done to a small extent but they don't give us the freedom responsive design gives us. Responsive design is more than using such units.
I've built flat page sites for years, largely with table architecture, and I know they must become more mobile compatible.
However, I actually WANT some of my non responsive sites to display in mobile screens as simply reduced-sized versions of themselves.
In an effort to understand the basics, I've created a simple page, no tables, one piece of art, and the meta tag which I understand is supposed to reduce a large size HTML page to fit within a mobile screen. But when I check this in a mobile screen emulator, my page is huge with just part of itself showing in the mobile screen. It's not reducing so that its full contents show within the screen.
What's the basic concept I'm missing?
http://ldihealtheconomist.com/html5-test-single-col.html
You're using a set width.
No matter what screen you're using, if you set the width as pixels then it will be displayed as that many pixels.
No offense, but if you've been making sites for years and don't know this, then maybe it's not the right thing for you...
Read up on #media queries, vw,vh and viewport widths.
Look at frameworks such as Bootstrap or Skeleton.
I have a question that I have searched for hours and can't find any solution to my issue.
I am trying to make it so when you resize the browser the mobile versions and break points don't show when on a desktop.
So when you're on a desktop you should be able to resize the browser to a point where you will have to scroll horizontally, rather than showing a mixture of desktop and mobile version. apple.com does it where when you resize the browser it only goes so small and you never see the mobile version. Which you shouldn't because you're on a desktop.
Here is the site:
http://www.avrs.com/
To recreate the issue you can resize your browser and at about 1000px it breaks and is ugly. You may also say that I am doing the display: none; wrong which you are welcome to inform me of how to fix.
Also I am familiar with the http://getbootstrap.com/css/#responsive-utilities. But they didn't seem to fix this issue either.
There are several techniques to achieve what you want. The easiest is to use CSS media-queries with specific properties.
Usually min-width or max-width are used for the CSS breakpoints to make your website mobile-friendly (Responsive Web Design). If you want to avoid this on desktop browsers you can use different properties with values specific to mobile devices:
min-device-pixel-ratio
min-device-width
orientation
This source will provide more relevant information: article on css-tricks.
Another question is: Why would you want to make your website unresponsive and not user-friendly like that? In year 2014 I (and pretty much most of the users) expect websites to adapt to the browser's window size.
Scenario: I really like browsing websites with my browser on one half of the screen and eg. chatting with someone or watching a movie on the other half.
Consider this point. I think it's better to improve your website so it works nice in all different resolutions because you can never assume anything about your users and their devices (smartphones, tablets, netbooks, laptops, desktops…). Nowadays I can easily get a smartphone with higher resolution than my desktop computer, or a laptop with a touch screen.
The devs at Apple are using max-device-width (plus other media query rules, like dpi, min/max width, etc.) to determine if the mobile version will be shown. Because desktops typically have a larger physical screen, the max-device-width rules will rarely be shown on desktops (but it isn't full proof, as shown below - You'd want to look at adaptive design for a separation between desktops and mobile devices...)
You can test this by setting your resolution to something much smaller. Here's an example on my Macbook Pro at 720px x 450px (via Display Menu) running Chrome.
I have a web application for PC screen browsers (#media screen{}) and I want to make it friendly for smartphone screens.
Unfortunately my 12pt fonts and my 128x128 pictures appear very small in my smartphone with a 1280x800 resolution (Samsung-Google Nexus).
Before make additions to CSS for a smartphone like mine, what I must have in mind to create a web application for a variety of smartphone screen resolutions?
Can you try to add this in css :
<meta name="viewport" content="width=device-width, user-scalable=false;">
from : https://developer.mozilla.org/fr/docs/Mozilla/Mobile/Viewport_meta_tag
History about viewport, i'm not sure....
There are many approaches to create a responsive website- Responsive, Designed for mobile, and Mobile first. However, nowadays, we consider more about Mobile First!. So, there are many websites teaching you how to create a responsive websites and mobile first approach for example:
Firstwebdesigner
WebdesignTuts
The first thing to think of when building a responsive site is simplicity. Web designers love to show off that they can design the hell out of a website. They fall in love with their code and all the cool things that it can do.
10 Basic tips about responsive design
Keep your layout simple
Use media queries
Define the break points
Make your layout flexible
Make your picture behave
Don't foget make and min
Make most things relative
When mobile linearize
Skip the none essential content
Check your meta viewport
You can see more information on Dan Rowinski's article. This is a great article to answer your question, what you must think before creating a responsive web application.
I am trying to make my website resize on handheld divices but form some reason its not responding to the stylesheet.
If you take a look here: responsive design link and put www.sofiamillares.com as the site test, the top lines get cut off and everything looks super big.
Can some one please enlighten me on why is it doing that and what would be the easiest way to fix it?
This is happening because your design is not completely fluid.
Only your container div will adjust with the width (a bit)
To fix this quickly, you could
give your divs percentage widths, so they scale with the screen resolution
float your square boxes at the bottom, so they will stack on smaller screens
consider using media queries or some js device detection to target mobile devices and send them a modified css stylesheet.
Get some ideas here: http://mediaqueri.es/
As Jason suggests, creating a mobile specific version of your site is usually the best solution. You can then test the user-agent string for phrases like "android" and "iphone" and re-direct the user to your mobile site. There are libraries available for JavaScript as well as many server-side programming environments (PHP, ASPX, etc) which do all sorts of browser detection for you.
When building a mobile site, you'll of course want to make the page lightweight so it'll load quickly over a mobile data connection, and format it appropriately for a smaller screen in portrait orientation.