IxDA Toronto Show and Tell RWD - tangerine by vadim tslaf
•
2 likes•805 views
Tangerine bank underwent a responsive redesign of its public website which involved assessing the feasibility, choosing a framework, analyzing content and information architecture with hundreds of pages and structures, developing universal responsive design solutions like simplified navigation, wireframing key pages for responsive layouts, updating visual design, and rebranding and front end development to convert the site to a responsive web design.
Report
Share
Report
Share
Download to read offline
Recommended
Tangerine 2
Tangerine is offering new customers $75 for opening a chequing or savings account and another $75 for making it their direct pay account before July 31, 2014 to boost their immunity to daily banking fees and earn 2.50% interest on TFSA/RRSP savings accounts.
Tangerine 3
Tangerine is offering a promotion where new customers can earn $75 for opening a chequing or savings account and another $75 for setting it as their direct pay account before July 31, 2014. Customers will also earn 2.50% interest on their TFSA or RRSP savings accounts. The ad encourages customers to scan a QR code to switch to Tangerine now.
Resume
This document outlines the education and experience of Victor Szabo, including degrees in graphic design and computer programming from Humber College, Seneca College, and Advocis/Financial Services Commission of Ontario between 2001 and 2014. His work experience includes positions as a financial advisor and store manager, and his interests include music, photography, travel, and social media.
Tangerine Training Manual
Training Manuals are the foundation for success in the Bar and Nightclub Industry. Knowledge is power but Educating Employees is Profitable.
U.S. Organic Tangerine Market. Analysis and Forecast To 2025
This report provides an in-depth analysis of the U.S. organic tangerine market. It presents the latest data of the market size and volume, domestic production, exports and imports, price dynamics and turnover in the industry. The forecast reveals market prospects to 2025.
Andrew Zimakas | Tapping Into Your Community for Support
The document discusses how Tangerine Bank engaged communities for support during its transition from ING Direct to Tangerine. It outlines three takeaways: 1) be kind to your community before needing their support, 2) build your community online and offline, and 3) employees are your biggest advocates. The timeline shows the strategic review, sale to Scotiabank, name reveal, and transition periods. Tangerine worked to preserve the ING Direct brand essence and reassure employees, clients, and Canadians during the change by engaging communities through pre-reveal preparation, revealing the new Tangerine name, and transitioning to the new brand.
Destin Haynes | Be Local Everywhere: Bootstrapping Your Way to Global Brand L...
This document discusses how HootSuite builds global brand loyalty through local community engagement strategies. It outlines HootSuite's community department mission to create online communities and represent the brand locally. Key strategies discussed include ambassador programs to expand into new markets, HootUps which are user-led local events, #HootSwag promotions, listening to and engaging local communities authentically, and localizing product and content. The goal is to develop lasting customer bonds through grassroots campaigns and genuine conversations.
Crisis Communication Workshop september 12th 2014
A presentation of our experiences from the first day of the "Crisis communication – a simulation in the real world and Cyberspace" introductory workshop.
Recommended
Tangerine 2
Tangerine is offering new customers $75 for opening a chequing or savings account and another $75 for making it their direct pay account before July 31, 2014 to boost their immunity to daily banking fees and earn 2.50% interest on TFSA/RRSP savings accounts.
Tangerine 3
Tangerine is offering a promotion where new customers can earn $75 for opening a chequing or savings account and another $75 for setting it as their direct pay account before July 31, 2014. Customers will also earn 2.50% interest on their TFSA or RRSP savings accounts. The ad encourages customers to scan a QR code to switch to Tangerine now.
Resume
This document outlines the education and experience of Victor Szabo, including degrees in graphic design and computer programming from Humber College, Seneca College, and Advocis/Financial Services Commission of Ontario between 2001 and 2014. His work experience includes positions as a financial advisor and store manager, and his interests include music, photography, travel, and social media.
Tangerine Training Manual
Training Manuals are the foundation for success in the Bar and Nightclub Industry. Knowledge is power but Educating Employees is Profitable.
U.S. Organic Tangerine Market. Analysis and Forecast To 2025
This report provides an in-depth analysis of the U.S. organic tangerine market. It presents the latest data of the market size and volume, domestic production, exports and imports, price dynamics and turnover in the industry. The forecast reveals market prospects to 2025.
Andrew Zimakas | Tapping Into Your Community for Support
The document discusses how Tangerine Bank engaged communities for support during its transition from ING Direct to Tangerine. It outlines three takeaways: 1) be kind to your community before needing their support, 2) build your community online and offline, and 3) employees are your biggest advocates. The timeline shows the strategic review, sale to Scotiabank, name reveal, and transition periods. Tangerine worked to preserve the ING Direct brand essence and reassure employees, clients, and Canadians during the change by engaging communities through pre-reveal preparation, revealing the new Tangerine name, and transitioning to the new brand.
Destin Haynes | Be Local Everywhere: Bootstrapping Your Way to Global Brand L...
This document discusses how HootSuite builds global brand loyalty through local community engagement strategies. It outlines HootSuite's community department mission to create online communities and represent the brand locally. Key strategies discussed include ambassador programs to expand into new markets, HootUps which are user-led local events, #HootSwag promotions, listening to and engaging local communities authentically, and localizing product and content. The goal is to develop lasting customer bonds through grassroots campaigns and genuine conversations.
Crisis Communication Workshop september 12th 2014
A presentation of our experiences from the first day of the "Crisis communication – a simulation in the real world and Cyberspace" introductory workshop.
Tangerine Bank
The document contains proposals and drawings for various signage designs for a client named Tangerine. It includes designs for push-through acrylic logos, illuminated acrylic panels with routed images, illuminated acrylic letters, halo-lit lenticular signs, raised aluminum panels with printed graphics, and a timeline sign. The signs will feature the client's orange color PMS #165C and use lighting techniques like LED illumination.
Customer Experience: Why Should You Care?
Tangerine Lab makes a case for why every brand, especially marketing, should care about customer experience.
Introduction to User Experience Workshop
The document outlines an agenda for an introduction to user experience workshop. It includes an icebreaker where attendees introduce themselves, an overview of user experience design, definitions of UX design, the roles and responsibilities of a UX designer, and how to integrate UX practices into one's work. It also describes BrainStation's UX design course curriculum.
The Social Customer Journey: A Webinar Presented At SOCAP International
Tangerine Lab presented this webinar at SOCAP International. It is discussion of what is a social customer and an approach for integration of social media in customer experience strategy and design.
Pitch with feedback and improvements
The group's film opening will be a thriller about a serial killer who leaves clues at crime scenes. It will show the forensic team investigating a murder at a house. The team notices a suspicious man watching them. When they chase him, he drops a black book with crossed-out names, suggesting it is a hit list. The opening will introduce the characters - the victim, murderer and detectives - through their roles in the crime scene investigation and clues about their personalities. Camerawork and mise-en-scene will aim to create realism and tension. Research from other forensic thrillers informed decisions about elements like sound, camera angles, and props.
Tangerine concepts
Tangerine Concepts is considering launching the MasterCard MyCard to expand its market influence. The card would target those with no or poor credit histories. An analysis found that 2 million Canadians fit this profile, with 384,000 in the target Golden Horseshoe region. For the distribution strategy to break even, it would need a 11.6% market share, or 44,773 consumers. However, given high competition and lack of competitive advantage, the decision was made not to launch MyCard.
Responsive Web Design presentation at the Fort Wayne AdFed
Nate Reusser recently spoke in front of 80+ advertising and marketing professionals during a luncheon held at the Fort Wayne Advertising Federation. Here are his slides, full of useful information and resources!
Navigation Design for Complex Web Applications
The document discusses navigation design considerations for complex web applications. It covers different navigation patterns like hub vs spoke, one-page forms vs wizards, and horizontal vs vertical wizards. It also addresses different levels of navigation including global, local, cross-system, and dashboards. Additional topics include mental models vs technical architecture, user profiles, multi-device support, and internationalization. The presentation aims to provide guidance on navigation requirements, application mapping, and navigation design for information architecture and user interface.
Responsive Web Design: One Size No Longer Fits All
Designing to allow an ever-increasing number of devices to access your website or web application is a game you can never win. There is arguably little business benefit to targeting less-widely used devices, yet web-accessible smartphones that aren't iPhones constitute a large group of users that is costly to ignore.
Responsive Web Design is a new approach to the design and execution of websites and web applications that offers a way to cater to a much wider array of users and devices than would be possible otherwise. Through the use of modern web standards and a thorough execution plan it is possible to create attractive, brand-aware user experiences that work across a wide range of devices - feature phones, smartphones, tablets, netbooks, laptops and desktop computers - without requiring expensive device-centric development.
This slideshow covers:
• Costs and benefits of Responsive Web Design
• Examples of large-scale responsive websites currently deployed
• When to consider a responsive approach to your project
• The skills your team should have, and the techniques they should be using, when designing responsively
The Rise of Mobile for Nonprofit Communication & Fundraising
The document discusses responsive web design and how to go beyond it to better meet user needs across devices. It introduces responsive design, which uses fluid grids and breakpoints to automatically reformat web content for different screen sizes. The speaker advocates for responsive design because mobile usage is rising and it provides a better user experience across devices. However, the speaker also argues that designers should go beyond responsive frameworks to create device-optimized experiences through techniques like touch targets and reducing taps. The overall message is that responsive design is important but designers must deeply understand user needs and limitations on each device type.
Web Responsive Design
Responsive web design (RWD) provides an optimal viewing experience across different devices. Coined in 2010 by Ethan Marcotte, RWD uses fluid grids and CSS media queries to automatically adjust content for various screen sizes. It allows one website to adapt to smartphones, tablets and computers for different screen resolutions with ease of management. RWD addresses the need for websites to accommodate diverse technologies and is recommended by Google for mobile search engine optimization.
amanWeb.ppt.pptx
Web development includes creating and maintaining websites. It can be classified into frontend and backend development. Frontend development involves user interface elements like HTML, CSS, and JavaScript. Backend development refers to the server-side elements that users don't directly interact with, like databases and servers. A full-stack developer works with both frontend and backend technologies. Common web development tools include WordPress, Joomla, Drupal, and code editors.
Hong kong drupal user group dec13th responsive web design for dummy
This document summarizes a presentation given by Water ZHANG on responsive web design for Drupal. The presentation covered why mobile-first design is important for Drupal sites given rising mobile usage. It discussed best practices for the design process, common pitfalls to avoid, and setting clear timelines for projects. The goal is to create sites that work well on any screen size now and in the future.
Web-Development-ppt (1).pptx
Web development involves building and maintaining websites and includes aspects like design, publishing, programming, and database management. It can be classified into frontend and backend development. Frontend development refers to the client-side interface a user interacts with directly, while backend development involves the server-side functionality not directly visible to users, like data storage. Common frontend tools include HTML, CSS, JavaScript, and frameworks like Bootstrap and React. Popular backend languages are PHP, Java, Python, and Node.js, with frameworks like Django and Rails. Full-stack developers work with both frontend and backend technologies.
Modern Digital Design: The power of Responsive Design
You've probably already heard of the term Responsive Design. Currently it's one of the hot topics being discussed in the digital space and something many businesses are trying to get their heads around.
So what exactly is Responsive Design? And why does it matter?
Dita and Information Architecture for Responsive Design
The document discusses how DITA (Darwin Information Typing Architecture) content and responsive web design (RWD) can work together effectively. It provides background on Yellow Pencil, a web design agency specialized in content-first and responsive design projects. The presentation then covers key principles of RWD including fluid layouts, flexible images and navigation, and benefits such as universal access across devices. Examples are given of how DITA content structures can map to RWD frameworks to generate optimized HTML for different screen sizes.
Getting Down & Dirty with Responsive Web Design
This document provides an overview of responsive web design. It begins by noting the increasing diversity of devices used to access websites. It then introduces responsive web design as a solution, allowing one website to adapt to different screens through a flexible grid, flexible images and media, and media queries. Examples of responsive sites are shown. Some criticisms of the approach are addressed. The business case for a responsive approach is made. Finally, the document gets into the technical details of implementing a responsive design through flexible grids, images, and media queries. It provides code examples and tips for supporting older browsers. Frameworks to help with responsive design are also mentioned.
Web-Development-ppt.pptx
This document provides an overview of web development. It defines web development as building and maintaining websites, involving aspects like design, publishing, programming, and database management. Web development is classified into frontend and backend development. The frontend is what users interact with directly, while the backend is server-side and stores/arranges data. The document outlines the basic tools and frameworks used in frontend development like HTML, CSS, JavaScript, and Bootstrap, as well as backend languages and frameworks like PHP, Java, Python, Node.js, Express, Django, and Rails. It also describes what full-stack developers do and common tools used in web development.
Responsive Web Design: How the mobile web has changed the way we think and work
The document summarizes a meetup on responsive web design hosted by Nick Weaver and Vidal Quevedo. They discussed the challenges of native mobile apps and earlier responsive approaches at UW-Madison. They advocated for a "one-web" philosophy using responsive design to provide a consistent experience across devices. The basics of responsive design like fluid layouts, responsive images, and media queries were covered. Challenges of testing and managing responsive designs were also noted. Case studies of responsive sites at UW-Madison were presented and resources for learning more about responsive design were provided.
Ekon23 (1) Kingdom-Driven-Design
After years working on Domain-Driven Design projects using Delphi for server-side processes, I eventually followed some kind of cut-back version of the DDD paradigms. Introducing Kingdom Driven Design (aka KDD) – since in biology “Kingdom” is the second highest taxonomic rank, just after “Domain”. We will present some principles to help writing not-database-centric code, without being bloated by all the DDD requirements.
Let your Kingdom come!
Strategies for User Experience Design
Robert Stribley presented on strategies for user experience design. He discussed principles of responsive design such as mobile-first design, breakpoints, grids, and handling navigation and images across devices. The presentation agenda included learning about user journeys and designing responsive pages and a mobile app in teams. Guidelines for the project were to design experiences for MoMA's website and mobile app that complement each other and help visitors during their museum visit.
Responsive Web Design Tools
The document discusses responsive web design tools. It provides an agenda for a talk on responsive web design that includes discussing the state of RWD, doing a quick demo, and having a Q&A session. It then lists many design and prototyping tools as well as testing sites and tools that are useful for responsive web design. The speaker is introduced as a freelance UX designer and entrepreneur who has started companies and an agency focused on user experience and mobile design.
More Related Content
Viewers also liked
Tangerine Bank
The document contains proposals and drawings for various signage designs for a client named Tangerine. It includes designs for push-through acrylic logos, illuminated acrylic panels with routed images, illuminated acrylic letters, halo-lit lenticular signs, raised aluminum panels with printed graphics, and a timeline sign. The signs will feature the client's orange color PMS #165C and use lighting techniques like LED illumination.
Customer Experience: Why Should You Care?
Tangerine Lab makes a case for why every brand, especially marketing, should care about customer experience.
Introduction to User Experience Workshop
The document outlines an agenda for an introduction to user experience workshop. It includes an icebreaker where attendees introduce themselves, an overview of user experience design, definitions of UX design, the roles and responsibilities of a UX designer, and how to integrate UX practices into one's work. It also describes BrainStation's UX design course curriculum.
The Social Customer Journey: A Webinar Presented At SOCAP International
Tangerine Lab presented this webinar at SOCAP International. It is discussion of what is a social customer and an approach for integration of social media in customer experience strategy and design.
Pitch with feedback and improvements
The group's film opening will be a thriller about a serial killer who leaves clues at crime scenes. It will show the forensic team investigating a murder at a house. The team notices a suspicious man watching them. When they chase him, he drops a black book with crossed-out names, suggesting it is a hit list. The opening will introduce the characters - the victim, murderer and detectives - through their roles in the crime scene investigation and clues about their personalities. Camerawork and mise-en-scene will aim to create realism and tension. Research from other forensic thrillers informed decisions about elements like sound, camera angles, and props.
Tangerine concepts
Tangerine Concepts is considering launching the MasterCard MyCard to expand its market influence. The card would target those with no or poor credit histories. An analysis found that 2 million Canadians fit this profile, with 384,000 in the target Golden Horseshoe region. For the distribution strategy to break even, it would need a 11.6% market share, or 44,773 consumers. However, given high competition and lack of competitive advantage, the decision was made not to launch MyCard.
Viewers also liked (6)
The Social Customer Journey: A Webinar Presented At SOCAP International
The Social Customer Journey: A Webinar Presented At SOCAP International
Similar to IxDA Toronto Show and Tell RWD - tangerine by vadim tslaf
Responsive Web Design presentation at the Fort Wayne AdFed
Nate Reusser recently spoke in front of 80+ advertising and marketing professionals during a luncheon held at the Fort Wayne Advertising Federation. Here are his slides, full of useful information and resources!
Navigation Design for Complex Web Applications
The document discusses navigation design considerations for complex web applications. It covers different navigation patterns like hub vs spoke, one-page forms vs wizards, and horizontal vs vertical wizards. It also addresses different levels of navigation including global, local, cross-system, and dashboards. Additional topics include mental models vs technical architecture, user profiles, multi-device support, and internationalization. The presentation aims to provide guidance on navigation requirements, application mapping, and navigation design for information architecture and user interface.
Responsive Web Design: One Size No Longer Fits All
Designing to allow an ever-increasing number of devices to access your website or web application is a game you can never win. There is arguably little business benefit to targeting less-widely used devices, yet web-accessible smartphones that aren't iPhones constitute a large group of users that is costly to ignore.
Responsive Web Design is a new approach to the design and execution of websites and web applications that offers a way to cater to a much wider array of users and devices than would be possible otherwise. Through the use of modern web standards and a thorough execution plan it is possible to create attractive, brand-aware user experiences that work across a wide range of devices - feature phones, smartphones, tablets, netbooks, laptops and desktop computers - without requiring expensive device-centric development.
This slideshow covers:
• Costs and benefits of Responsive Web Design
• Examples of large-scale responsive websites currently deployed
• When to consider a responsive approach to your project
• The skills your team should have, and the techniques they should be using, when designing responsively
The Rise of Mobile for Nonprofit Communication & Fundraising
The document discusses responsive web design and how to go beyond it to better meet user needs across devices. It introduces responsive design, which uses fluid grids and breakpoints to automatically reformat web content for different screen sizes. The speaker advocates for responsive design because mobile usage is rising and it provides a better user experience across devices. However, the speaker also argues that designers should go beyond responsive frameworks to create device-optimized experiences through techniques like touch targets and reducing taps. The overall message is that responsive design is important but designers must deeply understand user needs and limitations on each device type.
Web Responsive Design
Responsive web design (RWD) provides an optimal viewing experience across different devices. Coined in 2010 by Ethan Marcotte, RWD uses fluid grids and CSS media queries to automatically adjust content for various screen sizes. It allows one website to adapt to smartphones, tablets and computers for different screen resolutions with ease of management. RWD addresses the need for websites to accommodate diverse technologies and is recommended by Google for mobile search engine optimization.
amanWeb.ppt.pptx
Web development includes creating and maintaining websites. It can be classified into frontend and backend development. Frontend development involves user interface elements like HTML, CSS, and JavaScript. Backend development refers to the server-side elements that users don't directly interact with, like databases and servers. A full-stack developer works with both frontend and backend technologies. Common web development tools include WordPress, Joomla, Drupal, and code editors.
Hong kong drupal user group dec13th responsive web design for dummy
This document summarizes a presentation given by Water ZHANG on responsive web design for Drupal. The presentation covered why mobile-first design is important for Drupal sites given rising mobile usage. It discussed best practices for the design process, common pitfalls to avoid, and setting clear timelines for projects. The goal is to create sites that work well on any screen size now and in the future.
Web-Development-ppt (1).pptx
Web development involves building and maintaining websites and includes aspects like design, publishing, programming, and database management. It can be classified into frontend and backend development. Frontend development refers to the client-side interface a user interacts with directly, while backend development involves the server-side functionality not directly visible to users, like data storage. Common frontend tools include HTML, CSS, JavaScript, and frameworks like Bootstrap and React. Popular backend languages are PHP, Java, Python, and Node.js, with frameworks like Django and Rails. Full-stack developers work with both frontend and backend technologies.
Modern Digital Design: The power of Responsive Design
You've probably already heard of the term Responsive Design. Currently it's one of the hot topics being discussed in the digital space and something many businesses are trying to get their heads around.
So what exactly is Responsive Design? And why does it matter?
Dita and Information Architecture for Responsive Design
The document discusses how DITA (Darwin Information Typing Architecture) content and responsive web design (RWD) can work together effectively. It provides background on Yellow Pencil, a web design agency specialized in content-first and responsive design projects. The presentation then covers key principles of RWD including fluid layouts, flexible images and navigation, and benefits such as universal access across devices. Examples are given of how DITA content structures can map to RWD frameworks to generate optimized HTML for different screen sizes.
Getting Down & Dirty with Responsive Web Design
This document provides an overview of responsive web design. It begins by noting the increasing diversity of devices used to access websites. It then introduces responsive web design as a solution, allowing one website to adapt to different screens through a flexible grid, flexible images and media, and media queries. Examples of responsive sites are shown. Some criticisms of the approach are addressed. The business case for a responsive approach is made. Finally, the document gets into the technical details of implementing a responsive design through flexible grids, images, and media queries. It provides code examples and tips for supporting older browsers. Frameworks to help with responsive design are also mentioned.
Web-Development-ppt.pptx
This document provides an overview of web development. It defines web development as building and maintaining websites, involving aspects like design, publishing, programming, and database management. Web development is classified into frontend and backend development. The frontend is what users interact with directly, while the backend is server-side and stores/arranges data. The document outlines the basic tools and frameworks used in frontend development like HTML, CSS, JavaScript, and Bootstrap, as well as backend languages and frameworks like PHP, Java, Python, Node.js, Express, Django, and Rails. It also describes what full-stack developers do and common tools used in web development.
Responsive Web Design: How the mobile web has changed the way we think and work
The document summarizes a meetup on responsive web design hosted by Nick Weaver and Vidal Quevedo. They discussed the challenges of native mobile apps and earlier responsive approaches at UW-Madison. They advocated for a "one-web" philosophy using responsive design to provide a consistent experience across devices. The basics of responsive design like fluid layouts, responsive images, and media queries were covered. Challenges of testing and managing responsive designs were also noted. Case studies of responsive sites at UW-Madison were presented and resources for learning more about responsive design were provided.
Ekon23 (1) Kingdom-Driven-Design
After years working on Domain-Driven Design projects using Delphi for server-side processes, I eventually followed some kind of cut-back version of the DDD paradigms. Introducing Kingdom Driven Design (aka KDD) – since in biology “Kingdom” is the second highest taxonomic rank, just after “Domain”. We will present some principles to help writing not-database-centric code, without being bloated by all the DDD requirements.
Let your Kingdom come!
Strategies for User Experience Design
Robert Stribley presented on strategies for user experience design. He discussed principles of responsive design such as mobile-first design, breakpoints, grids, and handling navigation and images across devices. The presentation agenda included learning about user journeys and designing responsive pages and a mobile app in teams. Guidelines for the project were to design experiences for MoMA's website and mobile app that complement each other and help visitors during their museum visit.
Responsive Web Design Tools
The document discusses responsive web design tools. It provides an agenda for a talk on responsive web design that includes discussing the state of RWD, doing a quick demo, and having a Q&A session. It then lists many design and prototyping tools as well as testing sites and tools that are useful for responsive web design. The speaker is introduced as a freelance UX designer and entrepreneur who has started companies and an agency focused on user experience and mobile design.
NACTO Urban Street Design Guide
The document is an overview of the upcoming NACTO Urban Street Design Guide, which will provide principles and best practices for designing urban streets. It outlines that the guide will discuss designing streets for multiple purposes, including as public spaces, for business activity, and for safety. It emphasizes that streets can be changed and redesigned through low-cost temporary improvements to test designs. The guide will categorize street design based on street width rather than conventional functional classifications.
Building SPA with Kendo UI
This document discusses building single page applications (SPAs) using Kendo UI. It introduces Kendo UI, which is a JavaScript library for building SPAs that provides UI widgets, data binding, and mobile app capabilities. It explains that SPAs load all necessary code on a single page load for a fluid user experience. The document then outlines the basic building blocks for an SPA using Kendo UI, including a router to manage navigation between views, views to represent screens, and a layout to render views. It previews an example Northwind catalog SPA that will be demonstrated.
DITA and Information Architecture for Responsive Web Design
Increasingly people are reading your technical content using a mobile device. How can you ensure that your DITA-based content can be read equally-well by a lineman using his weatherproofed tablet 18ft above the street, or an electronics engineer using her smartphone in a clean-room environment? The answer: responsive content. But designing effective responsive content is not just a matter of picking an HTML template and hoping for the best: you need to think about how your content will be presented, its priority to the user and how they can navigate through it. In this presentation Keith Schengili-Roberts and Phil Kneer from Yellow Pencil will talk about the information architecture considerations behind the creation of effective responsive design for technical content.
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.
Similar to IxDA Toronto Show and Tell RWD - tangerine by vadim tslaf (20)
Responsive Web Design presentation at the Fort Wayne AdFed
Responsive Web Design presentation at the Fort Wayne AdFed
Responsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits All
The Rise of Mobile for Nonprofit Communication & Fundraising
The Rise of Mobile for Nonprofit Communication & Fundraising
Hong kong drupal user group dec13th responsive web design for dummy
Hong kong drupal user group dec13th responsive web design for dummy
Modern Digital Design: The power of Responsive Design
Modern Digital Design: The power of Responsive Design
Dita and Information Architecture for Responsive Design
Dita and Information Architecture for Responsive Design
Responsive Web Design: How the mobile web has changed the way we think and work
Responsive Web Design: How the mobile web has changed the way we think and work
DITA and Information Architecture for Responsive Web Design
DITA and Information Architecture for Responsive Web Design
IxDA Toronto Show and Tell RWD - tangerine by vadim tslaf
- 1. Tangerine Responsive Redesign IxDA Toronto UX Show and Tell - Responsive Design Interaction Design, CX Vadim Tslaf
- 2. Page 2 • Marketing decision on design “facelift” • Converting the public site to RWD How it all started IxDA Toronto – Tangerine Responsive Redesign
- 3. Page 3 Initial challenges • Decision on channels for RWD conversion • Assessing a feasibility of responsive redesign implementation with IT • Choosing the right framework for RWD • POCs (Proof of Concept) – lots of them • Decisions on process – waterfall, agile, other. IxDA Toronto – Tangerine Responsive Redesign
- 4. Page 4 Content analysis and IA • Hundreds of pages, dozens of different page structures • No unified navigation IxDA Toronto – Tangerine Responsive Redesign
- 5. Page 5 Universal design solutions • Developing universal solutions for RWD adaptation • Creating a simplified navigation IxDA Toronto – Tangerine Responsive Redesign
- 6. Page 6 Wireframing • Wireframing key pages for all responsive layouts IxDA Toronto – Tangerine Responsive Redesign
- 7. Page 7 Visual design IxDA Toronto – Tangerine Responsive Redesign
- 8. Page 8 Rebranding and front end development IxDA Toronto – Tangerine Responsive Redesign