WEB STANDARDS FOR WEBSPARKWebCamp 2016 | July 12th

Michael Gilardi & Daniel Garcia-Mont

WELCOME TO WEBCAMP 2016!

Homer Simpson, Director School of Sustainable Global Innovation

Homer will be our guide through the Web Standards, and possibly life.

Sit back, relax - you have 3 seconds to finish your breakfast.

Mmm… Donuts.

WEB STANDARDS, AHOI

One of the many ways Arizona State University advances the university mission is through the construction of a best-in-class, cohesive and intuitive web experience for the diverse audiences it serves.

Through the implementation of data-driven web guidelines and standards, the university deploys highly effective strategies for information architecture, design, web analytics, search engine optimization and security.

Guidelines without a solution. DOH!

THE HITCHHIKER’S GUIDE TO WEBSPARK

What on is Webspark?

➤ It exists to innovate a solution

➤ Easily Web Standardize a site

➤ Includes global header & footer

You want contribution? I’ll give you contribution!

See github.com/ASU/webspark-drops-drupal7 to contribute back to Webspark or report an issue

Check out webspark.asu.edu for documentation and help

SITE BUILDERS, REJOICE!

In 15 minutes, a working sandbox site can be spun-up with:

➤ Working ASURITE authentication

➤ Extendable, Web Standards-compliant theme

➤ Stylized mega menu and super footer

➤ Accessibility compliance for Americans with Disabilities Act

All that is missing is your content!Add degree pages, hero images, contact forms and more.

DONUT STACK! OR TECHNOLOGY... THAT WORKS, TOO.

➤ Derived from Kalatheme and Panopoly

➤ Panels-based, drag and drop interface

➤ Based on Bootstrap

➤ HTML/CSS/JS framework

➤ Containers, rows and columns

➤ Varying column width and nesting columns

➤ Responsive images & links

➤ Headings (use heading hierarchy!)

CHANGE?! I DON’T WANT TO CHANGE!

Great! The Web Standards don’t change, they evolve!

With Webspark: ➤ Easily embrace the evolution by having updates come to you

➤ Use CSS specificity - don’t fight with existing code, use layering

Fantastic! How do I find out about all that’s happening? ➤ Subscribe to the Webspark mailing list

➤ Follow the repository on GitHub

➤ Join us on the ASU Web Standards Slack channel

WE’RE ALL WINNERS HERE. REALLY.

All kidding aside: If you’ve got your own solution to share, please host it on GitHub and let us know!

➤ WordPress Theme

➤ Django Theme

➤ Jykell Theme

➤ Webspark and Slimspark To come… Webspark 8

ENOUGH TALKING. LET’S GET BUILDING!

Since Homer has never developed a website before, we’re going to make one for him!

To help Homer out, we’re going to: ➤ Create a homepage with a Hero image and

Call-to-Action buttons

➤ Make an About page with an ASU Spotlight, map and contact form

➤ Import degrees programs and news articles

➤ Extend Webspark by using the CLAS Directory module