lLooking at responsive websites/useful formulas,terms,breakpoints, flexible

Key features of responsive websites:

When on webpage on computer its 2 columns when its on mobile it turns to one column.

Navbar and tagline/logo mainly on mobile site

logo repositions

Examples of responsive web I find interesting:

Important information on help with responsive websites

Terms:

fixed width layout: Remains same sizes

fluid/liquid: resizes with browser windw

adaptive: resizes at set ‘break points’ . Does not nesscary use a fluid grid.

Responsive: Resizes to browser window/device. Fluidly adjusts to fit the available space.

Example breakpoints:

min width: 1200px  large screen display

min-width 980px  default

min width 768px  portrait tablets

max width 767px  phones to tablets

max width   480px phones

                  Flexible typsetting

16px,1em,100%   – font size

For font sizing always use ’ems’

target  DIVIDED BY context = result

example 20px /16= 1.25

20px = 1.25em

h1{font-size:1.25em /*20px  / 16 */; color:#000; }

h1 a{font-size:1em; color:#000; }
h1 a = child of h1 tag (nested)

16/20=0.8

h2 {font-size: 1.625em /* 26px / 16 */;}     font size 26px  divide by 16 parent
h2 a{font-size: 0.615em  /* 16/26 */  ;}  font size 16 divide 26   child

Widths use percentages

box – 400px = 400/ 960 = 0.416666666666667 move decimal figure two places to the right = 41.6666666666667%

box – inner = 200 px = 200 /400 = 0.5 move decimal = 50%

flexible Images
img{
max-width:100%;
height:auto;
}

Advertisements

Leave a Reply

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s