Responsive Web-design for Developers - sddconf.com · Intro Responsive Web-design for Developers Responsive Web Design Make use of a responsive CSS boilerplate or framework for positioning.

with Visual StudioResponsive Web-design for Developers

Don WibierTechnical Evangelist

(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

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) 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

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 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

[email protected]

twitter: @donwibier

GitHub: donwibier

Thank You!