I'm hoping to follow Material Design (not explicitly installing MD) using CSS, but the units are a little confusing for me. I know that most elements are sized and positioned on a 4dp or 8dp grid, but I'm not sure how that will translate into CSS units. I know using rems/ems are generally good practice for scalablity, but they aren't mentioned in Material Designed (at least in terms of size/positioning).
For instance, a <button> tag might be said to have 8'dp' padding; I want the button to scale for different devices, and I want to reuse as much CSS as possible.
Should I replace "dp" with "px" and just use pixel units, and use varying breakpoints to support different devices? Or should I approach this differently?
Yes, you should use pixel units, we don't have a native CSS unit that converts the passed value to a 4 (or 8) multiple.
And to keep the styles on the same scale for different devices you can use the following tag on your HTML file, inside <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
On W3Schools you can find a better explanation for the <meta> viewport element:
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Related
From what I understand I should set a meta tag in the header as mentioned below, use min-width(or min-device-width?) values in media queries building up from the smallest supported size and adding additional CSS via the queries for larger sizes, anything specific to the smallest size only could be defined in a max-width query.
I should also use column classes in my html provided from a grid framework which will apply % width values to my elements/components based on the value of the column class in use(media queries can change this). I'm planning on using Susy with Breakpoint (Sass libs), I'm not sure if Flexbox is a better option.
Choices aside the fluid approach with breakpoints via media queries to alter the layout for smaller screens(or browser windows) is what I'm trying to pickup, though some resources I've been pointed to seem a bit outdated or varying advice/opinions. Please confirm if so far what I've said is fine or if I've misunderstood anything.
1) With the meta tag mentioned, do PX values translate to a consistent physical size(regardless of pixel density) across screens? And is the width property being set the same property width property that Media Queries can also reference?(So it'd now be equal to device-width, or the original value is still referenced?)
2) With regards to being responsive, should I be using PX units? It seems to be suggested and used in many articles these days that I come across, though older ones a few years back were pushing EM/REM units. I've read that fonts defined with PX units don't change if a user adjusts the browsers default font size, but fonts with %/EM/REM sizes do....however EM units can be problematic due to the relative nature if you have parent elements also sized with EM units? REM I don't know too much about yet, other than it wasn't as well supported and should have a PX fallback.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width takes pixel density into account, so a device with true resolution of 640px width and 2.0 pixel density will have a browser viewport width of 320px. Initial scale ensures mobile browsers do not attempt to zoom to fit anything (for true fluid responsive sites).
Source
I am trying to make sure I properly understand the way the Meta viewport tag works when setting width=device-width.
Would it be a correct statement that when working on a mobile device with
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> usage of pixel units is (or should be) treated as if they are given on a grid that is 320 pixel wide? i.e. an element with width:160px would take up (160/320 = 50%) of the screen?
This behavior does not seem to work when running on a desktop browser,
so assuming that I want to get the same design on mobile and desktop, should/can I use either percentages or the vw/vh units?
The first thing to realize is that CSS pixels and device pixels are not the same thing. The number of pixels when you set something to width: 160px in CSS relates to CSS pixels, which have very little to do with the actual pixels of the device.
Mobile browsers (on reasonably modern smartphones) create a "fake" viewport, that is emulating a desktop-width browser size, that is also zoomed out so that it fits on the screen. The measurements for this fake viewport is usually somewhere around 800-1000 CSS pixels wide (iPhones, for example, use 980px). This is to make sure that non-optimized sites still display OK on phones, as you can zoom in on specific parts etc.
When you use the meta viewport tag with width=device-width, you are telling the device that your site is adapted for viewing on any viewport size, and that you don't want the "fake desktop" measurement.
Instead, the browser should set the number of CSS pixels that fit on the screen to what is considered the "ideal" number of pixels for that device. On old iPhones, that was actually 320 pixels. On iOS devices with a retina screen, the CSS-pixel-to-device-pixel ratio is different, so the screen is 640px wide, but the ideal number of CSS pixels is still only 320. On other smartphones, the measurement is different - usually anything from 300 - 500 pixels on a smartphone.
If you want your layout to adapt to the number of CSS pixels, you are probably better off leaving the specific pixel measurements out of it and use percentages. 50% of the viewport will always be 50% of the viewport no matter how many CSS pixels you have to play with.
More often than not, there is absolutely no need for these harmful declarations:
maximum-scale=1, user-scalable=no
My eyes are not very good and so often I find fonts used on web pages uncomfortably tiny. And what can be more annoying, if the site prevents me from zooming to be able to read it?
If you still think otherwise - please read carefully this article: http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
Quotes from there (emphasis mine):
Declaring maximum scale
Setting a maximum scale means setting a maximum zoom. On a website where the access to the information is the top priority (most, if not all, websites), setting a maximum-scale=1 won’t allow the user to zoom. This might seem unimportant if you have a responsive website, but there are lots of cases when the user might need to zoom: small body font (at least, for the user’s needs), checking some details in a photograph, etc. Don’t trigger an accessibility issue just for aesthetic reasons.
User-scalable=no
This parameter removes the ability to zoom in or zoom out, and it’s even worse than maximum-scale. If there’s a really special reason to use it (e.g., you are coding a web app and need to avoid zooming in form inputs), try adding and removing it with JavaScript, just for the action you want to fix. Anyway, remember that smartphone users are used to zoom in and out any website, so having to zoom out after filling a form might be a default behavior and you don’t probably have to fix it.
Combo breaker
Now picture the combo-breaker: a non responsive website (fixed layout, about 960px width) with a viewport tag like
<meta name="viewport" content="..., maximum-scale=1, user-scalable=no">
Congratulations, your website zoomed to the first 300px or 400px of the top left corner, the user can’t zoom out and the only way to access the information is by patiently viewing the website in pieces of 300px width. A whole experience screwed up by an extra tag.
I am looking for a CSS package that will aid one in building a fluid/responsive layout with scrolling content... I don't know if I'm describing this accurately, but what I mean is represented well here and here.
there are others, but those 2 show it well enough.
Any tips to that? Am I overthinking things, and it's as simple as one big column-less CSS grid (i.e. I could even use twitter's Bootstrap as a starting place)? I've tried some simplistic designs with this, but it never seems to work for every device / every time I resize the screen.
Thanks all for the help.
When doing responsive design, you'll want to make sure you set a meta tag to viewport initial-scale value of 1. Mobile devices tend to pack more pixel values into actual pixels so that they fit on the screen, but if you set the viewport's initial-scale value to 1 then you're essentially telling the device you want the page to be viewed on at a 1 to 1 pixel ratio.
Add this to your header:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
I've come up with several Fixed width CSS Frameworks such as 960px GS and grid Generators. The problem with them I found is their fixed width. although it works best with Normal screen but Can I get or someone assist me with a CSS Framework that uses the entire width of the screen available. No of columns, gutter width etc are not much concerning factors.
Thanks in advance. :)
Making % based grids are incredibly easy, I think unless you're going to be using all the features of something like Bootstrap, you're just giving yourself a lot of extra bloat. Making a responsive grid system takes no more than 10/20mins and you'll have exactly what you need, nothing more, nothing less.
Here's a video about making a simple 2 column, % based grid.
And here's a blog post going through pretty much the same thing if you prefer to read about it.
To make mobile specific CSS you'll need some media queries going on, here's a post about that.
Also, if you're going to use media queries, don't forget to put:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
in the head of your pages.
I'm creating responsive web app for desktop and mobile devices. My problem is I don't know when I need to use *-device-width. Pls explain usecases for *-device-width. Why should I use it instead of *-width?
You use it with a meta tag, which you will add to your head tag
<meta name="viewport" content="width=device-width" />
From Difference between width and device-width in CSS media queries:
device-width is the...
width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
Source.
The width...
describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page
box on a printer)
Source.