SlideShare a Scribd company logo
!
!
!
April29,2014
ChoicesforResponsiveDesign:

FromtheGroundUporResponsiveRetrofit?
1
2
• A brief intro to Responsive Web Design
• Responsive from the ground up
• Responsive Retrofitting
• Q&A
Today’sWebinar
Abriefintroduction
3
ResponsiveWebDesign
http://alistapart.com/article/responsive-web-design

Recommended for you

Domain-Driven Design: Part 4 from Delivering the Connected Experience
Domain-Driven Design: Part 4 from Delivering the Connected ExperienceDomain-Driven Design: Part 4 from Delivering the Connected Experience
Domain-Driven Design: Part 4 from Delivering the Connected Experience

Domain Driven Design (DDD) is an approach to software development that models the problem domain using concepts and language from the real world. It recognizes that real businesses have multiple departments that communicate by sending messages, rather than being monolithic. By separating responsibilities into bounded contexts like different departments, complexity is reduced. This also allows the system to scale more easily. DDD uses the "ubiquitous language" of the domain or business to model it, rather than using only technical terms that developers understand. The benefits include gaining a useful model of the domain, refined definitions, domain experts contributing to design, improved user experience, clean boundaries, better enterprise architecture, agile modeling, and new strategic and tactical tools.

softwaredomain drivensoftware modeling
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3

Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3 https://www.youtube.com/watch?v=WlUx5uSgVz4 Bootstrap在響應式網頁設計出現至今,已經流行很久了 雖然陸續出現相似的框架,仍維持最多人使用的框架之一。 新開的單元,速讀 - 將利用短短1到2分鐘不等的時間,帶你快速認識網頁相關資訊。 如果有任何關於Bootstrap的相關問題或是想給我們的建議,都很歡迎在下面留言與我們分享討論喔。 如果你也想學習Bootstrap,可以從下面影片開始實作體驗看看喔 三十分鐘學會建構網頁設計 - https://www.youtube.com/watch?v=_NapocY7HZ4

bootstrap3what is bootstrap響應式網頁設計
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap

This document provides an overview of the Bootstrap framework. It discusses what Bootstrap is, how it can be used to create responsive web designs, and its advantages like pre-defined styles and classes that save development time. The document also covers Bootstrap's grid system, examples of how to use columns at different screen sizes, and some popular components like buttons, tables and carousels.

5
Ethan Marcotte
Responsive Web Design
http://bit.ly/1bwP3sU
“Rather than tailoring disconnected designs to each of an ever-increasing
number of web devices, we can treat them as facets of the same
experience. We can design for an optimal viewing experience, but embed
standards-based technologies into our designs to make them not only
more flexible, but more adaptive to the media that renders them. In short,
we need to practice responsive web design.”
6
TheComponentsofRWD
FluidGrids FlexibleImages MediaQueries
B C D
A
FE
B
F
E
A
D
C
@media	
  screen	
  and	
  (min-­‐device-­‐width:	
  480px	
  )	
  {	
  
	
  	
  	
  	
  .col-­‐2-­‐3	
  {	
  width:	
  66.66%	
  }	
  
!
	
  	
  	
  	
  .col-­‐1-­‐3	
  {	
  width:	
  33.33%	
  }	
  
}
clicktoeditmastertextstyles
7
TitleText
http://bradfrost.github.io/this-is-responsive/

Recommended for you

Designing the Connected Experience: Part 3 from Delivering the Connected Expe...
Designing the Connected Experience: Part 3 from Delivering the Connected Expe...Designing the Connected Experience: Part 3 from Delivering the Connected Expe...
Designing the Connected Experience: Part 3 from Delivering the Connected Expe...

The document discusses designing connected experiences by delivering digital content and services across different contexts, devices, and environments to provide a continuous experience for users. This is done to maximize convenience by allowing people to easily access content and services regardless of their context, device, location, activity, or other factors through a seamless experience. Ensuring continuity is the goal so users feel connected regardless of changes in these variables.

responsive web designcontextconnected experience
5 ways to make a responsive website faster
5 ways to make a responsive website faster5 ways to make a responsive website faster
5 ways to make a responsive website faster

Zinavo is popular in Responsive Web Development Company Bangalore, India. Once if you done with your website work you should look at your responsive work. If you are looking for most affordable, creative, Reliable and perfect work for your website .

website design company in bangaloreweb design companies in bangalorewebsite development company in bangalore
Responsive web design
Responsive web designResponsive web design
Responsive web design

Responsive web design is a web design approach that creates dynamic changes to the layout of a website depending on the screen size and orientation of the device being used. It allows a website to automatically adjust to the capabilities and dimensions of the device without needing separate versions for each device type. This document discusses why responsive design is important as more users access websites from mobile devices, outlines some of the key concepts of responsive design like fluid grids and media queries, and lists some popular responsive design frameworks and tools.

9
ExpandingtheDefinitionofRWD
• As Responsive Web Design is adopted and faces real-world challenges, the
components have expanded (and become more complex)
• Responsive + Server Side = RESS
• Adaptive Delivery
• Responsive Email
• Responsive Typography
• Responsive and Content Management Systems
• Et cetera…
10
Jeffrey Zeldman,
Responsive Design. I don’t think that word means what you think it means.
http://bit.ly/oP8eei
“...the purpose behind “responsive design”—the concept of what it strives
to achieve—should be separated from the specific techniques used to
achieve it. As the worldwide community embraces Ethan’s idea (and as
new methods of CSS layout become practical), the techniques of
responsive design will continue to improve and, dare I say it, adapt.”
11
Mark Boulton
Responsive Web Design – Defining the Damn Thing
http://markboulton.co.uk/journal/rwd-dtdt
“Responsive design has grown into a term that represents
change above all else.”
12
ResponsivePerformance

Recommended for you

PSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOURPSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOUR

This document discusses responsive design and its importance for websites. It defines responsive design as a website that automatically adjusts based on the device being used. The document outlines the benefits of responsive design such as cost savings, improved user experience, and scalability. It provides tips for adopting responsive design including starting with the smallest device and focusing on key content. Examples of responsive design implementations at universities are also presented.

psewebresponsive designterminalfour
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen

In this session, we will explore the how the recent explosion of devices has disrupted the process of designing a website that we've crafted over the past decade. When designers only have one instance of website (i.e., desktop) to design, the layout is uniform. The header, content area, sidebar, and footer all remain static. Furthermore, the elements are relatively uniform as well. Buttons, navigation, typography, and images are all basically the same across across the various pages. But if you are designing a responsive website – one whose look and feel adapts depending whether you're using a phone, laptop, or tablet – then these elements and especially the layout begin to diverge. After this session, you should leave with the confidence to argue the importance of responsive design to your client or boss – and that the with the proper strategy, the extra effort and costs can be justified (and hopefully minimized).

Carl week 5 dont make me think pp
Carl week 5 dont make me think ppCarl week 5 dont make me think pp
Carl week 5 dont make me think pp

The document discusses short term memory and its four stages: encoding, storing, retrieving, and forgetting. It notes that more elaborate encoding of information at the time of learning results in stronger memory.

13
Guy Podjarny,
Performance Implications of Responsive Design
http://www.guypo.com/mobile/performance-implications-of-responsive-
design-book-contribution/
“Responsive Web Design (RWD) tackles many problems, and it’s easy to
get lost in questions around how maintainable, future friendly or cool your
responsive website will be. In the midst of all of these, it’s important to not
lose sight of how fast will it be. Performance is a critical component in
your user’s experience, and many case studies demonstrate how it affects
your users’ satisfaction and your bottom line.”
TakingaMobileFirstapproach
14
ResponsiveFromtheGroundUp
15
Why ResponsiveFromtheGroundUp?
• Allows your site to take advantage of the latest and greatest techniques and
practices
• Makes it easy to focus on key factors such as content strategy, performance and
process
• Leads to a consistent experience for all users
• Future-friendly & standards-based when done right
• So you a setting a great foundation for future device support and changes
16
KeyConcernsForGround-upResponsive
• Doing a complete redesign of your site may not be feasible at this moment
• Time and cost implications can be daunting
• Designing Mobile First and responsive is challenging
• Requires an understanding of content strategy, new design patterns, and
performance design
• Testing such a design is more difficult than some alternatives, such as mobile-
specific sites

Recommended for you

Carl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 ppCarl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 pp

This document summarizes key points from the book "Don't Make Me Think" by Steven Krug. It discusses how to design websites for usability by making pages self-explanatory, eliminating question marks for users, using visual cues and consistency, and testing sites with real users. The goal is to make information easily accessible without frustrating users so they will keep using the site rather than go elsewhere. Proper design creates order and clarity for users.

Carl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 ppCarl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 pp

This document summarizes key points from the book "Don't Make Me Think" by Steven Krug. It discusses how to design websites for usability by making pages self-explanatory, eliminating question marks for users, using visual cues and consistency, and testing sites with real users. The goal is to make information easily accessible without frustrating users so they will keep using the site rather than go elsewhere. Proper design creates order and clarity for users.

NoVA UX Responsive Design
NoVA UX Responsive DesignNoVA UX Responsive Design
NoVA UX Responsive Design

Presentation for NoVA UX Meetup Group on October 24th, 2012. Thanks to everyone for coming out! Looking forward to seeing you at the next event!

responsive design techniquessiteworxmatt fiore
17
ResponsiveDesign:TheBasics
• Take a Mobile First approach
• Understand your content strategy
• Understand the impact on your architecture
• For example, content management systems
• Set your breakpoints around your design needs, not devices
• Consider implementing back-end, adaptive solutions to support your front-end
techniques
18
WhyMobileFirst?
• Taking a Mobile First approach means the adoption of the constraints of the
mobile platform as key concerns for your design
• Small screens
• Slower processors
• Variable connection speeds
• Adopting these constraints allows you to focus on what matters
• Implementing for the most constrained case leads to better results in all cases
19
ContentStrategy
• A responsive design from the ground up is an ideal time to consider content
strategy
• Some key things to consider:
• Does your site need all of content is has?
• What matters most on the page?
• How do you handle non-text content across devices with varying capabilities?
• How will your CMS manage content?
20
MarryingResponsiveAndAdaptive
• Responsive design is great for handling front-end design concerns
• But it may not be enough to handle all cases
• Adding an adaptive, server-side solution can improve the flexibility and
performance of your site
• But it also increases complexity

Recommended for you

Web Development
Web DevelopmentWeb Development
Web Development

The document discusses fundamentals of web design including influences on design such as technology, content, budget, and usability objectives. It emphasizes that good design is understandable, interesting, easy to use, and consistent. While an ad-hoc process can work for small temporary sites, a methodical process including planning, testing, and stakeholder feedback is better for most sites as it results in fewer problems and a site that is more effective and easier to use over time. Accessibility, maintenance, and continual improvement are also important considerations for web design.

Guide to Planning Your Next Web Project
Guide to Planning Your Next Web ProjectGuide to Planning Your Next Web Project
Guide to Planning Your Next Web Project

Are you about to start work on a new Web project? Have you planned the project accurately and completely? Thorough planning can avoid so many issues later in the project, but yet it is often ignored or done hastily. In this white paper you'll get a detailed look at the planning process that CommonPlaces employs. With documents such as site maps, site wireframes, content type descriptions, and technology assessments, you can give your project a much higher chance of success.

wireframessitemapswebsite planning
Website Designing Proposal Template PowerPoint Presentation Slides
Website Designing Proposal Template PowerPoint Presentation SlidesWebsite Designing Proposal Template PowerPoint Presentation Slides
Website Designing Proposal Template PowerPoint Presentation Slides

If your company needs to submit a Website Designing Proposal Template PowerPoint Presentation Slides look no further. Our researchers have analyzed thousands of proposals on this topic for effectiveness and conversion. Just download our template, add your company data and submit to your client for a positive response. https://bit.ly/3fiAph2

business proposalproposal templateswebsite designing
MobileLaterisbetterthanMobileNever
21
ResponsiveRetrofitting
22
WhyResponsiveRetrofit?
• Sometimes you can’t start from scratch
• Cost or time to do a Mobile First redesign may be too high
• Allows reuse of existing code
• Provides a path to dealing with screen-focused responsiveness
23
KeyConcernsforResponsiveRetrofits
• Reworking the existing design can be challenging
• Dealing with retrofitting layouts
• Handling non-text content is challenging
• Maintaining performance can be difficult
• You are adding complexity without refactoring
• Does not address many key issues of content and focus
• It can be expensive in time and resources
24
IncrementalorSite-wideRetrofits
• Taking an incremental approach allows you to role out responsive retrofits for
sections of the site at a time
• You can address underlying issues in a linear fashion
• Learn as you go
• But it can leave you site feeling “clunky”
• Site-wide retrofits cover the whole site
• They’re more comprehensive, but can take longer
• Not easy to do if you don’t have clean HTML

Recommended for you

How to make a great website
How to make a great websiteHow to make a great website
How to make a great website

This document provides guidance on how to make a great website in 3 steps: 1. Make a blueprint by defining the goal, audience, content, and interactivity. Consider templates. 2. Think about design including architecture, logos, SEO, and marketing. Avoid starting with visuals before planning information flow. 3. Follow 5 steps to build architecture: identify keywords, map keyword space, develop architecture, prototype wireframes, and develop content.

how to make a great website
University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design

'A practical approach to responsive design by the University of Portsmouth Library':Colin Work from the University of Portsmouth outlines how they used TERMINALFOUR Site Manager to make the Portsmouth Library sites responsive. The approach, the challenges, lessons learned and more.

higher educationresponsive designstudent recruitment
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt

The document provides guidance on designing effective webpages by discussing key considerations like content, usability, visual design, and accessibility. It emphasizes that good design is understandable, interesting, easy to use, and consistent. The document also outlines a process for webpage design including planning goals and content, pre-design work, influences of technology and content on design, and testing and maintaining the site over time.

25
Retrofitting:TheBasics
• You will need to add the viewport meta tag to you HTML
• Disassemble your fixed width layout to allow the page to flex
• Determine your new breakpoints
• Figure out how to correctly handle the layout of elements on the page
• Reimplement or hide elements that do not work for given breakpoints
• Test, test, TEST!
• Monitor performance
26
SelectingBreakpointsforRetrofits
• Reimplement your layout for flexibility
• User your desktop design as the first breakpoint
• Working down from there, flex the page, looking for “breakage” in the design
• Elements is the wrong order or placement
• Elements that no longer fit the design, e.g., images that extend beyond the
content
• Create a new breakpoint and implement CSS to fix the issues
• Keep working down until you get to your mobile minimum
27
HandlingLayoutIssues
• By default, your layout will flex based on source order
• Content may be out of ideal position based on the other elements on the page
• This can result in other important elements being pushed out of view
28
Desktop Mobile
Banner
Content Sidebar
Navigation
Banner
Content
Sidebar
Navigation
Whoops,thesidebarisbelowthecontent!

Recommended for you

Fundamentals of Web Design | Chandan Chakraborty
Fundamentals of Web Design | Chandan ChakrabortyFundamentals of Web Design | Chandan Chakraborty
Fundamentals of Web Design | Chandan Chakraborty

Fundamentals of Design. Improve the visual competency of any website or application by keeping design in mind. Learn the fundamental design principles of typography, color, and layout.

reelance web designer in kolkatafreelance web developer in kolkataweb designer in kolkata
The secret to delivering a great website project on time and on budget every ...
The secret to delivering a great website project on time and on budget every ...The secret to delivering a great website project on time and on budget every ...
The secret to delivering a great website project on time and on budget every ...

You know what they say: “Proper Planning and Preparation Prevents P*** Poor Performance.” Don't fall foul of the old adage. Learn how to deliver great website projects on time, on budget and as expected each and every time - with our innovative 'Waterfall' development approach.

websitewebsite developmentwebsite design
Responsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROIResponsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROI

Implementing a Responsive design for SharePoint? Consider these best practices to ensure you’re delivering an optimized experience for your users. This session discusses RWD principles and industry leading best practice guidelines, followed by a review of public facing SharePoint sites and design elements that can impact project costs and timelines.

responsive design for sharepointsharepoint rwdresponsive best practices
29
HandlingLayoutIssues
• By default, your layout will flex based on source order
• Content may be out of ideal position based on the other elements on the page
• This can result in other important elements being pushed out of view
• Consider implementing a off-page layout to provide focus to key content
• Alternatively, consider collapsing elements to reduce overall impact on the layout
30
http://www.mobilizingwebsites.net
https://github.com/izilla/RWD-Retrofit
32
Q&A

Recommended for you

How to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design ApproachHow to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design Approach

For most retailers, it's no longer if they should do responsive design, it's how. Learn the many different approaches that are now available, and how to determine which is best for you. A critical yet simple analysis of priorities for strategy and execution will be shared, helping you assure responsive success.

responsive designmobile commercetablet commerce
What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?

Every web development phase is essential to guaranteeing that the finished product not only fulfills but beyond the expectations of its designers and consumers.

custom software solutionit services
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013

Presented with Christian Ståhl Everyone is talking about responsive design. But are you really ready to bring SharePoint to mobile and tablets? While you may have an idea of what your site will look like when finished, there are many basic concepts and pitfalls that aren’t always outlined in the “How To’s”. In this session, we will go through foundational steps to planning a responsive SharePoint site including how to handle a hybrid content scenario that uses publishing and team sites. You will learn what tools and templates can make your life easier during design, build and testing. If you are excited about the capability of bringing SharePoint to any device but not sure where to start, check out this session to get the foundational understanding of the concept, best practices and examples to get you started.

responsive designrwdmicrosoft sharepoint
Thanks!
33

More Related Content

Viewers also liked

Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Cantina
 
Choices for Responsive Redesign: Ground-up or Responsive Retrofit
Choices for Responsive Redesign: Ground-up or Responsive RetrofitChoices for Responsive Redesign: Ground-up or Responsive Retrofit
Choices for Responsive Redesign: Ground-up or Responsive Retrofit
Cantina
 
Intro to facade
Intro to facadeIntro to facade
Intro to facade
Cantina
 
Domain-Driven Design: Part 4 from Delivering the Connected Experience
Domain-Driven Design: Part 4 from Delivering the Connected ExperienceDomain-Driven Design: Part 4 from Delivering the Connected Experience
Domain-Driven Design: Part 4 from Delivering the Connected Experience
Cantina
 
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
Code Basic
 
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
Katherine McCurdy-Lapierre, R.G.D.
 
Designing the Connected Experience: Part 3 from Delivering the Connected Expe...
Designing the Connected Experience: Part 3 from Delivering the Connected Expe...Designing the Connected Experience: Part 3 from Delivering the Connected Expe...
Designing the Connected Experience: Part 3 from Delivering the Connected Expe...
Cantina
 

Viewers also liked (7)

Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Choices for Responsive Redesign: Ground-up or Responsive Retrofit
Choices for Responsive Redesign: Ground-up or Responsive RetrofitChoices for Responsive Redesign: Ground-up or Responsive Retrofit
Choices for Responsive Redesign: Ground-up or Responsive Retrofit
 
Intro to facade
Intro to facadeIntro to facade
Intro to facade
 
Domain-Driven Design: Part 4 from Delivering the Connected Experience
Domain-Driven Design: Part 4 from Delivering the Connected ExperienceDomain-Driven Design: Part 4 from Delivering the Connected Experience
Domain-Driven Design: Part 4 from Delivering the Connected Experience
 
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
Bootstrap 3 Talk - What is Bootstrap 3 | 聊聊 Bootstrap 3 - 初識什麼是 Bootstrap 3
 
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
 
Designing the Connected Experience: Part 3 from Delivering the Connected Expe...
Designing the Connected Experience: Part 3 from Delivering the Connected Expe...Designing the Connected Experience: Part 3 from Delivering the Connected Expe...
Designing the Connected Experience: Part 3 from Delivering the Connected Expe...
 

Similar to Choices for Responsive Redesign: Ground-up or Responsive Retrofit

5 ways to make a responsive website faster
5 ways to make a responsive website faster5 ways to make a responsive website faster
5 ways to make a responsive website faster
MindGee Technologies
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Ana-Maria Birtea
 
PSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOURPSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOUR
Terminalfour
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
Four Kitchens
 
Carl week 5 dont make me think pp
Carl week 5 dont make me think ppCarl week 5 dont make me think pp
Carl week 5 dont make me think pp
wendyr1974
 
Carl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 ppCarl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 pp
wendyr1974
 
Carl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 ppCarl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 pp
wendyr1974
 
NoVA UX Responsive Design
NoVA UX Responsive DesignNoVA UX Responsive Design
NoVA UX Responsive Design
UXMattFiore
 
Web Development
Web DevelopmentWeb Development
Web Development
WishaZehra1
 
Guide to Planning Your Next Web Project
Guide to Planning Your Next Web ProjectGuide to Planning Your Next Web Project
Guide to Planning Your Next Web Project
CommonPlaces e-Solutions
 
Website Designing Proposal Template PowerPoint Presentation Slides
Website Designing Proposal Template PowerPoint Presentation SlidesWebsite Designing Proposal Template PowerPoint Presentation Slides
Website Designing Proposal Template PowerPoint Presentation Slides
SlideTeam
 
How to make a great website
How to make a great websiteHow to make a great website
How to make a great website
Dr. Taher Ghazal
 
University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design
Terminalfour
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
RavneetSingh343801
 
Fundamentals of Web Design | Chandan Chakraborty
Fundamentals of Web Design | Chandan ChakrabortyFundamentals of Web Design | Chandan Chakraborty
Fundamentals of Web Design | Chandan Chakraborty
Chandan Chakraborty
 
The secret to delivering a great website project on time and on budget every ...
The secret to delivering a great website project on time and on budget every ...The secret to delivering a great website project on time and on budget every ...
The secret to delivering a great website project on time and on budget every ...
Marketecture
 
Responsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROIResponsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROI
Juan Carlos Duron
 
How to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design ApproachHow to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design Approach
5th Finger
 
What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?
JamesParker406701
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
Marc D Anderson
 

Similar to Choices for Responsive Redesign: Ground-up or Responsive Retrofit (20)

5 ways to make a responsive website faster
5 ways to make a responsive website faster5 ways to make a responsive website faster
5 ways to make a responsive website faster
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
PSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOURPSEWEB 2013 - Make it responsive - TERMINALFOUR
PSEWEB 2013 - Make it responsive - TERMINALFOUR
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Carl week 5 dont make me think pp
Carl week 5 dont make me think ppCarl week 5 dont make me think pp
Carl week 5 dont make me think pp
 
Carl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 ppCarl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 pp
 
Carl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 ppCarl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 pp
 
NoVA UX Responsive Design
NoVA UX Responsive DesignNoVA UX Responsive Design
NoVA UX Responsive Design
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Guide to Planning Your Next Web Project
Guide to Planning Your Next Web ProjectGuide to Planning Your Next Web Project
Guide to Planning Your Next Web Project
 
Website Designing Proposal Template PowerPoint Presentation Slides
Website Designing Proposal Template PowerPoint Presentation SlidesWebsite Designing Proposal Template PowerPoint Presentation Slides
Website Designing Proposal Template PowerPoint Presentation Slides
 
How to make a great website
How to make a great websiteHow to make a great website
How to make a great website
 
University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
Fundamentals of Web Design | Chandan Chakraborty
Fundamentals of Web Design | Chandan ChakrabortyFundamentals of Web Design | Chandan Chakraborty
Fundamentals of Web Design | Chandan Chakraborty
 
The secret to delivering a great website project on time and on budget every ...
The secret to delivering a great website project on time and on budget every ...The secret to delivering a great website project on time and on budget every ...
The secret to delivering a great website project on time and on budget every ...
 
Responsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROIResponsive Web Design ~ Best Practices for Maximizing ROI
Responsive Web Design ~ Best Practices for Maximizing ROI
 
How to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design ApproachHow to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design Approach
 
What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?What are the Three Main Stages of Web Development?
What are the Three Main Stages of Web Development?
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 

More from Cantina

Sketching for UX Designers
Sketching for UX DesignersSketching for UX Designers
Sketching for UX Designers
Cantina
 
Demystifying the Design Process
Demystifying the Design ProcessDemystifying the Design Process
Demystifying the Design Process
Cantina
 
Software is not a Building - Designing Technical Architecture for Change
Software is not a Building - Designing Technical Architecture for ChangeSoftware is not a Building - Designing Technical Architecture for Change
Software is not a Building - Designing Technical Architecture for Change
Cantina
 
Planning For design
Planning For designPlanning For design
Planning For design
Cantina
 
Five Key Ingredients in Successful Mobile Projects
Five Key Ingredients in Successful Mobile ProjectsFive Key Ingredients in Successful Mobile Projects
Five Key Ingredients in Successful Mobile Projects
Cantina
 
Delivering Responsive Design at Scale
Delivering Responsive Design at ScaleDelivering Responsive Design at Scale
Delivering Responsive Design at Scale
Cantina
 
Design i/o - Creating Visual Interfaces for Digital Systems
Design i/o - Creating Visual Interfaces for Digital SystemsDesign i/o - Creating Visual Interfaces for Digital Systems
Design i/o - Creating Visual Interfaces for Digital Systems
Cantina
 
Introduction to Reactive
Introduction to ReactiveIntroduction to Reactive
Introduction to Reactive
Cantina
 
Utilizing Lean Practices in the Enterprise: Part 1 of Delivering the Connecte...
Utilizing Lean Practices in the Enterprise: Part 1 of Delivering the Connecte...Utilizing Lean Practices in the Enterprise: Part 1 of Delivering the Connecte...
Utilizing Lean Practices in the Enterprise: Part 1 of Delivering the Connecte...
Cantina
 
Demystifying Content Strategy: Part 2 of Delivering the Connected Experience
Demystifying Content Strategy: Part 2 of Delivering the Connected ExperienceDemystifying Content Strategy: Part 2 of Delivering the Connected Experience
Demystifying Content Strategy: Part 2 of Delivering the Connected Experience
Cantina
 
The Need For Speed: Part 5 of Delivering the Connected Experience
The Need For Speed: Part 5 of Delivering the Connected ExperienceThe Need For Speed: Part 5 of Delivering the Connected Experience
The Need For Speed: Part 5 of Delivering the Connected Experience
Cantina
 
A Brief History of Input Devices with Cantina's Daniel Bostwick
A Brief History of Input Devices with Cantina's Daniel BostwickA Brief History of Input Devices with Cantina's Daniel Bostwick
A Brief History of Input Devices with Cantina's Daniel Bostwick
Cantina
 

More from Cantina (12)

Sketching for UX Designers
Sketching for UX DesignersSketching for UX Designers
Sketching for UX Designers
 
Demystifying the Design Process
Demystifying the Design ProcessDemystifying the Design Process
Demystifying the Design Process
 
Software is not a Building - Designing Technical Architecture for Change
Software is not a Building - Designing Technical Architecture for ChangeSoftware is not a Building - Designing Technical Architecture for Change
Software is not a Building - Designing Technical Architecture for Change
 
Planning For design
Planning For designPlanning For design
Planning For design
 
Five Key Ingredients in Successful Mobile Projects
Five Key Ingredients in Successful Mobile ProjectsFive Key Ingredients in Successful Mobile Projects
Five Key Ingredients in Successful Mobile Projects
 
Delivering Responsive Design at Scale
Delivering Responsive Design at ScaleDelivering Responsive Design at Scale
Delivering Responsive Design at Scale
 
Design i/o - Creating Visual Interfaces for Digital Systems
Design i/o - Creating Visual Interfaces for Digital SystemsDesign i/o - Creating Visual Interfaces for Digital Systems
Design i/o - Creating Visual Interfaces for Digital Systems
 
Introduction to Reactive
Introduction to ReactiveIntroduction to Reactive
Introduction to Reactive
 
Utilizing Lean Practices in the Enterprise: Part 1 of Delivering the Connecte...
Utilizing Lean Practices in the Enterprise: Part 1 of Delivering the Connecte...Utilizing Lean Practices in the Enterprise: Part 1 of Delivering the Connecte...
Utilizing Lean Practices in the Enterprise: Part 1 of Delivering the Connecte...
 
Demystifying Content Strategy: Part 2 of Delivering the Connected Experience
Demystifying Content Strategy: Part 2 of Delivering the Connected ExperienceDemystifying Content Strategy: Part 2 of Delivering the Connected Experience
Demystifying Content Strategy: Part 2 of Delivering the Connected Experience
 
The Need For Speed: Part 5 of Delivering the Connected Experience
The Need For Speed: Part 5 of Delivering the Connected ExperienceThe Need For Speed: Part 5 of Delivering the Connected Experience
The Need For Speed: Part 5 of Delivering the Connected Experience
 
A Brief History of Input Devices with Cantina's Daniel Bostwick
A Brief History of Input Devices with Cantina's Daniel BostwickA Brief History of Input Devices with Cantina's Daniel Bostwick
A Brief History of Input Devices with Cantina's Daniel Bostwick
 

Recently uploaded

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 

Recently uploaded (20)

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 

Choices for Responsive Redesign: Ground-up or Responsive Retrofit

  • 2. 2 • A brief intro to Responsive Web Design • Responsive from the ground up • Responsive Retrofitting • Q&A Today’sWebinar
  • 5. 5 Ethan Marcotte Responsive Web Design http://bit.ly/1bwP3sU “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.”
  • 6. 6 TheComponentsofRWD FluidGrids FlexibleImages MediaQueries B C D A FE B F E A D C @media  screen  and  (min-­‐device-­‐width:  480px  )  {          .col-­‐2-­‐3  {  width:  66.66%  }   !        .col-­‐1-­‐3  {  width:  33.33%  }   }
  • 9. 9 ExpandingtheDefinitionofRWD • As Responsive Web Design is adopted and faces real-world challenges, the components have expanded (and become more complex) • Responsive + Server Side = RESS • Adaptive Delivery • Responsive Email • Responsive Typography • Responsive and Content Management Systems • Et cetera…
  • 10. 10 Jeffrey Zeldman, Responsive Design. I don’t think that word means what you think it means. http://bit.ly/oP8eei “...the purpose behind “responsive design”—the concept of what it strives to achieve—should be separated from the specific techniques used to achieve it. As the worldwide community embraces Ethan’s idea (and as new methods of CSS layout become practical), the techniques of responsive design will continue to improve and, dare I say it, adapt.”
  • 11. 11 Mark Boulton Responsive Web Design – Defining the Damn Thing http://markboulton.co.uk/journal/rwd-dtdt “Responsive design has grown into a term that represents change above all else.”
  • 13. 13 Guy Podjarny, Performance Implications of Responsive Design http://www.guypo.com/mobile/performance-implications-of-responsive- design-book-contribution/ “Responsive Web Design (RWD) tackles many problems, and it’s easy to get lost in questions around how maintainable, future friendly or cool your responsive website will be. In the midst of all of these, it’s important to not lose sight of how fast will it be. Performance is a critical component in your user’s experience, and many case studies demonstrate how it affects your users’ satisfaction and your bottom line.”
  • 15. 15 Why ResponsiveFromtheGroundUp? • Allows your site to take advantage of the latest and greatest techniques and practices • Makes it easy to focus on key factors such as content strategy, performance and process • Leads to a consistent experience for all users • Future-friendly & standards-based when done right • So you a setting a great foundation for future device support and changes
  • 16. 16 KeyConcernsForGround-upResponsive • Doing a complete redesign of your site may not be feasible at this moment • Time and cost implications can be daunting • Designing Mobile First and responsive is challenging • Requires an understanding of content strategy, new design patterns, and performance design • Testing such a design is more difficult than some alternatives, such as mobile- specific sites
  • 17. 17 ResponsiveDesign:TheBasics • Take a Mobile First approach • Understand your content strategy • Understand the impact on your architecture • For example, content management systems • Set your breakpoints around your design needs, not devices • Consider implementing back-end, adaptive solutions to support your front-end techniques
  • 18. 18 WhyMobileFirst? • Taking a Mobile First approach means the adoption of the constraints of the mobile platform as key concerns for your design • Small screens • Slower processors • Variable connection speeds • Adopting these constraints allows you to focus on what matters • Implementing for the most constrained case leads to better results in all cases
  • 19. 19 ContentStrategy • A responsive design from the ground up is an ideal time to consider content strategy • Some key things to consider: • Does your site need all of content is has? • What matters most on the page? • How do you handle non-text content across devices with varying capabilities? • How will your CMS manage content?
  • 20. 20 MarryingResponsiveAndAdaptive • Responsive design is great for handling front-end design concerns • But it may not be enough to handle all cases • Adding an adaptive, server-side solution can improve the flexibility and performance of your site • But it also increases complexity
  • 22. 22 WhyResponsiveRetrofit? • Sometimes you can’t start from scratch • Cost or time to do a Mobile First redesign may be too high • Allows reuse of existing code • Provides a path to dealing with screen-focused responsiveness
  • 23. 23 KeyConcernsforResponsiveRetrofits • Reworking the existing design can be challenging • Dealing with retrofitting layouts • Handling non-text content is challenging • Maintaining performance can be difficult • You are adding complexity without refactoring • Does not address many key issues of content and focus • It can be expensive in time and resources
  • 24. 24 IncrementalorSite-wideRetrofits • Taking an incremental approach allows you to role out responsive retrofits for sections of the site at a time • You can address underlying issues in a linear fashion • Learn as you go • But it can leave you site feeling “clunky” • Site-wide retrofits cover the whole site • They’re more comprehensive, but can take longer • Not easy to do if you don’t have clean HTML
  • 25. 25 Retrofitting:TheBasics • You will need to add the viewport meta tag to you HTML • Disassemble your fixed width layout to allow the page to flex • Determine your new breakpoints • Figure out how to correctly handle the layout of elements on the page • Reimplement or hide elements that do not work for given breakpoints • Test, test, TEST! • Monitor performance
  • 26. 26 SelectingBreakpointsforRetrofits • Reimplement your layout for flexibility • User your desktop design as the first breakpoint • Working down from there, flex the page, looking for “breakage” in the design • Elements is the wrong order or placement • Elements that no longer fit the design, e.g., images that extend beyond the content • Create a new breakpoint and implement CSS to fix the issues • Keep working down until you get to your mobile minimum
  • 27. 27 HandlingLayoutIssues • By default, your layout will flex based on source order • Content may be out of ideal position based on the other elements on the page • This can result in other important elements being pushed out of view
  • 29. 29 HandlingLayoutIssues • By default, your layout will flex based on source order • Content may be out of ideal position based on the other elements on the page • This can result in other important elements being pushed out of view • Consider implementing a off-page layout to provide focus to key content • Alternatively, consider collapsing elements to reduce overall impact on the layout