Contenu connexe Similaire à Topsy Turvy Design (20) Topsy Turvy Design1. Iopsy
Turvy
Design Adapting your design process
for adaptive design
@richquick
Background texture thanks to ~Essence of a Dream~
http://www.flickr.com/photos/30886604@N04/3564381283/sizes/l/in/photostream/
2. Iopsy
Turvy
Design Adapting your design process
for adaptive design
Background texture thanks to ~Essence of a Dream~
http://www.flickr.com/photos/30886604@N04/3564381283/sizes/l/in/photostream/
23. The Traditional Design Process
1
Big
Fat
Cheque
http://www.flickr.com/photos/nznationalparty/6078616366/sizes/z/in/photostream/
24. 2
Have a latte
http://www.designfloat.com/blog/2010/07/21/latte-art-charming-coffee-designs-part-ii/
28. Do some wireframes 3 (maybe)
http://www.flickr.com/photos/rohdesign/3307873748/sizes/m/in/photostream/
40. 6
The geek* / techie* / HTML monkey*
* delete as applicable
41. He* does a load of geekytechienerdy stuff
* It a he, obviously.
42. 7
Big
Fat
Final
Cheque
43. 1 Big fat deposit cheque
2 Have a latte
3 Do some wireframes
4 Photoshop comps
5 Sign off
6 HTML Monkey does voodoo
7 Big fat final cheque
44. 1 Big fat deposit cheque
2 Have a latte
3 Do some wireframes
4 Photoshop comps
5 Sign off
6 HTML Monkey does voodoo
7 Big fat final cheque
48. Big fat deposit cheque 1
Have a latte cappuccino 2
Do some wireframes 3
Photoshop Indesign comps 4
Sign off 5
HTML Monkey Printer does voodoo 6
Big fat final cheque 7
56. Go to the gym twice a day,
eat celery,
run 60 miles a week
63. First I learnt tables.. then that was wrong
Then I learnt Flash.. then that wasnʼt cool
Then I learnt CSS..
Then it was accessibility..
Then it was XHTML..
Then it was HTML5..
Now what?!!
78. There’s no wrong or right
way to do adaptive design
But hereʼs how I do it...
84. Cheque,
latte,
wireframes,
Photoshop
98. IE <8 doesn’t support @media
Use conditional comments
or javascript (modernizr.js, respond.js, css3-media-queries.js)
http://code.google.com/p/css3-mediaqueries-js/
https://github.com/scottjehl/Respond
99. Learn to let go
Safari, Chrome, Firefox,
Opera, your fridge
IE
105. There’s just 1 thing to learn
@media screen and (min-width:1025px) {
/* your CSS here */
}
113. As Patrick
mentioned
Image courtesy of Jeremy Keith / @adactio
http://www.flickr.com/photos/adactio/39958802/sizes/z/in/photostream/
117. Fixed-width
Layout
http://frontrowconf.com/speakers/
120. <div class="columns">
<section id="content" class="main">
...
</section>
<aside id="widgets">
...
</aside>
</div>
there’s some
HTML
121. .columns{
padding-top:70px; and some
}
#content{
float:left;
CSS
width:595px;
margin: 0 25px;
}
#widgets{
float:right;
width:275px;
margin-right:18px;
}
123. .container{
width:940px;
} take the
#content {
float: left;
width: 595px;
CSS
} that does
#widgets{
float:right;
width:275px;
layout
}
125. @media screen and (min-width:970px) { and
.container{
width:940px;
} whack it
#content {
float: left;
in a
width: 595px;
} media
#widgets{
float:right;
width:275px;
}
query
}
129. It is just 1 line of code
@media screen and (min-width:1025px) {
/* your CSS here */
}
131. Some stuff for iPhones (mainly)
<meta name="viewport" content="width=500" />
135. HTML5 form fields
<input type="text" name="name" />
<input type="telephone" name="phone" />
<input type="email" name="email" />
<input type="search" name="search" />
<input type="url" name="website" />
136. Why bother?
<input type="text" name="name" />
<input type="telephone" name="phone" />
<input type="email" name="email" />
<input type="search" name="search" />
<input type="url" name="website" />
137. Why bother?
Because it’s there
<input type="text" name="name" />
<input type="tel" name="phone" />
<input type="email" name="email" />
<input type="search" name="search" />
<input type="url" name="website" />
140. support in “older browsers”*
<input type="email" name="email" />
* cough - IE - cough
147. 1.
It’s
stupidly
easy
152. 1. It’s mind-numbingly easy
2. Gracefully degrade your designs
3. Progressively enhance your code
4. It’s just 1 line of code
5. Latte
154. Books
Adaptive Web Design
Aaron Gustafson
Responsive Web Design
Ethan Marcote
155. Thanks
Rich Quick
@richquick
rich@richquick.tv