GETTING YOUR SITE RESPONSIVE

Using CSS Frameworks to bridge the skills gap

WHY MOBILE MATTERS - MOBILE DEVICE GROWTH

MOBILE DATA USAGE IS EXPLODING

CUSTOMERS EXPECTATIONS ARE CHANGING

72%of mobile users say it’s important to them that websites are mobile-

friendly...

96% have visited a site that doesn’t work

well on their device

...and...

Users are

5 x more likely to abandon

the task they are trying to complete if the site isn’t optimised for mobile use

67% of consumers say

that a mobile friendly site makes them

more likely to buy a product

...and...

DESIGNERS VS. DEVELOPERS

The Battle for the Front End

IT’S A BIT MORE COMPLEX THAN THAT…

WE NEED ROUNDED WEB PROFESSIONALS The web world is changing

• No-one working in web can choose not to be involved end to end• The user experience is a critical part of any web/app development• You need less of this

• And more of this…

Manager Engineer T-Shaped Developer

THE TYPE OF SKILLS REQUIRED ARE DIFFERENT

@saracannon

RESPONSIVE DESIGN What it is and how to get there

RESPONSIVE DESIGN

Create a site that re-styles itself to suit the device• PROS:

• Mobile-first development demands a focus on key use cases

• Progressive enhancement will benefit all users, not just mobile

• Relatively future-proof• Much less duplication of content

• CONS:• A good multi-device experience requires excellent

javascript and CSS skills• Being efficient for mobile bandwidth requires

discipline• Downloading large pages, images, scripts, CSS, etc.• Require some kind of fallback / poly-fill for older

browsers

MINIMUM REQUIREMENTS FOR RWD

Fluid images Setting images to occupy at most the maximum display width.

Liquid or fluid layout Defining all container widths in terms of percentages of the browser viewport

Media queriesInvoking different style blocks based on the capabilities of the displaySuch as size, resolution, aspect ratio, and colour depth.

WHAT ARE MEDIA QUERIES?

Media queries are the basis of client-side responsive design Allowing us to provide different CSS blocks for

Media types e.g. screen and print Parameters e.g. orientation or screen size

CSS MEDIA QUERIES – WORK HORSE OF RWD Extends the media attribute of CSS2

CSS3 Media queries allows us to apply CSS selectively Filtering is via CSS

@media all and (min-width: 640px) { #media-queries-1 { background-color: #0f0; } }

@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}

BREAKPOINTS

The simplest way to think about content is through breakpoints Though this can be a device centric approach – build for content not devices

Breakpoints are browser widths target by a media query Each query changes the layout Once the browser is within the declared range

THE GRID

The Grid is one of the most powerful tools available to the designer It provides a uniform and consistent structure to layout Typically the grid divides the screen into several large horizontal and vertical regions

The atomic grid unit is of an arbitrary size as the smallest size between objects; e.g. 1em All spacing between elements a groups will be in multiples of the atomic unit

SOME EXAMPLE GRID WIREFRAMES

CSS FRAMEWORKS Getting to RWD quickly

WHAT ARE CSS FRAMEWORKS CSS frameworks designed to simplify Page layout Cross Browser compatibility Increasingly responsive development patterns

They are serious pieces of CSS work put together by developers & designers Rigorous software principals of reuse and modularisation are applied When used by aware CSS developers they make development faster

EXAMPLES OF GRID SYSTEMS

GETTING FOUNDATION

Foundation can be freely downloaded from the web: http://foundation.zurb.com/

When you download you have a few options We will be using the Default version

USING FOUNDATION TO CREATE RWD GRIDS The basis of Foundation is its Grid – it consists of 12 columns The grid is metaphorical, there is no actual grid We use it to space and control areas of content

WORKING WITH THE GRID

The basis of the Foundation system is the class named row

The row is a suitable relative size 62.5em for the full grid Margins set to auto beyond that

Rows are stacked beneath each other To represent the stacks of mobile first Then divide the content into columns

<div class="row"> ... </div>

.row { width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 62.5em; *zoom: 1;}

The Foundation Class

The HTML Markup

WORKING WITH THE GRID- GRIDS & COLUMNS

<div class="large-8 columns"> <h1>My grid based page</h1></div><div class="large-4 columns"> <input type="search" /></div>

.large-8 { position: relative; width: 66.66667%; }

.column,.columns { position: relative; padding-left: 0.9375em; padding-right: 0.9375em; width: 100%; float: left; }

WORKING WITH THE GRID - NESTING Once we have created the grid this block can be further subdivided By reuse of the grid and columns classes.

The foundation grid can be infinitely subdivided Each time you are taking a percentage and subdividing it

In relation to the width of the outer row EM unit.

THE GRID – BLOCK GRIDS

The block grid allows us to group a defined number of items Often used with images but can be used with blocks

Block grids use ul.small-block-grid-# or ul.large-block-grid-# These are ideal for blocked-in content generated by an application They do not require rows or number of elements to display correctly

Large grid layout

USING FOUNDATION FOR RICH FUNCTIONALITY Foundation tries to be as easy to use as possible with its Javascript By adding the correct script references most of the work is done You only need to add certain classes or data attribute to the markup

Foundation uses a HTML5 custom data vocabulary to work

The data- attribute is a global HTML5 attribute used for metadata You can create your own terms for your application

E.G. data-qa-validate Via javascript you can detect these attribute and react accordingly

Using javascript to add classes, events and other behaviour

INITIALISING FOUNDATION

Foundation is broken down into the core Foundation library This must be references and instantiated first

Plus a series of plugins – these simply need to be references Instantiating Foundation will do the rest.

<script src="js/foundation.min.js"></script>

$(document).foundation();

<script src="js/vendor/jQuery.js"></script><script src="js/foundation.min.js"></script> <script src="js/foundation/foundation.forms.js"></script>

FOUNDATION SOLVES THE RWD IMAGE PROBLEM Interchange works with Foundations media queries to load images Based upon the current breakpoint a different graphic is requested Creating a javascript driven responsive graphics loader

The Interchange component uses a data-interchange attribute Allowing you to specifying your respective breakpoints and assets.

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">

<img data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))], [/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]">

SHOULD YOU USE A CSS FRAMEWORK? Pros They can speed up your development Provide a common taxonomy across the team Enable cross browser functionality Level up to clean and symmetrical layouts quickly

Cons Restrict your freedom Add extra code Forces you to use the framework’s semantics

GOING BEYOND SIMPLE RWD

We have set out the core requirements of a RWD and solved them It is not quite that simple in practice you also need to consider:

Optimising images for different devices and connection speeds Changing navigational patterns for mobile UI/UX Restyling links and buttons to be more touch friendly Dynamically resizing fonts to work better at different screen resolutions Loading content as required not hiding it from the screen Providing retina versions of graphics

LEARN MORE ABOUT FOUNDATION

ZURB are visiting London in May! Will be running a free half day training event with ZURB Tues May 20th 1-5pm

Recorded session: https://www.youtube.com/watch?v=3wD-nyNY3qg&feature=share

Contacting me: david.walker@qa.com @theFictionaut

LinkedIn

CONCLUSION

QUESTIONS?