SlideShare a Scribd company logo
Gilbane 2014Tim Wright, @csskarma
USC dot EDU
Responsive Design Practices & Opinions
Gilbane 2014Tim Wright, @csskarma
In the beginning…
Gilbane 2014Tim Wright, @csskarma
The responsive solution.
Gilbane 2014Tim Wright, @csskarma
Where we stumbled.
Gilbane 2014Tim Wright, @csskarma
Where we are
still stumbling.
Gilbane 2014Tim Wright, @csskarma
Where we are
succeeding.
Gilbane 2014Tim Wright, @csskarma
Thank you.

More Related Content

More from Tim Wright

Keys to Responsive Design
Keys to Responsive DesignKeys to Responsive Design
Keys to Responsive Design
Tim Wright
 
Bringing Environmental Design to the Web
Bringing Environmental Design to the WebBringing Environmental Design to the Web
Bringing Environmental Design to the Web
Tim Wright
 
Environmental Design Vol. 2
Environmental Design Vol. 2Environmental Design Vol. 2
Environmental Design Vol. 2
Tim Wright
 
Environmental Design on The Web
Environmental Design on The WebEnvironmental Design on The Web
Environmental Design on The Web
Tim Wright
 
Form design
Form designForm design
Form design
Tim Wright
 
Color & Typography
Color & TypographyColor & Typography
Color & Typography
Tim Wright
 
Design process
Design processDesign process
Design process
Tim Wright
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
Tim Wright
 
Implementing a Scalable Mobile Strategy
Implementing a Scalable Mobile StrategyImplementing a Scalable Mobile Strategy
Implementing a Scalable Mobile Strategy
Tim Wright
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
Tim Wright
 
Mobile, Media & Touch
Mobile, Media & TouchMobile, Media & Touch
Mobile, Media & Touch
Tim Wright
 
HTML 5: The Future of the Web
HTML 5: The Future of the WebHTML 5: The Future of the Web
HTML 5: The Future of the Web
Tim Wright
 
Native Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsNative Device vs. Mobile Web Applications
Native Device vs. Mobile Web Applications
Tim Wright
 
Standardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web StandardsStandardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web Standards
Tim Wright
 

More from Tim Wright (14)

Keys to Responsive Design
Keys to Responsive DesignKeys to Responsive Design
Keys to Responsive Design
 
Bringing Environmental Design to the Web
Bringing Environmental Design to the WebBringing Environmental Design to the Web
Bringing Environmental Design to the Web
 
Environmental Design Vol. 2
Environmental Design Vol. 2Environmental Design Vol. 2
Environmental Design Vol. 2
 
Environmental Design on The Web
Environmental Design on The WebEnvironmental Design on The Web
Environmental Design on The Web
 
Form design
Form designForm design
Form design
 
Color & Typography
Color & TypographyColor & Typography
Color & Typography
 
Design process
Design processDesign process
Design process
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
 
Implementing a Scalable Mobile Strategy
Implementing a Scalable Mobile StrategyImplementing a Scalable Mobile Strategy
Implementing a Scalable Mobile Strategy
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Mobile, Media & Touch
Mobile, Media & TouchMobile, Media & Touch
Mobile, Media & Touch
 
HTML 5: The Future of the Web
HTML 5: The Future of the WebHTML 5: The Future of the Web
HTML 5: The Future of the Web
 
Native Device vs. Mobile Web Applications
Native Device vs. Mobile Web ApplicationsNative Device vs. Mobile Web Applications
Native Device vs. Mobile Web Applications
 
Standardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web StandardsStandardizing the Web: A Look into the Why of Web Standards
Standardizing the Web: A Look into the Why of Web Standards
 

Recently uploaded

cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
GNAMBIKARAO
 
KubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial IntelligentKubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial Intelligent
Emre Gündoğdu
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
APNIC
 
Decentralized Justice in Gaming and Esports
Decentralized Justice in Gaming and EsportsDecentralized Justice in Gaming and Esports
Decentralized Justice in Gaming and Esports
Federico Ast
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
Infosec train
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
thezot
 
Bangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
Bangalore Call Girls 9079923931 With -Cuties' Hot Call GirlsBangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
Bangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
narwatsonia7
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
APNIC
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
dtagbe
 

Recently uploaded (13)

cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
 
KubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial IntelligentKubeCon & CloudNative Con 2024 Artificial Intelligent
KubeCon & CloudNative Con 2024 Artificial Intelligent
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
 
Decentralized Justice in Gaming and Esports
Decentralized Justice in Gaming and EsportsDecentralized Justice in Gaming and Esports
Decentralized Justice in Gaming and Esports
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
 
Bangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
Bangalore Call Girls 9079923931 With -Cuties' Hot Call GirlsBangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
Bangalore Call Girls 9079923931 With -Cuties' Hot Call Girls
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
 

USC dot EDU: A Responsive Design Case Study

Editor's Notes

  1. Failed (with confidence) a statistics test in College - drank in the closet - learned how to fail
  2. WE HAD MOBILE SITES!!! USC Palm Pre story with UA detection What are we doing here???? Changing HTML for style…
  3. Flex layout w/media queries & flexible images half the code bases (KEEP IT SIMPLE) SEO (if you care) - design for humans SCALABILITY: Focusing on features (screen size + touch)
  4. Busting myths: Quick access “On the go” Performance is super important? Forgot universal access (focused on iPhone) Assumed that small screen === phone & large === desktop Hiding content
  5. OVERTHINKING IT (Programmers!!!!) Adaptive vs. Responsive vs. Mobile vs. Adaptive Content The build vs. the experience STILL too much focus on the device (from dev, not UX) Small screen + touch !== mobile Images & bandwidth <picture>, srcset, Network APIs
  6. Learning to keep it simple, but explore Universally improve UX (not just iPhone) Stepping back to look at the entire experience Creating lighter, faster, more targeted designs Mobile First >> Responsive like m.ew.com Creating RESS models As we grow and RWD matures we’ll figure it out. (STILL IN DRAFT)