Matt talks so fast! Here’s what I was able to jot down from our lecture.
Responsive Websites
10/16/13
Break Point – Point at which a layout will reformat itself, can set these for various screen sizes and can also set for screen styles like portrait vs. landscape
Fixed Width – Pixel not dependent on viewport or something
Flexi Grid – 420px is standard? Anyways it like keeps ratio by translating pixels to percentages but the tinier the screen or browser window, the weirder the divs get so it’s not ideal
Media Queries – separate style based on the width of the viewport (gets too small it gets rid of flow so that elements stack on top of each other).
Mobile First – build for the mobile device first, will be faster load time for the mobile user plus is easier to plan for the less complicated view first?
***Big OOH AHH Factor*** Making sites responsive for Demo Day
Width: Auto = Expand to full width (of parent)
Max Width: Set for parent so that it knows it can get smaller if the window goes smaller
Display size is always measured and reported back to the media query as pixels; can’t read em or percentages.
Some meta tag accounts for pixel density so that sites can still look good on high res phone and not formatted at a higher pixel size that would be fitted for a tablet/browser version, detects ration based on height to width.
Chrome Extensions:
Responsive Inspector
One thought on “Responsiveness”