Responsive Design for University Websites

Slide 1

Slide 1 text

1 #AIwebcast Brett Pollak | University of California, San Diego | [email protected] CREATING A RESPONSIVE DESIGN FRAMEWORK FOR UNIVERSITY WEBSITES

Slide 2

Slide 2 text

LEARNING OUTCOME After participating… 2 …you will be able to begin applying responsive design techniques to your website.

Slide 3

Slide 3 text

3 @brettcpollak • Who I am and my point of view • Web dev evolution • Options to support mobile devices • Strategy to support mobile devices • Responsive web design overview / why? • Taking the next steps • Frameworks • Design considerations and trends • Technical considerations • Tips when taking the plunge AGENDA

Slide 4

Slide 4 text

4 #AIwebcast WHO I AM AND MY POINT OF VIEW

Slide 5

Slide 5 text

5 @brettcpollak • Director, Campus Web Office (CWO) at UC San Diego • 4 ½ years at UC San Diego • Web Development field since ’01 • 3 years supporting mobile devices • @brettcpollak on the Twitters WHO AM I?

Slide 6

Slide 6 text

6 @brettcpollak EXPERIENCE DELIVERING TO HIGHER EDUCATION • High Ed Web • EduWeb • Eduniverse • Higher Ed Live • LINK Journal for Higher Education WHERE I’VE DONE STUFF

Slide 7

Slide 7 text

7 @brettcpollak ABOUT THE CWO… Chancellor Business Affairs Admin Computing CWO Academic Affairs Student Affairs Health Sciences Communications

Slide 8

Slide 8 text

8 @brettcpollak CAMPUS WEB OFFICE PERSONNEL • Me (Director) • 2 Web Project Managers • 1 Technical Lead • 2 Web Programmers • 1 UX Designer • 2 student workers ABOUT THE CWO…

Slide 9

Slide 9 text

9 @brettcpollak OUR MODEL AND PHILOSOPHY • Funded centrally by state money - No recharge • Emphasis on self-service, self-sustaining technology • We provide the tools, training, and frameworks • Clients provide the content and maintenance ABOUT THE CWO…

Slide 10

Slide 10 text

10 #AIwebcast WEB DEVELOPMENT EVOLUTION

Slide 11

Slide 11 text

11 @brettcpollak EARLY 1990S WEB DESIGN

Slide 12

Slide 12 text

12 @brettcpollak • Single text column using HTML • Mostly text and hyperlinks • Embedded images around 1994 EARLY 1990S WEB DESIGN

Slide 13

Slide 13 text

13 @brettcpollak • Table-based layouts allowed for multiple columns • Websites were a combination of sliced images and HTML MID 1990S WEB DESIGN ucsd.edu in 1995

Slide 14

Slide 14 text

14 @brettcpollak LATE 1990 AND 2000S WEB DESIGN • Animation • Flash • CSS/JavaScript • Web 2.0!

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

17 @brettcpollak In about 2 months, there will be more connected phones than people in the world.

Slide 18

Slide 18 text

18 @brettcpollak 6 years ago, the iPhone didn’t exist. Now it generates $100 billion per year.

Slide 19

Slide 19 text

19 @brettcpollak The iPhone is bigger than Microsoft.

Slide 20

Slide 20 text

20 @brettcpollak Over half of prospective students researched college choices on their mobile phone.

Slide 21

Slide 21 text

21 @brettcpollak Over the past year we’ve averaged a .5% increase in mobile traffic per month to the campus home page.

Slide 22

Slide 22 text

22 @brettcpollak About 16% of the traffic to the UCSD home page is from mobile devices.

Slide 23

Slide 23 text

23 @brettcpollak About 25% of the traffic to the UCSD Student Portal is from mobile devices.

Slide 24

Slide 24 text

24 #AIwebcast HOW DID UCSD RESPOND TO MOBILE?

Slide 25

Slide 25 text

We need an iPhone app?

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

What’s with this Android?

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

31 @brettcpollak By late Fall, more tablets will be sold than PCs.

Slide 32

Slide 32 text

Why is the App so small on my New iPad?

Slide 33

Slide 33 text

33 #AIwebcast OPTIONS TO SUPPORT MOBILE DEVICES

Slide 34

Slide 34 text

m.university.edu Responsive website

Slide 35

Slide 35 text

35 @brettcpollak • Built using Objective C (Apple) or Java (Android) • User downloads app to the phone • Deploying Apps means having staff learn the technology that powers each platform • Can use a code builder such as Titanium or Phonegap APP STORE

Slide 36

Slide 36 text

36 @brettcpollak (m.university.edu) • Separate site where layout and content are geared specifically to mobile devices • HTML, CSS, JavaScript usually designed for smaller screen sizes • Frameworks include Kurogu, Mobile Web Framework, JQuery Mobile, etc. MOBILE SITE

Slide 37

Slide 37 text

37 @brettcpollak • One website who’s layout automatically conforms to the resolution of the device accessing the site • One set of code to maintain • Cross platform: works on all modern browsers • Frameworks include Twitter Bootstrap, Foundation3, HTML5 Boilerplate, etc. RESPONSIVE WEBSITE

Slide 38

Slide 38 text

LEARNING OUTCOME POLL 38 What does your university currently support?

Slide 39

Slide 39 text

39 #AIwebcast STRATEGY TO SUPPORT MOBILE DEVICES

Slide 40

Slide 40 text

40 @brettcpollak SUPPORTING MOBILE DEVICES ISN’T A “ONE TECHNOLOGY FITS ALL” PROPOSITION. • What do your users expect? • What is the content you are trying to optimize for mobile? - Text vs. Tools • Who is supporting the mobile initiative on your campus? • What is the skillset of your team? DEVELOPING A MOBILE STRATEGY

Slide 41

Slide 41 text

41 @brettcpollak UCSD’S MOBILE STRATEGY • We had an App so our users expect an App • Distributed IT structure lends itself to a self services model for building mobile Apps • Each IT shop has a different technology preference (Java, .NET, PHP, etc.) • Mobile Web Framework (MWF) for building mobile Web Apps DEVELOPING A MOBILE STRATEGY

Slide 42

Slide 42 text

42 @brettcpollak Student Affairs IT Academic Affairs IT Housing & Dining IT Libraries IT Admin Computing Academic Computing Colleges IT

Slide 43

Slide 43 text

43 @brettcpollak m.ucsd.edu iPhone App Android App One App to rule them all

Slide 44

Slide 44 text

LEARNING OUTCOME QUESTIONS 44

Slide 45

Slide 45 text

45 #AIwebcast RESPONSIVE WEB DESIGN OVERVIEW

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

47 @brettcpollak This guy had a great idea…

Slide 48

Slide 48 text

48 @brettcpollak This book changed our thinking.

Slide 49

Slide 49 text

fluid layouts using percentages Responsive Design fixed width layouts targeted for specific devices Adaptive Design

Slide 50

Slide 50 text

50 @brettcpollak Let’s look at an example.

Slide 51

Slide 51 text

51 @brettcpollak .HTML (structure) .CSS (layout) The solution is based off existing web technologies.

Slide 52

Slide 52 text

52 @brettcpollak CSS3 @media + Fluid Layouts Media Queries

Slide 53

Slide 53 text

53 @brettcpollak Fluid images and media

Slide 54

Slide 54 text

54 @brettcpollak • Percentages, not pixels • For fonts, use “Ems” instead of point sizes • Media queries – Secret sauce for changing the page layout DIFFERENCES FROM TRADITIONAL WEB DEV

Slide 55

Slide 55 text

55 @brettcpollak INTRODUCED IN CSS2 WITH PRINT STYLESHEETS MEDIA QUERIES

Slide 56

Slide 56 text

56 @brettcpollak CSS3 MEDIA QUERIES • Height and width of the browser window • Device width and height • Orientation of the device - Landscape vs. portrait • Resolution MEDIA QUERIES

Slide 57

Slide 57 text

57 @brettcpollak WAYS TO CALL MEDIA QUERIES Head of the HTML page MEDIA QUERIES

Slide 58

Slide 58 text

58 @brettcpollak WAYS TO CALL MEDIA QUERIES In a CSS file @import url(mobile.css) (max-width:480px); MEDIA QUERIES

Slide 59

Slide 59 text

59 @brettcpollak WAYS TO CALL MEDIA QUERIES In a CSS file @media (max-width: 480px) {header { width:100%;} #somethingelse {display: none;} MEDIA QUERIES

Slide 60

Slide 60 text

60 #AIwebcast WHY GO RESPONSIVE?

Slide 61

Slide 61 text

61 @brettcpollak 2009 22 Screen Resolutions Visits to campus home page 2012 523 Screen Resolutions

Slide 62

Slide 62 text

62 @brettcpollak Device Fragmentation 3,997 different Android Devices

Slide 63

Slide 63 text

63 @brettcpollak Device Fragmentation 3,997 different Android Devices

Slide 64

Slide 64 text

64 @brettcpollak • SEO friendly: duplicate content isn’t indexed twice like with mobile site • Link friendly: sending or sharing links are optimized for the device the recipient uses • Optimizes website not just for mobile but for larger screens RESPONSIVE WEBSITE

Slide 65

Slide 65 text

65 @brettcpollak • Takes more time to develop and test • No bullet proof solution for tables • Load time on smaller devices can be a concern as device needs to download all the assets – RESS and server side detection are maturing DISADVANTAGES OF RWD

Slide 66

Slide 66 text

66 #AIwebcast OPTIONS FOR GOING RESPONSIVE

Slide 67

Slide 67 text

67 @brettcpollak GOING RESPONSIVE, WHAT ARE YOUR OPTIONS? Retrofit existing design? Create new designs? OPTIONS

Slide 68

Slide 68 text

68 @brettcpollak RETROFIT EXISTING SITE PROS • Reduces approval workflow • Little or no change for desktop users • Already familiar with the code

Slide 69

Slide 69 text

69 @brettcpollak RETROFIT EXISTING SITE CONS • No “mobile first” design • Elements designed without scaling in mind • Unable to leverage frameworks

Slide 70

Slide 70 text

70 @brettcpollak • Translate pixels into percentages • Use graceful degradation to insert media queries when your design starts to break down RETROFIT EXISTING DESIGNS

Slide 71

Slide 71 text

960 Pixels

Slide 72

Slide 72 text

.ela-container { float: left; width: 30%; height: 162px; padding: 0 9px 0 0; background: #fefff9; }

Slide 73

Slide 73 text

@media screen and (max-width: 964px) .ela-container { float: left; height: 162px; margin: 0 4.5% 0 0; padding: 0; width: 30%; border: 1px solid #cbcbc3; -webkit-border-radius: 5px; border-radius: 5px; background: -webkit-linear- gradient(top,#fff 0,#eaeaea 100 %); }

Slide 74

Slide 74 text

74 @brettcpollak CREATE NEW DESIGNS PROS • Can leverage a framework • Plan for how elements work at different breakpoints • Likely a faster user experience

Slide 75

Slide 75 text

75 @brettcpollak CREATE NEW DESIGNS CONS • Changing design may need more approvals • Need to learn something new

Slide 76

Slide 76 text

LEARNING OUTCOME QUESTIONS 76

Slide 77

Slide 77 text

77 #AIwebcast FRAMEWORKS

Slide 78

Slide 78 text

78 @brettcpollak TWO PRIMARY TYPES • Grid layout frameworks – 1140 CSS Grid – HTML5 Boilerplate • Grid layout + UI Library – Twitter Bootstrap – Foundation 3 RESPONSIVE FRAMEWORKS

Slide 79

Slide 79 text

79 @brettcpollak • Responsive grid • Normalizing CSS • Polyfills for older browsers WHAT IT TYPICALLY INCLUDES GRID LAYOUT FRAMEWORKS

Slide 80

Slide 80 text

80 @brettcpollak WHAT IT TYPICALLY INCLUDES • Responsive grid • Normalizing CSS • Polyfills for older browsers • UI libraries – Navigation – Form elements – Etc. GRID LAYOUT FRAMEWORKS + UI LIBRARY

Slide 81

Slide 81 text

responsive.vermilion.com/compare.php

Slide 82

Slide 82 text

82 #AIwebcast DESIGN CONSIDERATIONS AND TRENDS

Slide 83

Slide 83 text

Toggle nav

Slide 84

Slide 84 text

Toggle nav

Slide 85

Slide 85 text

Toggle nav

Slide 86

Slide 86 text

Toggle nav

Slide 87

Slide 87 text

Toggle nav

Slide 88

Slide 88 text

Toggle nav

Slide 89

Slide 89 text

Select-menu nav

Slide 90

Slide 90 text

Select-menu nav

Slide 91

Slide 91 text

Select-menu nav

Slide 92

Slide 92 text

Anchor nav

Slide 93

Slide 93 text

Anchor nav

Slide 94

Slide 94 text

Slide-out nav

Slide 95

Slide 95 text

Slide-out nav

Slide 96

Slide 96 text

Slide-out nav

Slide 97

Slide 97 text

Slide-out nav

Slide 98

Slide 98 text

Slide-out nav

Slide 99

Slide 99 text

Slide-out nav

Slide 100

Slide 100 text

Combination

Slide 101

Slide 101 text

Combination

Slide 102

Slide 102 text

Combination

Slide 103

Slide 103 text

Stacking Navigation

Slide 104

Slide 104 text

Stacking Navigation

Slide 105

Slide 105 text

Stacking Navigation

Slide 106

Slide 106 text

Stacking Navigation

Slide 107

Slide 107 text

Sub-nav drop

Slide 108

Slide 108 text

Sub-nav drop

Slide 109

Slide 109 text

Sub-nav drop

Slide 110

Slide 110 text

110 #AIwebcast LINKING TO YOUR M.UNIVERSITY.EDU SITE FROM RESPONSIVE HOME PAGE

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

bradfrost.github.com/this-is-responsive/patterns.html

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

119 #AIwebcast COMMON RESPONSIVE WIDGETS

Slide 120

Slide 120 text

Responsive image rotator

Slide 121

Slide 121 text

Responsive video resizer

Slide 122

Slide 122 text

Responsive headings

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

125 #AIwebcast INSPIRATION

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

128 #AIwebcast TECHNICAL CONSIDERATIONS

Slide 129

Slide 129 text

129 @brettcpollak • Responsive Design is just CSS and JavaScript so it should work in your CMS. • If retrofitting existing templates, show content owners their site on mobile. • Fix stuff that’s broken. RWD AND YOUR CMS

Slide 130

Slide 130 text

130 @brettcpollak Make templates available.

Slide 131

Slide 131 text

131 @brettcpollak Make templates available.

Slide 132

Slide 132 text

132 #AIwebcast TIPS WHEN TAKING THE PLUNGE

Slide 133

Slide 133 text

133 @brettcpollak • Make sure your design looks good in all resolution. • Add breakpoints when the design starts to break down. GETTING STARTED

Slide 134

Slide 134 text

134 @brettcpollak GETTING STARTED WHAT IF ALL MY CONTENT ISN’T RESPONSIVE? IS THAT OK? Sure! Tackle the biggest bang or low-hanging fruit first.

Slide 135

Slide 135 text

135 @brettcpollak • Be ready to iterate. • Adjust development cycles to be agile. GETTING STARTED

Slide 136

Slide 136 text

136 @brettcpollak GETTING STARTED DOES IT TAKE MORE TIME? Yes. It will increase the length of a project by 32.6345% 

Slide 137

Slide 137 text

137 @brettcpollak • There is no more “fold.” • Work with content owners to pare down content. GETTING STARTED

Slide 138

Slide 138 text

LEARNING OUTCOME QUESTIONS 138

Slide 139

Slide 139 text

LEARNING OUTCOME EVALUATION Please remember to complete the event evaluation. Your comments will help us continually improve the quality of our programs. Thank you! Follow us: © Copyright 2013 Academic Impressions 139 http://www.surveymonkey.com/s/Z6R3MN2