responsive web-design for developers - sddconf.com · intro responsive web-design for developers...
TRANSCRIPT
(North Korean games by http://www.globalexchange.org/)
Developer brains Responsive Web-design for Developers
(Fireworks by http://www.victorysoccerohio.com/)
Designer brains Responsive Web-design for Developers
Web design trends Responsive Web-design for Developers
Big scalable background photography
https://demos.devexpress.com/RWA/dxhotels/
Web design trends Responsive Web-design for Developers
Big rotating banners with photography and call-to-actions
http://www.staffingteam.nl/
Web design trends Responsive Web-design for Developers
Parallax scrolling
http://www.spaceneedle.com/
Web design trends Responsive Web-design for Developers
Custom downloadable (web) fontsNeed to provide 3 different font files to support all browsers
• WOFF (Web Open Font Format)
Firefox 3.6+, Google Chrome 5+, Opera Presto, Explorer 9 and Mac OS X Lion’s Safari from
release 5.1
• EOT (Embedded Open Type)
Explorer 4.0+
• TTF / OTF (TrueType / OpenType Font)
Firefox 3.5+, Opera 10, Safari 3.1+, Google Chrome 4.0+ and Internet Explorer 9+
Might cause copyright issues!
Web design trends Responsive Web-design for Developers
Custom downloadable (web) fontsDeclaration is CSS
@font-face {
font-family: 'Graublau Web';
src:
url('GraublauWeb.eot?') format('eot'),
url('GraublauWeb.woff') format('woff'),
url('GraublauWeb.ttf') format('truetype');
}
Easy implementation without copyright issues: Google Web Fonts
(Fireworks by http://www.victorysoccerohio.com/)
Designer brains Responsive Web-design for Developers
Web design trends Responsive Web-design for Developers
Iconfonts
Icomoon
FontAwesome
more…
Make sure the minimum browser you support, deals with web-fonts
No good fallback in case font doesn’t load -> No icons to be shown !!
No full color icons, just 2 colors
Really easy implementation: size, colors etc. specified by CSS properties
Beware of the dark side
Use e.g. modernizr to proper handle fallback scenarios
Deal with the dark side
Intro Responsive Web-design for Developers
Responsive Web DesignMake use of a responsive CSS boilerplate or framework for positioning.
Some popular frameworks:
• Twitter Bootstrap
Most popular framework, plenty of documentation, huge set of widgets and modules, sites are
sooner to be recognized as bootstrap based.
• Foundation
Best in class grids system across all viewports, powerful and modular set of tools, more agnostic
than Bootstrap.
• Skeleton CSS
Very easy to use boilerplate. No UI widgets or styles included, really small footprint.
Intro Responsive Web-design for Developers
CSS Grid for positioning
1 2 3 4 5 6 7 8 9 10 11 12
<div class=“row”>..</div>
<div class=“row”>..</div>
<div class=“row”>..</div>
<div class=“row”>..</div>
<div class=“four”>
<!– logo markup
</div>
<div class=“eight”>
<!– add. header markup
</div>
<div class=“twelve”> <!– navigation markup </div>
<div class=“twelve”> <!– footer markup </div>
<div class=“eight”>
<!– content markup
</div>
<div class=“four”>
<!–
call to action,
links,
other widgets
</div>
<div class=“row”>..</div><div class=“four”>
<!– content markup
</div>
<div class=“four”>
<!–
call to action,
links,
other widgets
</div>
<div class=“four”>
<!– content markup
</div>
Intro Responsive Web-design for Developers
Facebook mobile inspired hamburger menu trick
1 2 3 4 5 6 7 8 9 10 11 12
<div class=“four”>
<!– logo markup
</div>
<div class=“eight”>
<!– add. header markup
</div>
<div class=“twelve”> <!– navigation markup </div>
<div class=“twelve”> <!– footer markup </div>
<div class=“eight”>
<!– content markup
</div>
<div class=“four”>
<!–
call to action,
links,
other widgets
</div>
<div class=“four”>
<!– content markup
</div>
<div class=“four”>
<!–
call to action,
links,
other widgets
</div>
<div class=“four”>
<!– content markup
</div>
menu.menu {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
min-height: 100vh;
height: 100%
width: 0;
}
.menu {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
min-height: 100vh;
height: 100%
width: 250px;
}
By using CSS 3
transition specifiers,
this can be done animated