-

, , 1

http://www.litres.ru/pages/biblio_book/?art=3744275
-: , ; ; 2012
ISBN 978-5-91657-385-5

, ,

.

,
,
, ,
.
,

,
-. ,

 ,
.

1.

2.









3.



Max-width Internet Explorer
,
Windows

8
10
12
19
22
25
26
31
37
42
47
48
57
63
64
75
81
82
83
88
93
94
97

 -
AlphaImageLoader!

?
Overflow

4.


,



:





viewport


!

102
106
114
116
119
122
123
124
125
128
133
136
137
138
141
143
145
147
151
152
156
162
178

-
?

5.


:

JavaScript
,

! !

1
2
3
4
5

182
187
189
197
198
203
206
208
211
213
221
229
234
241
244
250
255
258
260
263
263
264
265
266
268

271
272
274

, ? ? ,
?
,
: , ,
,
.
?
. :
. ,
, .
.
,
( ,
,

 ).
-. -
,
, . ,
. , . , ,
. ,
iPhone, ,
.
? ,
? . , ,
.
, ,
.

.
glamour (, )
, grammar ().
, , .
-, , .
-,
, Ajax.
, (responsive web design), . , , ,
-.
. -. ,
, !
, ,

 .
(
)
, ,
. , , , , , , , ,
,
, .
, .
, -,
HTML5 -

1.

-,

, ,
,
. , ,
, , . , . ,
. , , ,
.
.
. , (http://
bkaprt.com/rwd/1/), , , ,
.
, - . ,

. , , ,
, . ,
, , : ,
, . :
,
.
. , :
, ,
,
,
. -
- , .
,
.
,
. ,
(. 1.1).

:
,

. , , .

,
, .

. 1.1. , ,

- . : -

 , , . - :

(. 1.2). : , , ,
, ,
.

. 1.2.

, :
, . -

 , , .
( )
, - .
,
,
,
. , : .
- (. 1.3), , , .
, (. 1.4),
: -
, ,
.

. 1.3.

. 1.4. .

( Reg? . .)

A Dao of Web Design ( -) (http://

bkaprt.com/rwd/3/), ,
(,
). -,
, ,
.
, :
, ,
,
, ,
,
. ,
,
.

.

,
, .
.
.
, . -

 , , .
,
,
.
,
, .
,
,
. , .
, ,
,
- . ,
:
http://www.bbc.co.uk/news/mobile/scienceenvironment-13095307
/mobile/?

, 320 . , -

 Twitter, Facebook
, , ( , ). .
,
. ,
, , , . ,
. , ?
? ?

.
- , , , : , . , ,
, ,
.
Internet Explorer, ,
.
, , .
, .
, -

, (http://bkaprt.com/
rwd/5/), ,
, (http://bkaprt.com/rwd/6/).
, , , (. 1.5).

. 1.5. , :

, ,
, ,

 ,
(. 1.6).

. 1.6. -

,
, ,
.

, , . - , ,
, .
.

, . ,
,
, .
, -.
, . , , , ,
-.

, ? ,
:
1. (flexible, gridbased layout).
2. (flexible images).
3. (media queries), CSS3.
,
- . ,
, , , .
,
: . , , ,
. , , . ,
,

 , .
- ,
,
: . . , , / , . ( ). , , , , : .

. , ,
, -. , :
, ?
. ,
, 5 C-3PO1,
, ,
. ,
1

, . . .

 . , : -
, Robot or Not ( ) (. 1.7).

. 1.7. Robot or Not

, , , ,
.
.
,
.
Robot or Not ,
, .
, .
, . ,
http://
responsivewebdesign.com/robot/ ,
, .
? . .

2.

- ,
,

, .
,
, , .

. , , ,
.
.
- .
XIX
, , .
,

 (. 2.1).

. 2.1. -

. ,
, . , ,
-, , ,
,
(. 2.2).

-.

. 2.2. , -

, , ,

Grid Systems in Graphic Design ( ) -

, .
- : .

 ,
.
:
#page
{ width: 960px;
margin: 0 auto;
}
,
CSS
. , ,
Photoshop (. 2.3), - , .
?

. 2.3. Photoshop , . ?

,
. -, ,
- , .
,
. ( , .)

CSS.
, (. 2.4).

. 2.4. . -,

, . , . -

 ,
HTML-:
<h1>Achieve sentience with Skynet! <a
href="#">Read More &raquo;</a></h1>
,
? ( . 2.5). - .
.
body :
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100 % Cambria, Georgia,
serif;
}

. 2.5. . ( -

: - (#DCDBD9)
(#2C2C2C). , ( , normal) (Cambria, Georgia, serif).
, , , ( )
100 %. ,
, -, 16 .
em.
, ,
(. 2.6).

. 2.6. CSS,

, h1
? ,
HTML,
.
(http://bkaprt.com/rwd/9/),
- , .
h1 : font
size 100 %, body, 16 .
, , - CSS:
h1 {
font-size: 24px;
font-style: italic;
font-weight: normal;
}
h1 a {
color: #747474;
font: bold 11px Calibri, Optima, Arial,
sans-serif;
letter-spacing: 0.15em;
text-transform: uppercase;

text-decoration: none;
}
.
(font-size)
, em.

:
(font size) , .
, em.
, :
target context = result
( .
. ? ,
. ,
. , : CSS.
, , ?)
, , 24px. , (font size) body 16 100 %,
. h1
(24 , 24px) (16 -

, 16px):
24: 16 = 1,5
24 1,5 16 ,
, 1,5 em.
h1 {
font-size: 1.5em; /* 24px / 16px */
font-style: italic;
font-weight: normal;
}
! , -,
, (. 2.7).
(
(/* 24px / 16px */). .)
, Read More ( ). , . 2.7, . . 11 , ,
1,5 em
, h1.

. 2.7. , em. ( ?)

. 1,5 em,
. ,
.
,
em, 11 (11px) 16
(, body), 24 , :
11: 24 = 0,458333333333333
- .
, ,
. ( , .)
- , 0,46 em. ! ,

0,458333333333333,
. ,
.
, , .
CSS:
h1 a {
font: bold 0.458333333333333em Calibri,
Optima, Arial, sans-serif; /* 11px / 24px */
color:#747474;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
}
. , , em
(. 2.8).

. 2.8.

, , .
,
. !
,
, . , , , : , .
,
em, :

. , ,

,
, .
target
context = result. .

, ,
, Robot or Not (. 2.9).

. 2.9.

,
(. 2.10),
. - -

. 2.10.

:
<div id="page">
<div class="blog section">
<h1
class="lede">Recently
in
<a
href="#">The Bot Blog</a></h1>
<div class="main">

</div><! /end.main >

<div class="other">

</div><! /end.other >

</div><! /end.blog.section >
</div><! /end #page >
,
. (#page), , , .blog. :
.main , .other . , , , ,
, .
, , . ( , .)
, CSS,
,
, (. 2.11).
.

. 2.11. ! , , ,

.main
.other ? , (. 2.12).

. 2.12. !

12 69
, 12 (12px). 960px.
900
.
, . (. 2.13),
, (.main
) 566 ,
(.other) 331 .

. 2.13. -

- , ?
, CSS. (! !)
#page {
margin: 36px auto;
width: 960px;
}
.blog {
margin: 0 auto 53px;
width: 900px;
}
.blog.main {
float: left;
width: 566px;
}
.blog.other {

float: right;
width: 331px;
}
. #page 960 , .blog 900
, .main (566) .other (331)
- .
(. 2.14).

. 2.14. ,
. ?

 -, . 960px
. ,
1024 , (. 2.15).
, , .

. 2.15. , .

- CSS, ,
. ,
,
.
#page,
, -
:
#page {
margin: 36px auto;
width: 960px;
}
, . !
, . : ! ,
960 .
#page {
margin: 36px auto;
width: 90 %;

}
, 90 %
,
, , . #page , , (. 2.16).
, 5 %.

. 2.16. -

.
.blog. ,
, :
.blog {
margin: 0 auto 53px;
width: 900px;
}
.blog
: .
target context = result.
- , 900px. ,
.blog. .blog
#page, - 960 , .
.blog (900) (960):
900 / 960 = 0,9375
0,9375. -

 . , , 93,75 % CSS:
.blog {
margin: 0 auto 53px;
width: 93,75 %; /* 900px / 960px */
}
( , (width). , , ,
.)
, .
?
.blog.main {
float: left;
width: 566px;
}
.blog.other {
float: right;
width: 331px;
}
,
, 566px,
331px. . , , . .blog
960, (#page).

 .blog, (566 331)

, .blog (900).
:
566 / 900 = 0,628888889
331 / 900 = 0,367777778
, 62,8888889
% .main
36,7777778 % .other:
.blog.main {
float: left;
width: 62.8888889 %; /* 566px / 900px */
}
.blog.other {
float: right;
width: 36.7777778 %; /* 331px / 900px */
}
(. 2.17). , , ,
,
. , .

. 2.17.

, ,
, . . . . :
.

, . (. 2.18), -
(. 2.19). ,
.
(, .)

. 2.18.

. 2.19. ? !

. 2.20. , 48

, .
48 (. 2.20).
, , (padding-left)

 em:
.lede {
padding: 0.8em 48px;
}
. (padding-left) ,
.
, , 48 (48px), , .
.
,
.
:
target context = result
, ,
.
1. , .
2. , . -

 ,
: .
,
.lede. , , 900 . :
48 / 900 = 0,0533333333
:
.lede {
padding: 0.8em 5.33333333 %; /* 48px /
900px */
}
48 , .
, . . , : .blog .
article, .other .recent-entries
(. 2.21).

. 2.21. ,

. , . (231px) (331px),
:
.recent-entries {
margin: 0 auto;
width: 69.7885196 %; /* 231px / 331px */
}
( .article)
. - - .
48px,
?
(. 2.22), ,
, -

. 2.22.

48px. , . , ,
.article, .blog, 566px:
.article {
padding: 40px 8.48056537 %; /* 48px /
566px */
}
! (. 2.23).

. 2.23. ! !

.
,
. , .
, 69px
( . 2.12).
474px, .
, CSS:
.date {
float: left;
width: 14.556962 %; /* 69px / 474px */
}
. :

(. 2.24). .

. 2.24. - . ( -

, ,
, .)

, . , , ,

.

 81
(. 2.25).
, :
.date {
float: left;
margin-left: -81px;
width: 69 px;
}

. 2.25. 81px ( )

, . , . ,
81px, 474px.
,
:
81 474 =.170886076
,
: (. 2.26). .

. 2.26. . ,

, - , .
! .
. , target context = result
, -
Photoshop CSS
, .
, .
,
. .

3.

, . ,
. :
, .
, -, .
, . ! ,
,
. .
,
?

,
:
, . .

blockquote, ?
, :
<div class="figure">
<p>
<img src="robot.jpg" alt="" />
<b
class="figcaption">Lo,
the
robot
walks</b>
</p>
</div>
: img, , ,
b.
figure/figcaption HTML5 , .
( , b, .

 span. ,
, b i.)
HTML , CSS:
.figure {
float: right;
margin-bottom: 0.5em;
margin-left: 2.53164557 %; /* 12px / 474px
*/
width: 48.7341772 %; /* 231px / 474px */
}

.
,
. . ,
HTML CSS , .
(
, ), , , (. 3.1). , , , ,
. ,
, 655
655. , ,
. , -

 ,
.
, ? . (. 3.2).

. 3.1. ,

. 3.2.

- .
, . - ,
, . figure, ,
, .

 , .

: , ?
:
:
img {
max-width: 100 %;
}
,
(http://bkaprt.com/rwd/11/), . img , , .
max-width: 100 %
. ,
(. 3.3).

. 3.3. max-width: 100 %

. max-width:
100 %

. 3.4.
. ?

, . , ,
(. 3.4).
, ,
, , max-width: 100 %
, .
:
img,
embed,
object,

video {
max-width: 100 %;
}
- (. 3.5),

. max-width.
,
?
?

. 3.5. max-width: 100 %

. , max-width: 100 %?

Max-width Internet Explorer

, Internet
Explorer 6 maxwidth. IE7 , .
, ,
IE6 , - .

max-width IE6. JavaScript,
expression Microsoft,
.
(http://
bkaprt.com/rwd/12/).
, -
CSS-. max-width:
img,
embed,
object,
video {
max-width: 100 %;

}
IE6
:
img,
embed,
object,
video {
width: 100 %;
}
? IE6 width:
100 % max-width: 100 %.
: . max-width: 100 %
, width: 100 %
.
. ,
robot.jpg , width: 100 % .
,
,

CSS. IE :
img.full,
object.full,

.main img,
.main object {
width: 100 %;
}

width: 100 % , , (img.full) , (.main img, main
object).
, ,
.
, Internet Explorer, , .
, .
-.

 ,
Windows

-
Windows, robot.jpg

(. 3.6).

. 3.6. IE6 ,

. ,
Windows

, : Windows
. Windows , -

 CSS, ,
.


max-width: 100 % , IE6
width: 100 %. ,
,
, IE7 . , , (. 3.7).

. 3.7. Windows -

,
, Windows. Internet Explorer 7 Firefox 2 .

 , Safari, Firefox
3+ IE8+, .
Windows 7, ,
, .
, , , , - ?
, (, Firefox 2).
2006 , , - .
, Firefox 2
, , , . ,
Firefox
.
Internet Explorer . (
.)

 AlphaImageLoader!

-
PNG IE6 ? ,
AlphaImageLoader,
CSS- Microsoft (http://
bkaprt.com/rwd/13/). PNG
- IE, ( DD_belatedPNG
: http://bkaprt.com/rwd/14/),
, ,
PNG , IE
:
.logo {
background: none;
filter:
progid:
DXImageTransform.Microsoft.AlphaImageLoader
path/to/logo.png", sizingMethod="scale");
}
.
,
AlphaImageLoader, .

sizingMethod (http://bkaprt.com/rwd/15/), AlphaImageLoader, (crop) - , ,

(image) (scale) .
, : , PNG- IE
?
, . -
, , AlphaImageLoader,
IE, .
, sizingMethod (scale), AlphaImageLoader .
JavaScript, . (http://
bkaprt.com/rwd/16/)
; , AlphaImageLoader.

(. 3.8) .

. 3.8.
. AlphaImageLoader!

( ,
Microsoft, AlphaImageLoader,

YUI (http://bkaprt.com/rwd/17/).
, ,
.)
max-width: 100 %
( width:
100
%
AlphaImageLoader)

 .
, ?

,
. , (. 3.9)?

. 3.9. . !

, .
, . ,
,
(. 3.10).

. 3.10.

?
2004 , (http://bkaprt.com/rwd/18/). : , .
-

 :
.blog {
background: #F8F5F2 url("blog-bg.png")
repeat-y 50 % 0;
}
.
,
, . , ,
, ?

(http://bkaprt.com/rwd/19/)
.
target context = result.
,
, ,
. ,
568 (. 3.11).

. 3.11. 568px.

, .
, . ,
target context
= result. 568px,
() 900px. :
568 900 = 0.631111111111111
- ,
63,1111111111111 %
. -
, , , 3000 (. 3.12).
, 160px.

. 3.12. ,

. : ? : ,
. , ,
XXV -
,
- , .
,

(63,1111111111111 %) .
, 3000 , :
3000
x
0.631111111111111
=
1893.333333333333
1893,333333333333.
Photoshop , 1893 .

 , 1893- (. 3.13).

. 3.13. ,

?
.

:
1893px, .
: :
.blog {
background: #F8F5F2 url("blog-bg.png")
repeat-y63.1111111111111 % 0; /* 568px /
900px */
}
, -

 (repeat-y).
(63,1111111111111 % 0) , ,
.

(. 3.14). , .

. 3.14.

, , -, : , .
.
, , ? , h1 2 - . , ?
. CSS3- background-size (http://bkaprt.com/rwd/20/),
, , , , , .

JavaScript: , jQuery- Backstretch (http://bkaprt.com/rwd/21/), 2

, .

 body.
, CSS3
.
background-size, .
.

 Overflow

. (http://
bkaprt.com/rwd/11/). , ,
.

overflow. ,
.
maxwidth: 100 %. , overflow: hidden.
,
:
.feature img {
max-width: 100 %;
}
:
.feature {
overflow: hidden;
}

.feature img {
display: block;
max-width: auto;
}
,
(. 3.15). ,
.
.
, overflow max-width.
.

. 3.15. overflow: hidden , .

overflow, max-width: 100 %

-.
.
. , : max-width:
100 % , overflow , .
, (. 3.16)? , , .

. 3.16. BBC News

. , ,
, , . , , .

 (
), -
(http://bkaprt.com/rwd/23/),
.
,
, . ,

,
max-width: 100 %, , .

, , , :
.
, ,
Robot or Not, , ,
(. 3.17).
,
.

. 3.17. , ,

4.

-, . , ,
, , . , ,
. , - .
- .
Robot or Not.
,
. , , . .
? !

, , ,
. ,
, .
, . , , , ,
. ,
, .

,
1024 760 (. 4.1).
.

. 4.1. ,

: ,
. -

, -
.
,
(. 4.2).
overflow, . ,
.
, . -

. 4.2. -

, . ,

.
,
.

. 600 , (. 4.3).
: , , ,
. . - .

. 4.3. ( )

 . ,
(. 4.4)!
, ,
. , ,
.

. 4.4.
,

 , , .
(. 4.5),
. , ,
, .
, , , .

. 4.5. , . !

, .
, .
(. 4.6), , ,
.
- , ,
. .

. 4.6.

 , (. 4.7). ,
? , , .
, , ,
, ,
.

. 4.7. , .
, ,

, (. 4.8).

 , .
,
- . ,
-,
, ?

. 4.8. ,

, . .
,
.

.
. , , ,
.
, ? ,
, ?
, ?

, (World
Wide Web Consortium, W3C) .
, ,
.

(media types), CSS2 (http://

bkaprt.com/rwd/24/). :

,

. , font-size
,
.


;
, .

,
.

, ? .
- (http://
bkaprt.com/rwd/25/)? , , .
-

 . , W3C
(http://bkaprt.com/rwd/26/)

. : all, braille, embossed, handheld,
print, projection, screen, speech, tty tv.
, , ,
print, screen projection, . embossed ( ) speech ( ) .
:
, CSS.
, CSS, print, . ,
, all. media- :
<link rel="stylesheet" href="global.css"
media="all" />
<link rel="stylesheet" href="main.css"
media="screen" />
<link rel="stylesheet" href="paper.css"
media="print" />

 @media
:
@media screen {
body {
font-size: 100 %;
}
}
@media print {
body {
font-size: 15 pt;
}
}

, . ( ! screen,
: print, : tv . .) , CSS,
,
. .
, , , -.

, , , , .

,
handheld:
<link rel="stylesheet" href="main.css"
media="screen" />
<link rel="stylesheet" href="paper.css"
media="print" />
<link rel="stylesheet" href="tiny.css"
media="handheld"/>
,
, .
,
,
screen print.
,
CSS- handheld.
screen.

 . iPhone
?

, W3C CSS3 , .
, , (http://bkaprt.com/rwd/27/).
:
@media screen and (min-width: 1024px) {
body {
font-size: 100 %;
}
}
, ,
:
1. (screen),

CSS2.1 (http://bkaprt.com/rwd/26/).
2. : (minwidth: 1024px),
: (min-width)
(1024px).
,

. screen and
(min-width: 1024px):
screen, , 1024 . , ,
.
@media,

. (link), media:
<link rel="stylesheet" href="wide.css"
media="screen and (min-width: 1024px)" />
,
@import:
@import url("wide.css") screen and (minwidth: 1024px);
@media, , .
, , , :
,
, CSS ,
.

, . , . ,
, .
1. ,
(display area)
(rendering surface). ?
:
, . ; .
2. , min
max-. , (min-width:
1024px) (max-width:
1024px),
1024 .
? . , , -
(http://bkaprt.com/rwd/28/) (. 4.1).


, and:
@media screen and (min-device-width:
480px) and (orientation: landscape) { }

,
,
.

?
, , @media,
, .

. 4.1. ,

 . Apple
iPad, orientation.
, orientation:
landscape orientation: portrait CSS. , ? , iPhone orientation

 , .
, iPhone .
?
, ,
.

,
,
.

-.
, , ,
. ,
.
,
, .
, ,
, , .
, , -
.
.

 viewport

,
. ,
.
2007 Apple iPhone,
meta Mobile Safari: viewport (http://bkaprt.com/rwd/29/).
? iPhone 320 480, Mobile
Safari -
980 . -
New York Times (http://nytimes.com)
WebKit (. 4.9),
: Mobile Safari 980px, ,
320 480.

. 4.9. Mobile Safari

980px, 320px

viewport . ,
320px:
<meta
name="viewport"
content="width=320" />
, Apple
viewport,
, -.
, . ,
, , . head HTML meta:
<meta name="viewport" content="initialscale=1.0, width=device-width" />
initial-scale
1.0, 100 %,
viewport ,
. ( Mozilla: http://bkaprt.com/rwd/30/.)


width=device-width,
. , iPhone Mobile Safari
980px, 320
480 .
, max-width min-width

CSS, . , , , ,
, ,
, ,
.
, - .
.

(. 4.10)? CSS, :
.main-title {
background: #000;
color: #FFF;
font: normal 3.625em/0.9 "League Gothic",
"Arial Narrow", Arial, sans-serif; /* 58px /
16px */
text-transform: uppercase;
}

. 4.10.

, -

 ,
. League
Gothic (http://bkaprt.com/rwd/31/) (color:
#FFF) (background: #000).
- ,
, ( text-transform) 3,625 em,
58px.
, . , , ,
,
.
.
@media -
.main-title, :
@media screen and (max-width: 768px) { }
CSS , 768 . 768? , ,
, . , . , iPad -

 768 px, 1024 px.

max-width, maxdevice-width,
. (: width
height , device-width deviceheight ).
,
, .
. , .main-title
CSS , :
@media screen and (max-width: 768px) {
.main-title {
font: normal 1.5em Calibri, Candara,
Segoe,
"Segoe
UI",
Optima,
Arial,
Helvetica, sans-serif; /* 24px / 16px */
}
}
.main-title
, CSS. (
768 )
, . -

: -, .maintitle 3,625em ( 58 ) 1,5em,

24px. .
-, , League Gothic,
(. 4.11).

(Calibri, Candara, Segoe, Segoe UI, Optima,
Arial, Helvetica, sans-serif).
(. 4.12).

. 4.11. League Gothic, ,

. 4.12. , League Gothic?

- . ,

, , ,
.main-title.
, . ,
.
! ,
(. 4.13).
. ,
, .

. 4.13. () ,

. #page ? CSS :
#page {
margin: 36px auto;
width: 90 %;
}
, 90 % (margin: 36px
auto). ,
,

:
@media screen and (max-width: 768px) {
#page {
position: relative;
margin: 20px;
width: auto;
}
}
,
768 , #page -

 20px.
.
,
:
@media screen and (max-width: 768px) {
#page {
margin: 20px;
width: auto;
.welcome,
.blog,
.gallery {
margin: 0 0 30px;
width: auto;
}
}
(.welcome), (.blog)
(.gallery) , #page.
,
,
(. 4.14).
?
? ?
(. 4.15)?

. 4.14. -

. -

. 4.15.

, , ,
.
, - ( ):
<div class="welcome section">
<div class="slides">
<div class="figure">
<b><img
src="img/slide-robot.jpg"
alt="" /></b>
<div class="figcaption"></div>
</div><! /end.figure >

<ul class="slide-nav">
<li><a class="prev" href="#">Previous</
a></li>
<li><a class="next" href="#">Next</a></
li>
</ul>
</div><! /end.slides >
<div class="main">
<h1 class="main-title">You can never be
too&nbsp;sure.</h1>
</div><! /end.main >
</div><! /end.welcome.section >
HTML, ? .welcome, (.main).
, , .figure,
img b,
CSS.
? . b, ,
.
CSS:
.slides.figure b {
display: block;
overflow: hidden;
margin-bottom: 0;
width: 112.272727 %; /* 741px / 660px */

}
.slides.figure b img {
display: block;
max-width: inherit;
}
hidden b
overflow, .
b. max-width:
100 % - (maxwidth: inherit). , b.
, b 100 %. target
context = result, ,
.welcome,
.
, . .
- :
@media screen and (max-width: 768px) {
.slides.figure b {
width: auto;
}

.slides.figure b img {
max-width: 100 %;
}
}
b auto, , .
max-width: 100 %, , . , (. 4.16).
, , .

. 4.16. .
. ?

. 4.17. Contact Us, ?

, ,
-. . , ,
(. 4.17).
:
<h1 class="logo">
<a href="/">
<i><img src="logo.png" alt="Robot or
Not?" /></i>
</a>

</h1>
<ul class="nav nav-primary">
<li
id="nav-blog"><a
href="#">The
&#8217;Bot Blog</a></li>
<li
id="nav-rated"><a
href="#">Top
Rated</a></li>
<li id="nav-droids"><a href="#">Droids of
the Day</a></li>
<li id="nav-contact"><a href="#">Contact
Us</a></li>
</ul><! /end ul.nav.nav-primary >
, h1,

.logo .nav-primary .
CSS?
.logo {
background: #C52618 url("logo-bg.jpg");
float: left;
width: 16.875 %; /* 162px / 960px */
}
.nav-primary {
background: #5E140D url("nav-bg.jpg");
padding: 1.2em 1em 1em;
}
.nav-primary li {
display: inline;
}

 .
, : , . .navprimary display: inline.
, ,
, .
:
@media screen and (max-width: 768px) {
.logo {
float: none;
margin: 0 auto 20px;
position: relative;
}
.nav-primary {
margin-bottom: 20px;
text-align: center;
}
}
,
.logo,
. textalign: center .nav-primary,
. (. 4.18).

. 4.18. -

, ,

, , .
. , , ,
(. 4.19).
( - .
.)

. 4.19. ,

, , . , :
@media screen and (max-width: 768px) {

}
@media screen and (max-width: 520px) {
.nav-primary {
float: left;
width: 100 %;
}
.nav-primary li {

clear: left;
float: left;
width: 48 %;
}
li#nav-rated,
li#nav-contact {
clear: right;
float: right;
}
.nav-primary a {
display: block;
padding: 0.45em;
}
}
,
520 , li .nav-primary,
float: right.
2 2, ,
display: inline (. 4.20).

. 4.20. , ? ?

,
(screen and (maxwidth: 768px)) , , , 520 ,
,
768 . , .
520 px.
(. 4.21). , - , ,
. , -

 , .
,
.

. 4.21. ,

- , . : ,
,
(. 4.64.8). , max-width, em, .
.
:
@media screen and (max-width: 768px) {

}
@media screen and (max-width: 520px) {

}
@media screen and (min-width: 1200px) {


768 , ,
max-width,
CSS.
,
520px
max-width.

(min-width: 1200px) .
1200 , ;
.
,
:
@media screen and (min-width: 1200px) {
.welcome,
.blog,
.gallery {
width: 49.375 %;
}
.welcome,
.gallery {
float: right;
margin: 0 0 40px;
}
.blog {

float: left;
margin: 0 0 20px;
}
}
Robot or Not (http://
responsivewebdesign.com/robot)
, , .
.
(.welcome, blog, .gallery)
(49,375
%)
. .welcome
.gallery , . ,
(. 4.22). , , , ,
.
, .

. 4.22. -

, , .
, : Opera 9.5+, Firefox 3.5+,
WebKit, Safari 3+ Chrome.
Internet Explorer 9 (http://bkaprt.com/rwd/32/) (http://bkaprt.com/rwd/33/)!
-, .
.
WebKit, Mobile Safari, webOS HP Android. -
(http://bkaprt.com/rwd/34/), Opera Mobile Opera Mini. Windows Phone, 2011 IE9 (http://bkaprt.com/rwd/35/), ,
. .
,

.
, , . Internet
Explorer 8 , , IE6 . ,
,
(IE Mobile
, BlackBerry) (http://bkaprt.com/rwd/36/).
. , . , JavaScript, . css3-mediaqueries.js library (http://
bkaprt.com/rwd/37/), , , IE5+, Firefox 1+ Safari 2 ,

CSS3. , , - , , .

respond.js (http://bkaprt.com/rwd/38/),
. , css3mediaqueries.js -

, , respond
() min-width
max-width . , . , , , CSS :
@media screen and (max-width: 768px) {

}/*/mediaquery*/
@media screen and (max-width: 520px) {

}/*/mediaquery*/
@media screen and (min-width: 1200px) {

}/*/mediaquery*/

css3mediaqueries.js : CSS

CSS-
@media. Respond . , , .
-

 Robot or Not respond.js . ,

, , ,
, Internet Explorer 7 (. 4.23).

. 4.23. JavaScript
IE -

JavaScript . ,
,
JavaScript. ,
, IT-.

JavaScript .
, , JavaScript.

JavaScript, . ,
,
, .

, ,
?
, , .
. .
, : , JavaScript @media.
.
37signals, ,
,
(http://bkaprt.com/rwd/39/):
, ,
,

CSS.
, ,
,
,

, ,
.

, ,
, ,

. ,
, .
, , .
iPad. , 7-
Galaxy Tab Samsung, Kindle Nook, . , .

, .

,
, .
, , max-width
, . 37signals
(http://
bkaprt.com/rwd/39/):

CSS, max-width,
Internet Explorer
6.
,

,
,
.
.

,
. max-width, 1200px,
. , -

 ? ,
,
Chrome,
Android Kindle.
, , : . maxwidth.
max-width
-
(http://simplebits.com)
Happy Cog (http://
cognition.happycog.com) (. 4.24 4.25). , max-width.

. 4.24. , , -

max-width 960 .
?

. 4.25. Happy

, max-width 820 . ? !

,
. (. 4.26), ,
2010 (http://bkaprt.com/
rwd/40/).
.
, (font-size) -

 ,
(. 4.27).

. 4.26.

. 4.27. max-width, -

, ,
,

, . , , ,
.
-

.
(. 4.28). , , , maxwidth,
.
,
, .

. 4.28. Shelf WordPress

 Tumblr (http://bkaprt.com/rwd/41/) ,

. (
!)

5.

.
,
[ ].

.
, [
],

.
, 32.
, 1950 .

. , , .
, , .
, , .

, ,
. ,
HTML , .
- , . , ,
(http://
bkaprt.com/rwd/42/):
,
,
,
. ,
.

,
,
.


(http://bkaprt.com/rwd/43/):
,


. ,

, ,
, .

.

. -, , ,
, , .
. , ,
, ,
, .
-,
, HTML- . :
, , , -

 HTML. , ,
, , .
: ,
. , , , . , ,
. , , , : ,
(http://
bkaprt.com/rwd/44/, http://bkaprt.com/rwd/45/).
,
. , , , . , , ,
(. 5.1). ,
. -

, , ,
.

. 5.1. iPad Google Reader Twitter

. , ?

, -
.
,
.
, -

 . ,
( ) ,
, , .
. , ,
. ,
.
.
, ?

2010 Cogaoke
(. 5.2), -, . , .
, , - .

. 5.2. Cogaoke.

,
. ,
. ,

 .
, .

, ,
. ,
.
,

. , , ,
. , ,

display: none ,
.
. HTML ,
.
, . ,
.

( ),
Noise to Noise Ratio (http://
bkaprt.com/rwd/46/). ,
. , , .

, , ,
, . , ,

. , , , .
, ,
.
, ? ,
? -

 ?
2009 ,
,
(http://
bkaprt.com/rwd/47/). -
, -
.
. , ,
, .
, ,
, ,
, , .

. , . . , . , ,

. , , .

.
, , ,
.
, ,
. :
?
, , -

 . ,
, -.
(http://bkaprt.com/
rwd/48/):

, ,

/
.

,

?

, , RSS- . (
, .)
, 80 % , ,
,
.
,
,
, -

 , - . , . ,
,

, .

, .
: , . , . 5.1.
. 5.1.

, ,
. ( ,
, , .) -

 . ,
, .
, .

,
-
, . ,
: , , , , . (,
), , .
, .
(Photoshop, Fireworks
. .). ,
HTML.
. , -

 .
. , ? iPad? ?
, ,
,
, .
, .
, , , . . (.)

. ,
(. 5.3),
.
, ,
. : - ?,
?,

 ( ),
JavaScript?

. 5.3. -

, , , , . - ,
.
, , , .
?
. . ,
Photoshop
, . :
,
.

(. 5.4). ,

, , Web Developer Toolbar Firefox

Chrome (http://bkaprt.com/rwd/49/),
.
(. 5.1), (. 5.5).

. 5.4. , -

. 5.5. Resize Web Developer Toolbar

:
, . , -

 , . (
, - Smartphone Browser Landscape ( ),
A List Apart: http://bkaprt.com/rwd/50/. , , , ).
.
, ,
,
. , , ,
Photoshop. ,
.
,
.
,
.

(. 5.6),
.
, .
, , .

. 5.6. , jQuery
Mobile (Filament Group, Inc.)

. ,
, . , ,
-
- .
-

 , .
.
, , . , , . . ,
. , , .
, .
,

.
(. 5.7).

. 5.7.

, , .
,
,
,
(. 5.8).

. 5.8.

,
.
. ,
, , , .

 .
,
(. 5.9). , .
(. 5.10).

. 5.9.

. 5.10. ,

,
. .
. , -

 , .


, . , , , , Photoshop, : .

/ . , .
Robot or Not , ,

. , Photoshop, . , , . ,
. , ,
, respond.js
.

 : , @media, JavaScript?
,
, , . , ,
(. 5.11).

. 5.11. ? JavaScript?

, . CSS:
.blog {
background:
#F8F5F2
url("img/blogbg.png") repeat-y;
}
@media screen and (max-width: 768px) {
.blog {
background: #F8F5F2 url("img/noise.gif");
}
}
-, ,
blog-bg.png,

, .blog. 768px
GIF,
.

, ,
Mobile Safari iPhone iPad,
, . -

 , , .
,
, ,
.

,
,
.
.
,
, .
- (http://ethanmarcotte.com).
, (. 5.12). (. 5.13). ,
:
,
,
(. 5.14).

. 5.12. ,

. 5.13.

. 5.14.

. ,
:
, . , Robot or Not,
min-width, -

 .
:
/* Default, linear layout */
.page {
margin: 0 auto;
max-width: 700px;
width: 93 %;
}
/* Small screen! */
@media screen and (min-width: 600px) { }
/* Desktop */
@media screen and (min-width: 860px) { }
/* ITS OVER 9000 */
@media screen and (min-width: 1200px)
{ }
, , (, , ) .
480, 600, 860 1200 . .
, , , , JavaScript

 (. 5.15).

. 5.15. ? JavaScript?

,
, . , ,

Yiibu
(http://yiibu.com). Yiibu

- (http://bkaprt.com/rwd/52/):

,
,
.
. , ,

.

, , ,
(http://bkaprt.com/rwd/53/):

- ,

,

,

2003 ,
,
-. , ,
CSS DOM
JavaScript, , ,
, .
There is no
Mobile Web ( ) (http://
bkaprt.com/rwd/54/):

.

.
(

 ) -
.

,
.
,

,
,
.

, -
, ,
?
,
-. , ,
,
,
.

 JavaScript

. 5.16. - , ,

, Robot or Not (. 5.16).

:
<div class="slides">
<div class="figure">
<b><img
src="img/slide-robot.jpg"
alt="" /></b>
<div class="figcaption"></div>
</div><! /end.figure >
<ul class="slide-nav">
<li><a class="prev" href="#">Previous</

a></li>
<li><a class="next" href="#">Next</a></
li>
</ul>
</div><! /end.slides >
, ?
: , .
, /. .
JavaScript .
! HTML:
<div class="slides">
<div class="figure">
<b><img
src="img/slide-robot.jpg"
alt="" /></b>
<div class="figcaption"></div>
</div><! /end.figure >
<div class="figure">
<b><img src="img/slide-tin.jpg" alt="" /
></b>
<div class="figcaption"></div>
</div><! /end.figure >
<ul class="slide-nav">
<li><a class="prev" href="#">Previous</

a></li>
<li><a class="next" href="#">Next</a></
li>
</ul>
</div><! /end.slides >
.figure,
.
, , ,
(. 5.17). - , jQuery, (http://
bkaprt.com/rwd/55/). -, - . ,
, CSS-. (, , .)

. 5.17.

""
script:
<script src="jquery.js"></script>
<script src="carousel.js"></script>
<script src="core.js"></script>
jQuery, http://jquery.com
(jquery.js), (carousel.js) core.js,
-.
, . core.js :
$(document). ready(function() {
$(".welcome.slides")
.wrapInner(<div class="slidewrap"><div
id="welcome-slides"
class="slider"></
div></div>)
.find(".slidewrap")
.carousel({
slide: .figure
});
});
, JavaScript
jQuery.

 .
1. div.slides .welcome CSS-
jQuery ($(".welcome.slides")).
2.
(.wrapInner())
3. .carousel(),
-.
.figure,
.
JavaScript - (. 5.18). !

. 5.18. -!

, .
JavaScript, , :
, .
,
JavaScript, . , .
/
JavaScript:
$(document). ready(function() {
var sNav = [
<li><a
class="prev"
href="#welcomeslides">Previous</a></li>,
<li><a
class="next"
href="#welcomeslides"> Next</a></li>,
</ul>
].join("");
$(".welcome.slides")
.wrapInner(<div class="slidewrap"><div
id="welcome-slides"
class="slider"></
div></div>)
.find(".slidewrap")

.append(sNav)
.carousel({
slide: .figure
});
});
, .
sNav, HTML ,
carousel(). , jQuery , JavaScript . .

. : , , HTML-. :
<div class="slides">
<div class="figure">
<b><img
src="img/slide-robot.jpg"
alt="" /></b>
<div class="figcaption"></div>
</div><! /end.figure >
</div><! /end.slides >
(
slides.html) -

 .
<div class="figure">
<b><img src="img/slide-tin.jpg" alt="" /
></b>
<div class="figcaption"></div>
</div><! /end.figure >
<div class="figure">
<b><img
src="img/slide-statue.jpg"
alt="" /></b>
<div class="figcaption"></div>

</div><! /end.figure >

, , , slides.html HTML-. , -, HTML- .
jQuery,
slides.html -:
$(document). ready(function() {
$.get("slides.html", function(data) {
var sNav = [
<ul class="slide-nav">,
<li><a
class="prev"
href="#welcomeslides">Previous</a></li>,
<li><a
class="next"
href="#welcomeslides">Next</a></li>, </ul>
].join("");

$(".welcome.slides")
.append(data).
wrapInner(<div
class="slidewrap"><div id="welcome-slides"
class="slider"></div></div>)
.find(".slidewrap")
.append(sNav)
.carousel({
slide: .figure
});
});
});
. jQuery .get () HTML- (slides.html) append().
JavaScript jQuery
, : (. 5.19).

. 5.19. JavaScript? . -
,

,
.

, :
JavaScript , -.
,
. , , - ,
. ,
, ,
:
if (screen.width > 480) {)
$(document). ready(function({ });
}
if ,
min-width: 480px:
480px, JavaScript
(. 5.20).

. 5.20. , -

480px.
-

. , JavaScript- LabJS (http://

labjs.com/) Head JS (http://headjs.com/) jQuery, custom.js ,
. JavaScript, . ,
-

 , Filament Group (http://

bkaprt.com/rwd/56/). , ,
.

! !

,
.
3G ,
Wi-Fi,
.
.
,
. ,
?
, , : .
, - .
- ,
. ,
, .
, ,
, -

,
.
, -
.
,

.

, ,
,
. .
,
A Book Apart ,
. -
. ,

. ,

, ,
.
- ,
.
- , , ,
, . -

 .
, ,
. , .
A Dao Of Web Design
( -),
, .
, Filament Group ( ,
, ) . , Filament , ,
.

, . .
,
,
. ,
, .
, ,
. , -

.
, . ,
, .


-

1

1. http://www.dolectures.com/speakers/craig-mod/
2.
http://www.flickr.com/photos/
carabanderson/3033798968/
3. http://www.alistapart.com/articles/dao/
4.
http://www.morganstanley.com/institutional/
techresearch/mobile_internet_report122009.html
5. http://vimeo.com/14899669
6. http://vimeo.com/14899445
7. http://www.smartglassinternational.com/
8. http://vimeo.com/4661618

 2
9. http://meyerweb.com/eric/tools/css/reset/

10.
http://www.flickr.com/photos/
uberculture/1385828839/
11. http://clagnut.com/sandbox/imagetest/
12. http://www.svendtofte.com/code/max_width_in_ie/
13.
http://msdn.microsoft.com/en-us/library/
ms532969.aspx
14.
http://www.dillerdesign.com/experiment/
DD_belatedPNG/
15.
http://msdn.microsoft.com/en-us/library/
ms532920(VS.85). aspx
16. http://unstoppablerobotninja.com/entry/fluid-images
17.
http://www.yuiblog.com/blog/2008/12/08/
imageopt-5/
18. http://www.alistapart.com/articles/fauxcolumns/
19.
http://stopdesign.com/archive/2004/09/03/liquidbleach.html
20.
http://www.w3.org/TR/css3-background/#thebackground-size
21.
http://srobbin.com/jquery-plugins/jquerybackstretch/
22. http://www.bbc.co.uk/news/technology-11948680
23.
http://bryanrieger.com/issues/mobile-imagereplacement/

24. http://www.w3.org/TR/CSS2/media.html
25. http://www.alistapart.com/articles/goingtoprint/
26. http://www.w3.org/TR/CSS21/media.html#mediatypes
27. http://www.w3.org/TR/css3-mediaqueries/
28. http://www.w3.org/TR/css3-mediaqueries/#media1
29.
http://developer.apple.com/library/safari/
#documentation/appleapplications/reference/
SafariHTMLRef/Articles/MetaTags.html
30.
https://developer.mozilla.org/en/Mobile/
Viewport_meta_tag#Viewport_basics
31. http://www.theleagueofmoveabletype.com/fonts/7league-gothic
32. http://windows.microsoft.com/ie9
33.
http://ie.microsoft.com/testdrive/HTML5/
CSS3MediaQueries/
34. http://www.quirksmode.org/mobile/#t14
35.
http://blogs.msdn.com/b/iemobile/
archive/2011/02/14/ie9-coming-to-windows-phonein-2011.aspx
36. http://www.quirksmode.org/m/css.html#t021
37. http://code.google.com/p/css3-mediaqueries-js/
38. https://github.com/scottjehl/Respond

39.
http://37signals.com/svn/posts/2661experimenting-with-responsive-design-in-iterations
40.
http://hicksdesign.co.uk/journal/finally-a-fluidhicksdesign
41. http://thethemefoundry.com/shelf/

42. http://tripleodeon.com/2010/10/not-a-mobile-webmerely-a-320px-wide-one
43.
http://jeffcroft.com/blog/2010/aug/06/responsiveweb-design-and-mobile-context/
44. http://thefonecast.com/News/tabid/62/EntryId/3602/
Mobile-shopping-is-popular-when-watching-TV-saysOrange-UK-research.aspx
45. http://www.lukew.com/ff/entry.asp?1263
46.
http://www.flickr.com/photos/merlin/
sets/72157622077100537/
47. http://www.lukew.com/ff/entry.asp?933
48. http://www.lukew.com/ff/entry.asp?1117
49. http://chrispederick.com/work/web-developer/
50.
http://www.alistapart.com/articles/smartphonebrowser-landscape/
51.
http://www.flickr.com/photos/
filamentgroup/5149016958/
52. http://yiibu.com/about/site/
53.
http://www.hesketh.com/publications/
inclusive_web_design_for_the_future/
54. http://www.the-haystack.com/2011/01/07/there-isno-mobile-web/
55. http://matmarquis.com/carousel/

56.
http://filamentgroup.com/lab/
responsive_images_experimenting_with_context_aware_
57.
http://en.wikipedia.org/wiki/
Canons_of_page_construction
58. http://www.amazon.com/dp/0520250125/
59. http://www.amazon.com/dp/3721201450/
60. http://www.amazon.com/gp/product/0321703537/
61.
http://www.fivesimplesteps.com/books/practicalguide-designing-grid-systems-for-the-web
62. http://www.markboulton.co.uk/journal/comments/aricher-canvas
63. http://www.thegridsystem.org/
64. http://www.alistapart.com/articles/fluidgrids/
65. http://www.w3.org/TR/css3-mediaqueries/
66.
https://developer.mozilla.org/En/CSS/
Media_queries
67.
https://github.com/filamentgroup/ResponsiveImages
68. http://unstoppablerobotninja.com/entry/responsiveimages/
69.
http://filamentgroup.com/lab/
responsive_images_experimenting_with_context_aware_
70. http://clagnut.com/blog/268/
71.
http://bryanrieger.com/issues/mobile-imageadaptation
72. http://www.alistapart.com/articles/dao
73. http://adactio.com/journal/1716/

74. http://adactio.com/journal/4443/
75.
http://timkadlec.com/2011/03/responsive-webdesign-and-mobile-context/
76.
http://globalmoxie.com/blog/mobile-webresponsive-design.shtml
77.
http://www.cloudfour.com/weekend-readingresponsive-web-design-and-mobile-context/
78. http://unstoppablerobotninja.com/entry/with-goodreferences/
79.
http://unstoppablerobotninja.com/entry/toffeenosed/

Jan Tschichold. The New Typography. University of

California Press, 2006.
Josef Mller-Brockmann. Grid Systems in Graphic
Design. Verlag Niggli AG, 2008.
Khoi Vinh. Ordering Disorder: Grid Principles for Web
Design. New Riders Press, 2010.
Mark Boulton. A Practical Guide to Designing Grid
Systems for the Web. Five Simple Steps, 2009.

- :
A Richer Canvas:
http://bkaprt.com/rwd/62/
- The Grid System: http://bkaprt.com/rwd/63/
A List Apart (Fluid
Grids): http://bkaprt.com/rwd/64/
,
:
World Wide Web
Consortium (W3C): http://bkaprt.com/rwd/65/
Mozilla
: http://bkaprt.com/rwd/66/

,
:
Responsive Images Filament Group: http://
bkaprt.com/rwd/67/, : http://bkaprt.com/rwd/68/, http://bkaprt.com/
rwd/69/

: http://bkaprt.com/

rwd/70/
: http://bkaprt.com/rwd/71/
,
,
:
A Dao of Web Design:
http://bkaprt.com/rwd/72/

: http://bkaprt.com/rwd/47/, : http://www.lukew.com/ff/archive.asp?
tag&mobilefirst
One Web: http://bkaprt.com/
rwd/73/ Context: http://bkaprt.com/rwd/74/
Responsive Web
Design and Mobile: http://bkaprt.com/rwd/75/
.
(http://bkaprt.com/rwd/76/) (http://bkaprt.com/
rwd/77/) , ,
.
With Good References (http://
bkaprt.com/rwd/78/) Toffee-Nosed (http://bkaprt.com/
rwd/79/).

 -. .
New York Magazine, , (World Wide Web Consortium, W3C).
http://unstoppablerobotninja.com
(@beep).
A List Apart,
, -. , An
Event Apart, SXSW Interactive Festival (
SXSW), Future of Web Design (
-) AIGAs In Control (
AIGA).
Happy Cog
Web- (New Riders, 2009),
. , , Handcrafted CSS (CSS
) (New Riders, 2009), Web Standards Creativity
( ) (friends of ED, 2007)
Professional CSS ( CSS) (Wrox,
2005).
- , , -

 , ,
.