A "c A "cont ontent ent-fir -first" appr st" - - PowerPoint PPT Presentation

▶
a c a cont ontent ent fir first appr st approach t ach to
SMART_READER_LITE
LIVE PREVIEW

A "c A "cont ontent ent-fir -first" appr st" - - PowerPoint PPT Presentation

Dec 23, 2023 125 likes •895 views

A "c A "cont ontent ent-fir -first" appr st" approach t ach to o designing r designing responsiv esponsive Drup e Drupal al lay layouts using T outs using Twitt witter Bootstr er Bootstrap ap Megan Miller &

slide-1
SLIDE 1

A "c A "cont

  • ntent

ent-fir

  • first" appr

st" approach t ach to

  • designing r

designing responsiv esponsive Drup e Drupal al lay layouts using T

  • uts using Twitt

witter Bootstr er Bootstrap ap

Megan Miller & Brian Young Stanford University BAD Camp 2012 — November 4, 2012

slide-2
SLIDE 2

Brian Young

Web Designer & Developer Documentation, Design, & Development Stanford University @auracreations brianyoung@stanford.edu

Megan Miller

Web Designer Stanford Web Services Stanford University @meganerinmiller meganem@stanford.edu

slide-3
SLIDE 3

Back in the day...

slide-4
SLIDE 4

But now...

Source: http://mobiforge.com/developing/story/device-diversity and http://jquerymobile.com

an explosion of devices!

slide-5
SLIDE 5

Device diversity

We can't predict the device of the future. How can we know what size of device we are designing for?

slide-6
SLIDE 6

"Mobile" Trends

35% of American adults own

a smartphone

25% of smartphone users say

they only use their phone to browse the web

Source: Pew Internet & American Life Project – http://www.pewinternet.org/Reports/2011/Smartphones.aspx

slide-7
SLIDE 7

In an ideal world...

A custom experience for every device.

slide-8
SLIDE 8

We go responsive.

same content reused for each screen size

Sparkbox website at different browser sizes (from http://mediaqueri.es)

slide-9
SLIDE 9

A typical department at Stanford

Small staff & limited resources

slide-10
SLIDE 10

Centralized Tools and Resources

slide-11
SLIDE 11

We want to make it easy.

slide-12
SLIDE 12

What is Responsive Web Design? (RWD)

slide-13
SLIDE 13

"Responsive"

A design that responds to the size of the browser or device. Let's take a look at an example…

Microsof website at different browser sizes (from http://mediaqueri.es)

slide-14
SLIDE 14

"Design"

We mostly mean layout when referring to "design" in RWD.

slide-15
SLIDE 15

A single code base

Creating one website, and displaying it in different ways.

Atlanta Ballet website at different browser sizes (from http://mediaqueri.es)

slide-16
SLIDE 16

Embrace Flexibility

RWD is a philosophy and a practice. By embracing the inherent flexibility of the web, we can design for the future.

slide-17
SLIDE 17

How do you implement Responsive Web Design?

slide-18
SLIDE 18

Flexible Grid-Based Layout Flexible Images and Media Media Queries

slide-19
SLIDE 19

Flexible Grid

Express your layout proportionally. Be flexible — not pixel-perfect.

25% 50% 25%

slide-20
SLIDE 20

Flexible Media

Flexible containers constrain proportions of images and media by using width:100%; ¡

image fills width

  • f container
slide-21
SLIDE 21

Media Queries

Detect your device screen width, then load different styles.

@media ¡screen ¡and ¡(max-­‑width: ¡480px) ¡{ ¡

.mything ¡{ ¡ width:100%; ¡ } ¡

} ¡ @media ¡screen ¡and ¡(max-­‑width: ¡1200px) ¡{ ¡

.mything ¡{ ¡ width:30%; ¡ } ¡

} ¡

slide-22
SLIDE 22

Flexible Grid-Based Layout Flexible Images and Media Media Queries

slide-23
SLIDE 23

What should you consider when designing responsive websites?

slide-24
SLIDE 24

Responsive Layouts

Are about preserving content hierarchy and legibility.

slide-25
SLIDE 25

Content Hierarchy

What content is most important? Give it emphasis through size and

  • rder.
slide-26
SLIDE 26

Preserve Content Hierarchy

On small devices, what shows up first?

slide-27
SLIDE 27

Legibility

Legibility of text, but also "legibility"

  • f micro-layouts.
slide-28
SLIDE 28

Preserve legibility

Don't let things get too squished or stretched! normal squished

slide-29
SLIDE 29

Preserve legibility

A good solution: normal image on top

slide-30
SLIDE 30

Preserve legibility

An even better solution... Build a responsive theme that never requires a drastic size adjustment of micro-layouts.

desktop size... ~ same size on mobile!

slide-31
SLIDE 31

Preserve legibility

The holy grail?

desktop size... ~ same size on mobile!

slide-32
SLIDE 32

"Content First"

Considering preservation of content hierarchy and legibility as a top priority.

slide-33
SLIDE 33

Back to Stanford...

slide-34
SLIDE 34
slide-35
SLIDE 35
slide-36
SLIDE 36

We started with content

We developed a "layout library" — sets of common layouts that we needed to support.

slide-37
SLIDE 37

Homepage layouts

slide-38
SLIDE 38

Landing page layouts

slide-39
SLIDE 39

Subpage layouts

slide-40
SLIDE 40

Articulating responsive behavior

We created a set of responsive flow wireframes.

slide-41
SLIDE 41

One and two sidebars

slide-42
SLIDE 42

No sidebars

slide-43
SLIDE 43

Content area blocks

slide-44
SLIDE 44

This is complicated!

Can we find a way to support all this sophisticated behavior in a theme? Can we make it easy to implement for site builders and content creators?

slide-45
SLIDE 45

Where do we start?

Use an existing Drupal theme?

  • Zen 5
  • Omega
  • AdaptiveTheme

Build off of a responsive framework?

  • Twitter Bootstrap
  • Zurb
  • Skeleton
slide-46
SLIDE 46

What we were looking for:

  • Preserving content hierarchy and legibility
  • Easy to implement
  • Scalability and flexibility of layout options
  • Support for complex layouts
  • Consideration for Drupal core features and common

layout implementation strategies

  • Consideration of Stanford community context and

technologies

slide-47
SLIDE 47

Build off Twitter Bootstrap

We decided to build our

  • wn theme off of Twitter

Bootstrap, which would provide us with base styles and basic responsive behaviors.

twitter.github.com/bootstrap

slide-48
SLIDE 48

Default styles + responsive behavior

Drupal Theme

Base code that provides

  • Styles and UI elements
  • “Starter” responsive behavior
slide-49
SLIDE 49

Why Twitter Bootstrap?

slide-50
SLIDE 50

and also:

Open source

  • Apache License v2.0
  • Documentation licensed under CC BY 3.0

Community engagement

  • Git: 39,000 stars and 9,000 forks

Handles fixed and fluid layouts

  • 12-column grid system
  • Grid can be nested - infinite grid
slide-51
SLIDE 51

Introducing Open Framework

slide-52
SLIDE 52

Open Framework

A new responsive Drupal theme based on Twitter Bootstrap.

slide-53
SLIDE 53

Open Framework

Sophisticated Easy to use

slide-54
SLIDE 54

Sophisticated responsive behaviors

Open Framework provides support for two conflicting responsive patterns:

  • Row preference
  • Column preference
slide-55
SLIDE 55

Row Preference

Row preference forces elements to bump other elements down when the screen gets smaller. We call these "flow" regions.

slide-56
SLIDE 56

Column Preference

Column preference forces elements to stack side-by-side in columns. We call these "stacked" regions.

slide-57
SLIDE 57

A combination approach

Through a combination

  • f stacked and flow

region behaviors, we can create complex layouts that respond well at every breakpoint.

slide-58
SLIDE 58

New responsive regions

New set of responsive regions that support "flow" and "stacked" behavior. Content placed in specific block regions will respond based on that region’s pre-defined behavior.

slide-59
SLIDE 59

Drupal-specific styles support

Open Framework takes the basics of Twitter Bootstrap and adds in Drupal-friendly, semantic styles. Some examples: ¡ ¡ ¡.more-­‑link ¡ ¡ ¡ ¡.descriptor ¡ ¡ ¡ ¡.border-­‑simple ¡

slide-60
SLIDE 60

Support for common micro-layouts

We have developed a set of styles and implementation strategies for common micro- layouts we refer to as "postcard" layouts.

slide-61
SLIDE 61

Support for common micro-layouts

We have developed a set of styles and implementation strategies for common micro- layouts we refer to as "postcard" layouts.

<div ¡class="postcard-­‑left"> ¡ ¡<div>left</div> ¡ ¡<div>right</div> ¡ </div> ¡

slide-62
SLIDE 62

.postcard-left .po .post stcar ard-right d-right .po .post stcar ard-le d-lef-wr

  • wrap

ap .po .post stcar ard-right d-right-wr

  • wrap

ap

slide-63
SLIDE 63

A truly Drupal style guide

Open Framework has a sortable style guide.

slide-64
SLIDE 64

Responsive order overlay

Responsive order

  • verlay toggle that

shows how content hierarchy will be handled on small screens.

slide-65
SLIDE 65

Let's take a look...

http://openframework.stanford.edu

slide-66
SLIDE 66

Site Building with Open Framework

slide-67
SLIDE 67

Open Framework at Stanford

Open Framework provides the foundation for theme development at Stanford.

slide-68
SLIDE 68

Stanford Framework

Stanford Framework is a subtheme of Open Framework, providing branding and default styles for units at Stanford to use or subtheme.

slide-69
SLIDE 69
slide-70
SLIDE 70
slide-71
SLIDE 71

OFW styled with CSS Injector

slide-72
SLIDE 72

Modules that play nice

  • Block Class
  • Views
  • BEAN
  • Context
  • CSS Injector
slide-73
SLIDE 73

First blocks, then the world!

Region behaviors can be applied to panels regions, display suite layout regions, or even hand- coded regions.

slide-74
SLIDE 74

Using Open Framework

Download version 7.x-2.x on github github.com/SU-SWS/open_framework Visit the Open Framework website at

  • penframework.stanford.edu

If you want to participate, contact us to join the contribution team on Github.

slide-75
SLIDE 75

Places to learn more about RWD:

  • “Responsive Web Design” by Ethan Marcotte (a book apart)

http://www.abookapart.com/products/responsive-web-design

  • LukeW — Multidevice Layout Patterns

http://www.lukew.com and http://www.lukew.com/ff/entry.asp?1514

  • Jeffrey Zeldman — Content First

http://www.zeldman.com/category/content-first/

  • A List Apart — Responsive Web Design

http://www.alistapart.com/articles/responsive-web-design/

  • Ben Callahan — Responsive Retrofitting

http://bencallahan.com/ and https://github.com/bencallahan/rwd-retrofitting

slide-76
SLIDE 76

Connect with us

http://openframework.stanford.edu #openframework

Megan Miller @meganerinmiller meganem@stanford.edu Brian Young @auracreations brianyoung@stanford.edu