Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UC San Diego's move to responsive web design
Search
bpollak
September 06, 2012
Technology
2
100
UC San Diego's move to responsive web design
bpollak
September 06, 2012
Tweet
Share
More Decks by bpollak
See All by bpollak
Guidelines for a Campus Website Refresh
bpollak
0
71
UC San Diego Lync and OneDrive for Business Rollout
bpollak
0
130
Take Your CMS to the Cloud to Lighten the Load
bpollak
0
100
Web Accessibility at UC San Diego
bpollak
0
76
Campus Web Steering Committee (November meeting)
bpollak
0
110
Mobile optimizing your legacy applications
bpollak
0
63
Website Refresh Tips & Strategies
bpollak
0
530
This mobile thing will never catch on
bpollak
0
61
Responsive Design UCSD System Administrator Meeting
bpollak
2
140
Other Decks in Technology
See All in Technology
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
280
Azure AI ことはじめ
tsubakimoto_s
0
130
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
AWSでRAGを作る法方
sonoda_mj
1
140
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
What's in a price? How to price your products and services
michaelherold
239
11k
Typedesign – Prime Four
hannesfritz
37
2.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Web Components: a chance to create the future
zenorocha
307
41k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Scaling GitHub
holman
458
140k
Transcript
UC San Diego’s move to Responsive Web Design
Brett Pollak @brettcpollak #mwfcon @campusweboffice
The CWO
People love these things
In about 2 months… …there will be more connected phones
than people in the world
5 years ago, the iPhone didn’t exist… …now it generates
$100 Billion per year
The iPhone is bigger than Microsoft
By the fall of 2013 more tablets will be sold
than PC’s
UCSD’s History with MWF…
Why we chose MWF Find a framework
None
Student Affairs IT Academic Affairs IT Housing & Dining IT
Libraries IT Admin Computing Academic Computing Student Affairs IT Framework that required data feeds had downsides
Student Affairs IT Academic Affairs IT Housing & Dining IT
Libraries IT Admin Computing Academic Computing Student Affairs IT
None
We launched m.ucsd.edu
Replace the App Replace the App
iOS App: powered by m.ucsd.edu
m.ucsd.edu iPhone App
iPad App
Android App: powered by m.ucsd.edu
uxt.ucsd.edu
None
What about all the CMS content?
Piloted with the Libraries
Courtesy: Brad Frost
2009 22 Screens Visits to campus home page 2012 523
Screens
Device Fragmentation 3,997 different Android Devices
Device Fragmentation 3,997 different Android Devices
People smarter than us we’re tackling this problem…
The dude even wrote a book about it!
Resources RESPONSIVE WEB DESIGN By Ethan Marcotte alistapart.com mediaqueri.es FRAMEWORKS
Foundation3 Twitter Bootstrap HTML5 Boilerplate
.HTML (structure) .CSS (layout) The solution is based off existing
web technologies
CSS3 @media + Fluid Layouts Media Queries
Fluid images & media
None
One website that works on all devices
One website that works on all devices
None
What about the Mobile Web Framework?
You want me to make THIS responsive??
None
Responsive design for Websites & Apps Mobile Framework when RWD
won’t work
None
RWD Works for apps too
None
RWD Downsides
Images Devices with smaller resolutions still need to download the
full image
RESS Responsive Design + Server Side Components Offload some of
the work to the server…
The Idea is to: Deliver certain components based on the
device, rather than loading all at once for every device. RWD .js .jpg .php
None
1.- Use a Responsive Web Design framework as the primary
way to deliver websites & web apps 2.- Use a Mobile Framework to augment when responsive design won’t work 3.-Deliver the frameworks through a central host and allow other IT units to leverage the capabilities Our Philosophy…