Responsiveness

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

what are your thoughts?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s