ITS Collaboration

Put a Bunch of Smart People in a Room

Put a Bunch of Smart People in a Room

Typical Development Process

Typical Development Process

A whole bunch of wheels, each a different color and style

Lack of Collaboration

What's the Alternative?

What makes the web great?

The Web is a Series of Tubes Components

Let's create some reusable components.

Future-Friendly Websites

What device will you be unwrapping tomorrow?

What device will you be unwrapping two holidays from now?

Responsive Design Can Be Hard

It takes a lot of time

It's a moving target

It's fundamentally different

Is There Anybody Out There?

Illustration of a boy looking into the stars

Foundation

foundation.zurb.com

Mobile First

Semantic Markup

Library of JavaScript Plugins

So We Started Making Stuff

Navigation

View Demo

Navigation plays very differently roles in different contexts.

When you have the large space of a widescreen monitor, you want it readily available so you can jump around the site as you please, but on a small screen you want it out the of way so you can focus on the task at hand.

launch demo

Here's a pretty standard navigation bar. It has some main categories and sub-categories. show submenus

I've got a resizer tool here (mouse around it) that can show us what it looks like at different sizes. Watch what happens when we go to the size of a typical tablet.

click tablet

The menu is still there, but it's tucked out of the way. click hamburger

It's still just as functional. Even the sub-menus are here. click Europe

It works great at a smartphone size as well — click phone

In fact, close menu we put the menu icon on the right because statistics show most people hold their phones in their right hand, and this makes it easier for people to reach with their thumbs.

Responsive Grid

View Demo

Let's take a look at an example of how a grid can reflow. launch demo

Now, for this demo I'm just using the basic outline of a grid. These boxes could contain any kind of content — text, images, buttons, and so on.

These are two examples that take different approaches to responsiveness.

At the top are three sections laid side-by-side and split into equal thirds.

Down here, in red, we have a similar side-by-side layout. But lets assume that the content in these red areas can't get much narrower and still be usable.

Let's see how these two arrangements react when we go down to the size of a tablet.

click tablet

Your eye was probably drawn to the red area where the pieces are now stacked vertically. This ensures each one has enough width for its content.

But up here, the blue layout is no longer split into thirds. mouse around right side Because the content in this piece needs more width, it has actually expanded to take up half of the screen. Over on the left the pieces have been shrunk down to compensate.

Let's take grids a step further.

click 'Advanced' button

Now we have two separate structures nested together. At this size, most of the pieces are stacked on top of each other and they're pretty symmetrical.

Let's go back to a wider screen. click desktop

Now everything is side-by-side, all in one row. The pieces are using different proportions then before — they're no longer symmetrical. This is all the same HTML and the same content, it's just laid out differently to maintain legibility.

The code behind this is not complex. It's the approach to your page's structure that requires some thought. You really have to take a moment to look at your content on different-sized screens to get a feel for what works best.

Let's move on to the last demo. next

Responsive Tables

View Demo

Responsive Tables

View Demo

Responsive Tables

View Demo

bullet

Let's think about how we can make all that data available everywhere. open demo

Here we have some scientists and information about them. It's all important information, but for any given user some of it will be more important than the rest.

So let's try and show as much data as possible, as long as it still fits. The summary column would be a good place to start since it takes so much room to display legibly.click tablet

So now the summary column is gone, which gives the rest of the data more room to breathe.

And if the user wants to, they can still see the summary with this handy menu right above the table. use menu to show summary

This menu lets the user tell us what's important to them. hide summary

Let's go a bit further, all the way down to a smart phone size. click phone

Now we're left with 3 columns, because the data would be too squished if we showed more.

These 3 columns were deemed more important by the page designer, who specified each column's importance in the page's HTML.

Again, ultimately it's up to the user to decide what's useful, and if they want to they can always re-display columns and scroll around to view the content. redisplay all columns and scroll around

“That sounds terrific and everything, but how can I possibly use these super amazing, technologically advanced components on MY sites and apps?”

The New Web Framework

Is Responsive

Is Modern

Is Whimsically Magically Magnificent
unicorns and rainbows

Built for New York State

Photo credit: Hesterr

Photo credit: J. Stephen Conn

Excelsior is

collaborative
platform agnostic
cutting-edge
open-source

Pre-Beta is Available Today @
nys-its.github.io/excelsior/

Excelsior's Goal

To be the best Responsive Web Design Framework ever.

Leveraging talent across NYS agencies to collect, research and implement RWD best practices.

“Ever Upward!”

Some Key Features

An easy entry point for beginners

Flexible enough for advanced developers

Reusable, re-skinnable, accessible components and patterns

Ongoing state-wide collaboration effort to implement RWD

Excelsior is Not Another Standard

Excelsior isn't a locked code-base,

...it's essentially yours.

Excelsior Makes RWD Easy

All you need to know is HTML & CSS

Fully documented components

In-depth wiki

Outdated Techniques and Processes

"Just throw it on the website"

Desktop-first design, separate mobile sites

Plain, manually maintained CSS

Too many styles and Javascripts loaded on each page

Mismanaged source control

Emails and spreadsheets for bugs and changes

Stop me if you've NEVER heard of any of these common problems.
» Just put it on the website, I don't care how it looks
» BUUUUT, it must look perfect at 1024 resolution, and that banner better be above the "fold"
» I don't care about mobile, just make a separate mobile site
» Well, you already had too many manually maintained stylesheets and javascript files loaded on that page, which have been effectively doubled since you need to maintain a separate mobile site.
» and while you were working on those manually maintained files,Your mismanaged check-in check-out source control system decided to not allow you to commit your changes to the server, and wont tell you why.
» which means you cant explain to your boss what the problem was in that super accurate and up-to-date spreadsheet or email chain that you use to keep track of your changes.
» I'll wager that every single person in this room has experienced one of these list items.
And we all know that they don't work, so Next »

Were Treated Like The Evil Beasts They Are

YOU SHALL NOT PASS!

Hello, Modern Techniques and Processes

Content Based Design

Multi-Device & Mobile-First

Preprocessed CSS and Build tasks

Minified and Combined Assets

GitHub

GitHub Issues

...and it's easy to use!

What About Browser Support?

Fully functional in all major browsers

Chrome, Firefox, Opera, Safari

iPhone, Android, and Windows Phones

Internet Explorer 8 and Higher

Non-major browsers will still "work"

Serve IE6 & IE7 your mobile or print styles

Some People Might be Thinking...

"My sites MUST look identical across all browsers and fully support IE6 AND IE7!"

I've got three things to say about that:

1. Do you REALLY?

IE 6 is Dead

IE 6 = 0.15%

Source: StatCounter

IE 7 Isn't Far Behind

IE 7 = 0.74%

Source: StatCounter

2. Don't Shun the Future for the past

“Never put off tomorrow
what you can do today”

- Thomas Jefferson

Look Close, You'll See Something

IE Usage 2009-2013

Source: StatCounter

Mobile is Winning, Big

Mobile Usage 2009-2013

Source: StatCounter

And start addressing this
This chart represents a paridigm shift like we've never seen on the web
Since the release of the original Iphone, especially in the last 4 years, Mobile usage has just exploded.
You simply can't deny mobile anymore, And why would you?
I mean, how many people in this room are planning on buying a non-smartphone in the next two years? not many...
Your friends and family have been raving about their smartphones, and asking you why you havent upgraded yet
I refer to my phone as my "Second Brain", well actually, "My wife's second brain" because shes always using it to difinitively demonstrate to me how wrong I am, whenever she knows im wrong. and trust me... she uses it a lot.
If you started a new project today, mobile should be your FIRST thought, don't continue to let it be an after thought. Next »

3. If, After The Supporting Evidence...

After The Email Back and Forth...

After The...

Crying?

Add it to Excelsior Yourself!

RWD Doesn't Have to be Hard

Excelsior aims to help you start out on the right path

Don't reinvent the wheel again

Open-Source

Licensed without limitations, use, copy, modify, etc

Excelsior is People!

Contribute back, share your work with the world!

Add cool new features and components

Add support for legacy browsers

The thing that excites me the most about GitHub is the collaboration it allows
It's yours just as much as it was ours
Excelsior is about the people who contribute back to it to help make it the best Responsive Web Design Framework Ever.
» We urge you to play with Excelsior and then contribute your hard work back to the project.
All ideas and opinions will be discussed, You will never be shut out, the door is always open
All contributors will receive a pre-determined amount of high-fives and patted-backs based on its level of awesomeness.
» You can add cool new features and components
» Or you are the person who builds support for legacy browsers
without greatly sacrificing page performance, not only will you receive your high-fives but I will personally give you a hug. Next »

I Did Say "Pre-Beta", Right?

All code needs testing

If you find a bug:

You can easily report it using GitHub Issues

How Do I get Started?

nys-its.github.io/go-responsive

Introductory Videos to RWD

nys-its.github.io/go-responsive/#get-started

Great Resource Links

nys-its.github.io/go-responsive/about-rwd.html

Component Showcase

nys-its.github.io/go-responsive/

Go Responsive

Today!

So you tried out Excelsior and you decided that for whatever reason, it's just not the right solution for your current project.
That's okay we know it's not for everyone, and you did your due diligence
But even though Excelsior didn't fit, you still need to implement that Responsive Design somehow, right?
I urge you to take those first steps into Responsive Design, » Today
Start by taking advantage of the resources we put together on the Go Responsive site
Join the Responsive Web Design Group on Yammer and say hi or ask for help
Take a look at some of the really amazing responsive design projects all across GitHub that are being updated every day
and yes you should even wade through 20 million Google search results to learn even more
And, before you know it, you will have made the Responsive web site of your dreams!Next »

Thanks for Listening

Luke Charde

Department of Labor

Craig Patik

Department of Taxation & Finance

Eric Steinborn

Division of Criminal Justice Services

View this presentation online @
bit.ly/excelsiorp
Luke's Introduction to RWD slides

ITS Collaboration

Put a Bunch of Smart People in a Room

Put a Bunch of Smart People in a Room

Typical Development Process

Typical Development Process

Lack of Collaboration

What's the Alternative?

The Web is a Series of Tubes Components

Future-Friendly Websites

Responsive Design Can Be Hard

Is There Anybody Out There?

Foundation

So We Started Making Stuff

Navigation

Responsive Grid

Responsive Grid

Responsive Grid

Responsive Tables

Responsive Tables

Responsive Tables

“That sounds terrific and everything, but how can I possibly use these super amazing, technologically advanced components on MY sites and apps?”

The New Web Framework

Built for New York State

Excelsior is

Excelsior's Goal

Some Key Features

Excelsior is Not Another Standard

Excelsior Makes RWD Easy

Outdated Techniques and Processes

Were Treated Like The Evil Beasts They Are

YOU SHALL NOT PASS!

Hello, Modern Techniques and Processes

What About Browser Support?

Non-major browsers will still "work"

Some People Might be Thinking...

1. Do you REALLY?

IE 6 is Dead

IE 7 Isn't Far Behind

2. Don't Shun the Future for the past

Look Close, You'll See Something

Mobile is Winning, Big

3. If, After The Supporting Evidence...

After The Email Back and Forth...

After The...

Add it to Excelsior Yourself!

RWD Doesn't Have to be Hard

Open-Source

Excelsior is People!

I Did Say "Pre-Beta", Right?

How Do I get Started?

Introductory Videos to RWD

Great Resource Links

Component Showcase

Go Responsive

Today!

Thanks for Listening

Luke Charde

Craig Patik

Eric Steinborn

Questions?