Responsive Web-design for Developers with Visual Studio
Don Wibier Technical Evangelist Developer brains Responsive Web-design for Developers
(North Korean games by http://www.globalexchange.org/) Designer brains Responsive Web-design for Developers
(Fireworks by http://www.victorysoccerohio.com/) 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
Mario by Nintendo 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) fonts Web design trends Responsive Web-design for Developers
Custom downloadable (web) fonts Need 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) fonts Declaration 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 Designer brains Responsive Web-design for Developers
(Fireworks by http://www.victorysoccerohio.com/) Web design trends Responsive Web-design for Developers
Iconfonts Icomoon FontAwesome more… Really easy implementation: size, colors etc. specified by CSS properties Beware of the dark side 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 Deal with the dark side Use e.g. modernizr to proper handle fallback scenarios Web design trends Responsive Web-design for Developers
Modernizr Intro Responsive Web-design for Developers
Responsive Web Design Intro Responsive Web-design for Developers
Responsive Web Design Intro Responsive Web-design for Developers
Responsive Web Design Make 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 Intro Responsive Web-design for Developers
Facebook mobile inspired hamburger menu trick
menu .menu {
left: 0;
1 2 3 4 5 6 7 8 9 10 11 12 Thank You! [email protected] twitter: @donwibier GitHub: donwibier