際際滷

際際滷Share a Scribd company logo
Using Responsive Web Design
to future proof your Websites & Apps
Brett Pollak
@brettcpollak
#heweb12
#AIM1
The CWO
I work at UC San Diego
right油about油
here
Established in 1960
Main Campus
Medical Center
Scripps Institute
29,000 TRITONS
23,000 Undergrad
4,500 Graduate
1,500 Medical
FIELDS油OF油STUDY
Social油Sciences油(38.1%)
Engineering油(20.3%)
Biology油(18.7%)
Science/Math油(10.3%)
Special/Undeclared油(6.3%)
Humanities油(3.3%)
Arts油(3.0%)
UNDERGRADUATE
COLLEGES
Marshall
Muir
Revelle
Roosevelt
Sixth
Warren
more油slices油=油
more油distributed油IT
Table-based layouts
were awesome!
ucsd.edu 1995-2006
OoohCSS &
JavaScript
ucsd.edu 2006 - 2012
This was a game changer
People love these things
In about 2 months
there will be more
connected phones
than people in the world
5 years ago, the
iPhone didnt exist
now it generates
$100 Billion per year
The iPhone is
bigger than
more tablets will
be sold than PCs
How did we respond in higher ed?
This is so 2009
This is so 2009
Highedweb 2012-2
Highedweb 2012-2
Highedweb 2012-2
Highedweb 2012-2
m.ucsd.edu iPhone App
Android App
One App to rule them all
iPad App
Student油
Affairs
IT
Academic油
Affairs
IT
Housing油&油
Dining
IT
Libraries
IT
Admin油
Computing
Academic油
Computing
Colleges
IT
Highedweb 2012-2
What about all the CMS content?
Piloted with the Libraries
Courtesy:油Brad油Frost
2009 22 Screen Resolutions
Visits to campus home page
2012 523 Screen Resolutions
Device Fragmentation
3,997 different
Android Devices
Device Fragmentation
3,997 different
Android Devices
One of them wrote and article that started a buzz
The dude even wrote a book about it!
.HTML
(structure)
.CSS
(layout)
The solution is based off existing web technologies
CSS3
@media
+
Fluid Layouts Media Queries
Fluid images & media
One website that works on all devices
One website that works on all devices
Highedweb 2012-2
Highedweb 2012-2
Highedweb 2012-2
What about the Mobile Web Framework?
You want me to make THIS
responsive??
Highedweb 2012-2
Responsive design for Websites & Apps
Mobile Framework when RWD wont work
Highedweb 2012-2
Highedweb 2012-2
Retrofit existing design?
Going Responsive, what are your options?
Create new designs?
Pros.
Reduces approval workflow
Little or no change for desktop users
Already familiar with the code
Retrofit existing site
Cons.
No mobile first design
Elements designed without scaling in
mind
Unable to leverage frameworks
Retrofit existing site
Pros.
Can leverage a framework
Plan for how elements work at
different breakpoints
Likely a faster user experience
Create new designs
Cons.
Changing design many need
more approvals
Need to learn something new
Create new designs
Make sure your design looks
good in all resolutions
Add breakpoints when the
design starts to break down
fluid layouts using percentages
Responsive Design
fixed width layouts targeted for
specific devices
Adaptive Design
Highedweb 2012-2
What if all my content
isnt responsive?
Is that OK?
Sure
Tackle the biggest
bang or low hanging
fruit first
Be ready to iterate
Adjust development
cycles to be agile
Does it take more time?
Yes.
It will increase the length of
a project by 32.6345%
There is no more fold
Work with content owners
to pair down content
Will another technique
replace RWD?
At some point, probably.
Downsides
Tables
some solutions
available but no
magic bullets
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
Highedweb 2012-2
Highedweb 2012-2
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油wont油work
3.Deliver油the油frameworks油through油a油central油host油and油
allow油other油IT油units油to油leverage油the油capabilities
4. 酷庄稼温鉛鉛霞
Highedweb 2012-2
Resources
RESPONSIVE WEB DESIGN
By Ethan Marcotte alistapart.com mediaqueri.es
FRAMEWORKS Foundation3 Twitter Bootstrap
HTML5 Boilerplate
Brett Pollak
@brettcpollak
#heweb12
Thank
You!
Ad

Recommended

Graphics1 introduction
Graphics1 introduction
lokesh503
Unit 1 introduction to computers
Unit 1 introduction to computers
ANDREY AGUDELO
Effectively talking to kids about engineering
Effectively talking to kids about engineering
DiscoverE
A Mobile Web Framework for the UC System
A Mobile Web Framework for the UC System
Brett Pollak
Charging Precautions
Charging Precautions
Edwin Pitty Sanchez
犢犖犢仰犖犖朽権犖ム攻釣姑┨犖犢犖о鹸犖犖犢
犢犖犢仰犖犖朽権犖ム攻釣姑┨犖犢犖о鹸犖犖犢
Pimporn Ploy
Ruptura de la unidad religiosa (1)
Carolina Martinez
犖犖÷幻犖犖犖犢仰犖犖ム厳犖犖
犖犖÷幻犖犖犖犢仰犖犖ム厳犖犖
Pimporn Ploy
UC San Diego: How we communicate during a campus emergency
UC San Diego: How we communicate during a campus emergency
Brett Pollak
Supporting all devices with our websites & apps.
Supporting all devices with our websites & apps.
Brett Pollak
Efficient Reading
Efficient Reading
Edwin Pitty Sanchez
Traffic Pattern Operations
Traffic Pattern Operations
Edwin Pitty Sanchez
UCSD Mobile
UCSD Mobile
Brett Pollak
Clone
Clone
Drgdfh Lala
Practical Test Standards - Simple Version for PPL
Practical Test Standards - Simple Version for PPL
Edwin Pitty Sanchez
亠从亳 1
亠从亳 1
Victor Kulikov
亠从亳 3 弌亠亞仄亠仆舒亳
亠从亳 3 弌亠亞仄亠仆舒亳
Victor Kulikov
Photography Experience
Photography Experience
Victor Badolato Athayde
Airport Operations & Traffic Pattern Operations
Airport Operations & Traffic Pattern Operations
Edwin Pitty Sanchez
Forces acting in an airplane edwin pitty s.
Forces acting in an airplane edwin pitty s.
Edwin Pitty Sanchez
Distributed cat herding
Distributed cat herding
Jilles van Gurp
Physical Terrain Modeling in a Digital Age
Physical Terrain Modeling in a Digital Age
Watson Mary
The Future is Responsive
The Future is Responsive
ZURB
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
mStoner, Inc.
3D 際際滷show Transitions: Adding OpenGL-Accelerated Transitional Effects For ...
3D 際際滷show Transitions: Adding OpenGL-Accelerated Transitional Effects For ...
Alexandro Colorado
User Driven Software Architecture
User Driven Software Architecture
Simon Guest
Responsive design lunch and learn
Responsive design lunch and learn
Ricardo Queiroz
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
MoodLabs
All these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and us
Sally Lait

More Related Content

Viewers also liked (13)

犖犖÷幻犖犖犖犢仰犖犖ム厳犖犖
犖犖÷幻犖犖犖犢仰犖犖ム厳犖犖
Pimporn Ploy
UC San Diego: How we communicate during a campus emergency
UC San Diego: How we communicate during a campus emergency
Brett Pollak
Supporting all devices with our websites & apps.
Supporting all devices with our websites & apps.
Brett Pollak
Efficient Reading
Efficient Reading
Edwin Pitty Sanchez
Traffic Pattern Operations
Traffic Pattern Operations
Edwin Pitty Sanchez
UCSD Mobile
UCSD Mobile
Brett Pollak
Clone
Clone
Drgdfh Lala
Practical Test Standards - Simple Version for PPL
Practical Test Standards - Simple Version for PPL
Edwin Pitty Sanchez
亠从亳 1
亠从亳 1
Victor Kulikov
亠从亳 3 弌亠亞仄亠仆舒亳
亠从亳 3 弌亠亞仄亠仆舒亳
Victor Kulikov
Photography Experience
Photography Experience
Victor Badolato Athayde
Airport Operations & Traffic Pattern Operations
Airport Operations & Traffic Pattern Operations
Edwin Pitty Sanchez
Forces acting in an airplane edwin pitty s.
Forces acting in an airplane edwin pitty s.
Edwin Pitty Sanchez
犖犖÷幻犖犖犖犢仰犖犖ム厳犖犖
犖犖÷幻犖犖犖犢仰犖犖ム厳犖犖
Pimporn Ploy
UC San Diego: How we communicate during a campus emergency
UC San Diego: How we communicate during a campus emergency
Brett Pollak
Supporting all devices with our websites & apps.
Supporting all devices with our websites & apps.
Brett Pollak
Practical Test Standards - Simple Version for PPL
Practical Test Standards - Simple Version for PPL
Edwin Pitty Sanchez
亠从亳 3 弌亠亞仄亠仆舒亳
亠从亳 3 弌亠亞仄亠仆舒亳
Victor Kulikov
Airport Operations & Traffic Pattern Operations
Airport Operations & Traffic Pattern Operations
Edwin Pitty Sanchez
Forces acting in an airplane edwin pitty s.
Forces acting in an airplane edwin pitty s.
Edwin Pitty Sanchez

Similar to Highedweb 2012-2 (20)

Distributed cat herding
Distributed cat herding
Jilles van Gurp
Physical Terrain Modeling in a Digital Age
Physical Terrain Modeling in a Digital Age
Watson Mary
The Future is Responsive
The Future is Responsive
ZURB
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
mStoner, Inc.
3D 際際滷show Transitions: Adding OpenGL-Accelerated Transitional Effects For ...
3D 際際滷show Transitions: Adding OpenGL-Accelerated Transitional Effects For ...
Alexandro Colorado
User Driven Software Architecture
User Driven Software Architecture
Simon Guest
Responsive design lunch and learn
Responsive design lunch and learn
Ricardo Queiroz
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
MoodLabs
All these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and us
Sally Lait
20210325 jim spohrer future ai v11
20210325 jim spohrer future ai v11
home
An Introduction to Responsive Design
An Introduction to Responsive Design
Liam Richardson
An Introduction to Responsive Design
An Introduction to Responsive Design
Nexer Digital
Syphens gale
Syphens gale
Nath Cletomarc Joernaldo
CSE.ppt
CSE.ppt
YehualashetBelayneh
PowerAyupppt.ppt
PowerAyupppt.ppt
YehualashetBelayneh
engineering.ppt
engineering.ppt
YehualashetBelayneh
computer.ppt
computer.ppt
YehualashetBelayneh
CSE.ppt
CSE.ppt
NandishAC
CSE.ppt
CSE.ppt
JohnFelix62
Postdesktop Usability
Postdesktop Usability
Doug Gapinski
Distributed cat herding
Distributed cat herding
Jilles van Gurp
Physical Terrain Modeling in a Digital Age
Physical Terrain Modeling in a Digital Age
Watson Mary
The Future is Responsive
The Future is Responsive
ZURB
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
mStoner, Inc.
3D 際際滷show Transitions: Adding OpenGL-Accelerated Transitional Effects For ...
3D 際際滷show Transitions: Adding OpenGL-Accelerated Transitional Effects For ...
Alexandro Colorado
User Driven Software Architecture
User Driven Software Architecture
Simon Guest
Responsive design lunch and learn
Responsive design lunch and learn
Ricardo Queiroz
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
MoodLabs
All these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and us
Sally Lait
20210325 jim spohrer future ai v11
20210325 jim spohrer future ai v11
home
An Introduction to Responsive Design
An Introduction to Responsive Design
Liam Richardson
An Introduction to Responsive Design
An Introduction to Responsive Design
Nexer Digital
Postdesktop Usability
Postdesktop Usability
Doug Gapinski
Ad

Recently uploaded (20)

Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
Python Conference Singapore - 19 Jun 2025
Python Conference Singapore - 19 Jun 2025
ninefyi
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my bill
stijn40
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
Securing AI - There Is No Try, Only Do!.pdf
Securing AI - There Is No Try, Only Do!.pdf
Priyanka Aash
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
janeliewang985
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdf
Priyanka Aash
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Impelsys Inc.
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Safe Software
From Manual to Auto Searching- FME in the Driver's Seat
From Manual to Auto Searching- FME in the Driver's Seat
Safe Software
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Nilesh Gule
Python Conference Singapore - 19 Jun 2025
Python Conference Singapore - 19 Jun 2025
ninefyi
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
UserCon Belgium: Honey, VMware increased my bill
UserCon Belgium: Honey, VMware increased my bill
stijn40
Curietech AI in action - Accelerate MuleSoft development
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
Securing AI - There Is No Try, Only Do!.pdf
Securing AI - There Is No Try, Only Do!.pdf
Priyanka Aash
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
GenAI Opportunities and Challenges - Where 370 Enterprises Are Focusing Now.pdf
Priyanka Aash
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
AI vs Human Writing: Can You Tell the Difference?
AI vs Human Writing: Can You Tell the Difference?
Shashi Sathyanarayana, Ph.D
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
Cluster-Based Multi-Objective Metamorphic Test Case Pair Selection for Deep N...
janeliewang985
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
AI VIDEO MAGAZINE - June 2025 - r/aivideo
AI VIDEO MAGAZINE - June 2025 - r/aivideo
1pcity Studios, Inc
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdf
Priyanka Aash
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Impelsys Inc.
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Safe Software
From Manual to Auto Searching- FME in the Driver's Seat
From Manual to Auto Searching- FME in the Driver's Seat
Safe Software
Ad

Highedweb 2012-2