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
Responsive Web Design @ UC San Diego: Sharecase...
Search
bpollak
August 29, 2012
Technology
2
170
Responsive Web Design @ UC San Diego: Sharecase 2012
bpollak
August 29, 2012
Tweet
Share
More Decks by bpollak
See All by bpollak
Guidelines for a Campus Website Refresh
bpollak
0
81
UC San Diego Lync and OneDrive for Business Rollout
bpollak
0
140
Take Your CMS to the Cloud to Lighten the Load
bpollak
0
110
Web Accessibility at UC San Diego
bpollak
0
83
Campus Web Steering Committee (November meeting)
bpollak
0
110
Mobile optimizing your legacy applications
bpollak
0
69
Website Refresh Tips & Strategies
bpollak
0
610
This mobile thing will never catch on
bpollak
0
75
Responsive Design UCSD System Administrator Meeting
bpollak
2
140
Other Decks in Technology
See All in Technology
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
370
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
110
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
460
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
4
360
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
210
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
270
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
180
How to achieve interoperable digital identity across Asian countries
fujie
0
140
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
940
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
1
300
Featured
See All Featured
Visualization
eitanlees
148
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
RailsConf 2023
tenderlove
30
1.2k
Mobile First: as difficult as doing things right
swwweet
224
10k
The Cult of Friendly URLs
andyhume
79
6.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Transcript
Using Responsive Web Design to future proof your Websites &
Apps
Brett Pollak Cristian Horta @brettcpollak @cristian_horta #sharecase12 @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
May 2010 2.19% of visits from mobile Higher Ed. Home
Page Visits
May 2011 4.77% of visits from mobile Higher Ed. Home
Page Visits
May 2012 9.82% of visits from mobile Higher Ed. Home
Page Visits
112% average increase year over year Higher Ed. Home Page
Visits
A little bit of history…
This is so 2009
This is so 2009
None
None
None
None
Find a framework Step 1
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 Step 2
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
We weren’t the only ones trying to solve this problem
Tantek Celik, Dan Cedarholm, Jeremy Keith, Eric Meyer, Ethan Marcotte, Jeffrey Zeldman, Nicole Sullivan, Wendy Chisolm
One of them wrote and article that started a buzz…
The dude even wrote a book about it!
None
Cristian Horta Web Project/Operations Manager, CWO
[email protected]
• RWD, how
does it work? (media queries) • Do’s and Don’ts • How to get started
RESPONSIVE WEB DESIGN AWESOME IS
But, How does it work?
Media Queries CSS3 @media Fluid Layouts +
.HTML .CSS viewport: 1024px
.HTML .CSS viewport: 768px
Fluid Images & Media
Do’s & Dont’s
If you’re considering RWD DO: Analyze and rethink your content
if necessary. “LESS IS MORE” DON’T: Create visual clutter
DON’T AVOID: The use of tables. Especially for layout! DO:
Use DIV’s and CSS instead. IF YOU MUST: Make sure they’re capable of flexing. Use tables for what they were intended to do, tabular data!
Bad layout (using tables):
Good layout (DIV’s and CSS):
So, you want to jump on the bandwagon! We can
help!
CMS + HTML Toolkit Toolkit (HTML Templates) Cost Availability Dynamic
Content Hosted Solution Yes Partially CMS (Content Management System) Help Desk Yes No No Yes Restricted Available for Download $0 ?
On your own? RESPONSIVE WEB DESIGN By Ethan Marcotte alistapart.com
mediaqueri.es FRAMEWORKS Foundation3 Twitter Bootstrap HTML5 Boilerplate
Thank You! Contact us:
[email protected]