Mobile Website or Responsive Design? The Answer is NEITHER.

•

3 gefällt mir•1,235 views

By Derek Watson, Senior Developer at The Working Group Reviews the two most popular strategies for creating mobile web properties (separate mobile-specific sites vs. responsive css), the pros and cons of each, and a little known third technique that marries the best of both worlds.

Technologie Design

Mobile Website
or Responsive Design?
Neither!
Derek Watson, TWG
Oct 4th, 2013 - #FITCSCREENS13

Derek Watson
Developer at TWG
@dcwca @twg

Agenda

• Mobile websites
• Responsive web
• Pros / Cons
• How to combine the best of both

Web Architecture - 2004

Content
Management
System

Website

Web Architecture - 2007

Content
Management
System

Mobile Web

Website

Web Architecture - 2010

Content
Management
System

Mobile Web

iPhone App

Website

Web Architecture - 2013
Content
Management
System

HTTP API

Mobile Web

iPhone App

Android App

Website

Windows App

Blackberry App

Many mobile platforms
lead to complicated
architecture

Goals for The Web

• Native look & feel
• Lightweight
• Performant
• Wide device support

Mobile Websites - Defined

• Users are redirected to m.domain.com
• Separate project from the main website
• Views are rebuilt for mobile

• Limited functionality

Mobile Websites: Advantages

• Completely custom UI

Mobile Websites: Advantages

• Completely custom UI
• Lightweight

Mobile Websites: Advantages

• Completely custom UI
• Lightweight
• Target mobile browsers only

Mobile Websites: Challenges

• Separate projects, duplicate code

Mobile Websites: Challenges

• Separate projects, duplicate code
• Feature disparity

Mobile Websites: Challenges

• Separate projects, duplicate code
• Feature disparity
• URL fragmentation

Responsive Web - Defined

• Term coined in May 2010 by Ethan Marcotte
• CSS3 changes the layout of an HTML document
• Site “responds” to different screen sizes

“2013 Is The Year of
Responsive Web Design”
- Mashable.com (in 2012)

Responsive Web - Advantages

• Simple technology

Responsive Web - Advantages

• Simple technology
• Single project

Responsive Web - Advantages

• Simple technology
• Single project
• Feature parity

Responsive Web - Advantages

• Simple technology
• Single project
• Feature parity

• Uniﬁed URLs

Responsive Web - Challenges

• Contorting your HTML

Responsive Web - Challenges

• Contorting your HTML
• Responsive images

Responsive Web - Challenges

• Contorting your HTML
• Responsive images
• HTML and CSS bloat

Responsive Web - Challenges

• Contorting your HTML
• Responsive images
• HTML and CSS bloat

• Tricky design

Mobile Web
Fast loading
Custom UI
Mobile Optimized
Uniﬁed URLs
Single Project
Feature Parity

Responsive

“I’m increasingly
interested in solutions
that bring together the
best of both worlds.”
-Luke W. on “RESS”
[RESS intro]

RESS - Defined

• Device detection (but no redirects)
• Switching view templates server-side
• Using responsive css techniques where appropriate

Model

Desktop View
Controller
Tablet View
Phone View

Phone

Tablet

Desktop

Food for Thought

• Do you want the same experience on web & mobile?

Food for Thought

• Do you want the same experience on web & mobile?
• How critical is performance and load time?

Good Reads

A gallery of Responsive Web Designs

http://mediaqueri.es

Responsive Image Workﬂow

http://bit.ly/17JS1Lv

Performance Implications of Responsive Design

http://bit.ly/L9gEDg

RESS: Responsive Design + Server Side Components

http://bit.ly/nsW1nq

Weitere ähnliche Inhalte

Was ist angesagt?

Aligning with current trends in web development and allowing for quick updates and design changes, Kennedy Library is in the process of implementing the Divi theme, the “most popular premium WordPress theme in the world.“ In anticipation of an upcoming campus web redesign, the library is ensuring we are ready to change designs of our own pages quickly to align with the campus branding. While building pages visually with a front-end WYSIWYG editor in real time is exciting, we had to solve multiple challenges: communication structure, user training, user restrictions, theme customizations, etc. We tested the setup with a sub-site, and are in the process of moving the entire library website to the new theme. I present best practices, failures and successes as well as concrete examples and strategies for theme setup, plugin compatibility and web governance.

Going visual: Building the library website with the Divi theme

Conny Liegl

The time has never been better to learn mobile application development. For many app ideas, you don’t even need any prior native development knowledge. You can get started today with knowledge of HTML, CSS and JavaScript. Unlike native mobile development, mobile applications using web technologies can support many mobile platforms. I shared my own experience on building hybrid applications based on PhoneGap also explained why I suddenly changed my own opinion about native apps and switched back to Xamarin.

I knew there had to be a better way to build mobile apps

Alius Petraška

How to make WordPress your friend

Kerch McConlogue

Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Irfan Maulana

Buzzr: A "Cloud" Platform for Creating and Maintaining Websites

Ed Sussman

Week01 jan19

Jeanho Chu

Web design

David Durham

ReactJS with WordPress Headless Approach

JP Wallhorn

Responsive Design's is a way of making a single website that works well on mobile, tablet, and desktop browsers. Back in 2010 Ethan Marcotte, first coined the term "responsive design" and described it as having 3 components: Flexible Images Fluid Grids CSS Media Queries Well it seems Ethan let quite a few cats of out bag with this one, and we've been trying to herd those cats ever since. What started as exclusively a front-end web design technique has expanded to include a whole new range of both front-end and server-side programming techniques. The real challenge came when we also suddenly discovered that tried and true practices for project management, and creative concept development all started to fall apart. It’s not practical to create photoshop mockups of ever page in a site at every device size - There’s simply too many variables to account for in graphic design software. Responsive Design requires a new process for creating websites, and new ways of interacting with teams and clients. This presentation will outline a birds-eye-view of Responsive Techniques, Strategies, Tools, and Gotchas of RWD. It will focus on some of the new workflow techniques needed and cover some suggestions for where to go to learn more. Slide Summary 1-25: History of Responsive Design 26-50: Coding Basics (Developer Focused) 51-57: Progressive Enhancement 58-70: Mobile First 71-93: Responsive Workflows 96-99: Selling Responsive Design

Responsive Web Design - Introduction & Workflow Overview

Web design

Website analysis

The headless CMS

The Often Useful Somewhat Annoying World of WordPress Multisite

James Bundey

Responsivedesign 7-3-2012

Thomas Carney

WP 101 - Local Development - Themes and Plugins

Joe Querin

Jquery Mobile

Logical Minds

AppNotch

appnotch

There Is No Mobile: An Introduction To Responsive Web Design

Chris Love

Was ist angesagt? (18)

Going visual: Building the library website with the Divi theme

I knew there had to be a better way to build mobile apps

How to make WordPress your friend

Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Buzzr: A "Cloud" Platform for Creating and Maintaining Websites

Week01 jan19

Web design

ReactJS with WordPress Headless Approach

Responsive Web Design - Introduction & Workflow Overview

Web design

Website analysis

The headless CMS

The Often Useful Somewhat Annoying World of WordPress Multisite

Responsivedesign 7-3-2012

WP 101 - Local Development - Themes and Plugins

Jquery Mobile

AppNotch

There Is No Mobile: An Introduction To Responsive Web Design

Andere mochten auch

THE UNTOLD STORY : Why Every Business Need A Website?

Cyberspace Builder

Responsive Web Design - Enjeux, Solutions, Méthodologie

ekino

This whitepaper provides understanding of Responsive Design principles (RDP) and how they apply to your Oracle Content Management system. It also introduces the basic principles of Information Architecture and User Experience Management and shows real world examples of the impact of implementing the RDP. It’s here to help Oracle professionals to quickly identify areas of sub-standard performance and sub-par user experience in their WebCenter implementation and provide practical recommendations to designers and administrators on boosting user productivity.

Responsive Design and Information Architecture with Oracle Web Center Content...

Dmitri Khanine

Responsive/Interactive ArchitectureEnriching Urban Spaces with Interactive/ ...

Shereen Khashaba

Your real estate website is more than just a place where folks can search through your listings: it's a representation of your business and the quality of service you deliver. You'd never hand out ripped, wrinkly business cards or show up to open houses in sweatpants and a t-shirt...so why would you send prospective clients to an ugly, outdated website? To help inspire the creation of more real estate sites that emphasize both form and function, we've put together this list of the 25 most beautiful real estate websites. Agent sites, broker sites, hotel sites, international sites....so long as they focus on properties, they're included. Enjoy! (And let us know what you think in the comments section below.)

Top 25 Most Beautiful Real Estate Websites

Placester

Introduction to SEO Presentation

7thingsmedia

25 Real Estate Marketing Ideas The Pro's Use

Fit Small Business

Andere mochten auch (7)

THE UNTOLD STORY : Why Every Business Need A Website?

Responsive Web Design - Enjeux, Solutions, Méthodologie

Responsive Design and Information Architecture with Oracle Web Center Content...

Responsive/Interactive ArchitectureEnriching Urban Spaces with Interactive/ ...

Top 25 Most Beautiful Real Estate Websites

Introduction to SEO Presentation

25 Real Estate Marketing Ideas The Pro's Use

Ähnlich wie Mobile Website or Responsive Design? The Answer is NEITHER.

Responsive Web Design - Advantages and Best Practice for Sports Direct

Cantarus

Responsive Web Design: Advantages & Best Practice - Darrin Adams, Cantarus

Internet World

Responsive Web Design: How the mobile web has changed the way we think and work

vq20

Responsive

Farid Mezane

It’s tough for us professional SharePoint developers who have spent years perfecting our SharePoint skills, because now Microsoft is telling us we should use techniques like JavaScript on the client side instead. Wait a minute; isn’t JavaScript a sort of front-end hackers’ in-browser scripting language that was written over a weekend? While it’s true that JavaScript was produced in a hurry, and has a name that doesn’t make sense, it has matured a great deal in the last few years. A number of patterns and improvements have emerged to get around some of the shortcomings and support a more professional development model for building responsive client applications. In this talk we are going to see how far we can go with SharePoint Apps using JavaScript and client-side development for Windows, web and mobile applications.

Share point apps the good, the bad, and the pot of gold at the end of the r...

Bill Ayers

Rise of the responsive single page application

Oren Shatken

Enhancing SharePoint with Responsive Web Design

Eric Overfield

Reshaping SharePoint for Evolving Internet Devices

Eric Overfield

Cross Platform Mobile Development

Manesh Lad

Barry mobile-seo

Barry Schwartz

SES Berlin OMCap 2013

Rachel Pasqua

An Angular developer moving to React

Souvik Basu

SPCA2013 - Building Windows Client Applications for SharePoint 2013

NCCOMMS

Mobile web development

Moumie Soulemane

Reponsive web design (HTML5 + css3)

Sandip Jadhav

reponsive-web-design.pptx

adarshgupta131049

reponsive-web-design.pptx

adarshgupta131049

Branding SharePoint for Evolving Internet Devices

Eric Overfield

PSEWEB 2013 - Make it responsive - TERMINALFOUR

Terminalfour

Responsive web design

Ana-Maria Birtea

Ähnlich wie Mobile Website or Responsive Design? The Answer is NEITHER. (20)

Responsive Web Design - Advantages and Best Practice for Sports Direct

Responsive Web Design: Advantages & Best Practice - Darrin Adams, Cantarus

Responsive Web Design: How the mobile web has changed the way we think and work

Responsive

Share point apps the good, the bad, and the pot of gold at the end of the r...

Rise of the responsive single page application

Enhancing SharePoint with Responsive Web Design

Reshaping SharePoint for Evolving Internet Devices

Cross Platform Mobile Development

Barry mobile-seo

SES Berlin OMCap 2013

An Angular developer moving to React

SPCA2013 - Building Windows Client Applications for SharePoint 2013

Mobile web development

Reponsive web design (HTML5 + css3)

reponsive-web-design.pptx

Branding SharePoint for Evolving Internet Devices

PSEWEB 2013 - Make it responsive - TERMINALFOUR

Responsive web design

Mehr von TWG

How to set up world-class web hosting

TWG

2016 is the year of all things conversational. Chatbots, suddenly, are everywhere. Driven by the explosion in popularity of messaging apps like Kik, Slack and Facebook Messenger, chatbots are quickly becoming a core part of the software product mix. So does your business need a chatbot? This deck will help you understand the massive opportunity for companies who are bold enough to start building chatbots of their own. (Already au fait with chatbots and looking for a software team to help you with yours? Skip to slide 47 to see some of the chatbots we've built at TWG for our clients and ourselves.)

The Chatbots Are Coming: A Guide to Chatbots, AI and Conversational Interfaces

TWG

Lean Startup Methods: Breaking Out of the Newsroom

TWG

When you’re passionate about your product idea it’s tempting to do as much as you can yourself to get it off the ground. Learn how to source the right strategic partners and you’ll be able to get your product to market faster and give yourself more time to focus on the big picture. This presentation explores: - How to source strategic partners to help you launch your digital product - Pros and cons of alternative funding models - Using strategic partners to establish process and grow your team

Building Your Product: Alternative Funding Models for Digital Success

TWG

Five years ago, the company I had founded stalled. We wanted bigger, more exciting and more complex problems to solve with a bigger and better team. But with negligible sales experience, and a limited budget to hire top talent, I didn’t really know how to make it happen. The answer, we discovered (almost by accident), was to put our people, friends and community first. By focussing on real-life community building as a core part of a successful business strategy businesses of all kinds can: - Attract and retain great talent that believes in their mission - Generate more sales without needing salespeople - Create more happiness and fulfillment for everyone involved Building strong communities benefits the entire business ecosystem - just look Silicon valley, NYC and Toronto. With a strong community, we’re able to raise the bar and improve the overall quality of work, the return on investment, and thus support the economics of bigger projects, more investment and top talent. The rising tide, as they say, lifts all boats.

Community Building for Business Success

TWG

How can designers harness the awesome power of Agile to improve their workflow and work more effectively to build digital products as part of a team? Whether your exposure to Agile methodology is just beginning or you’re already an Agile evangelist, this presentation will arm you with killer tips for developing digital projects right alongside Agile-loving developers and project managers. Grab insights into using tools such as InVision App and custom-built software, like TWG’s AlmostScrum, to improve cross-disciplinary collaboration, and find out why experience design in an Agile world really is inevitable.

Embracing the Inevitable: Experience Design in an Agile World

TWG

Mobile Apps 101

TWG

Mehr von TWG (7)

How to set up world-class web hosting

The Chatbots Are Coming: A Guide to Chatbots, AI and Conversational Interfaces

Lean Startup Methods: Breaking Out of the Newsroom

Building Your Product: Alternative Funding Models for Digital Success

Community Building for Business Success

Embracing the Inevitable: Experience Design in an Agile World

Mobile Apps 101

Kürzlich hochgeladen

What are drone anti-jamming systems? The drone anti-jamming systems and anti-spoof technology protect against interference, jamming, and spoofing of the UAVs. To protect their security, countries are beginning to research drone anti-jamming systems, also known as drone strike weapons. The anti-jam and anti-spoof technology protects against interference, jamming and spoofing. A drone strike weapon is a drone attack weapon that can attack and destroy enemy drones. So what is so unique about this amazing system?

What Are The Drone Anti-jamming Systems Technology?

Antenna Manufacturer Coco

Strategies for Landing an Oracle DBA Job as a Fresher

Remote DBA Services

Real Time Object Detection Using Open CV

Khem

Partners Life - Insurer Innovation Award 2024

The Digital Insurer

GenCyber Cyber Security Day Presentation

Michael W. Hawkins

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

MySQL Webinar, presented on the 25th of April, 2024. Summary: MySQL solutions enable the deployment of diverse Database Architectures tailored to specific needs, including High Availability, Disaster Recovery, and Read Scale-Out. With MySQL Shell's AdminAPI, administrators can seamlessly set up, manage, and monitor these solutions, ensuring efficiency and ease of use in their administration. MySQL Router, on the other hand, provides transparent routing from the application traffic to the backend servers in the architectures, requiring minimal configuration. Completely built in-house and supported by Oracle, these solutions have been adopted by enterprises of all sizes for their business-critical applications. In this presentation, we'll delve into various database architecture solutions to help you choose the right one based on your business requirements. Focusing on technical details and the latest features to maximize the potential of these solutions.

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Miguel Araújo

Scaling API-first – The story of a global engineering organization Ian Reasor, Senior Computer Scientist - Adobe Radu Cotescu, Senior Computer Scientist - Adobe Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

apidays

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

Discord is a free app offering voice, video, and text chat functionalities, primarily catering to the gaming community. It serves as a hub for users to create and join servers tailored to their interests. Discord’s ecosystem comprises servers, each functioning as a distinct online community with its own channels dedicated to specific topics or activities. Users can engage in text-based discussions, voice calls, or video chats within these channels. Understanding Discord Servers Discord servers are virtual spaces where users congregate to interact, share content, and build communities. Servers may revolve around gaming, hobbies, interests, or fandoms, providing a platform for like-minded individuals to connect. Communication Features Discord offers a range of communication tools, including text channels for messaging, voice channels for real-time audio conversations, and video channels for face-to-face interactions. These features facilitate seamless communication and collaboration. What Does NSFW Mean? The acronym NSFW stands for “Not Safe For Work,” indicating content that may be inappropriate for professional or public settings. NSFW Content NSFW content encompasses material that is sexually explicit, violent, or otherwise graphic in nature. It often includes nudity, profanity, or depictions of sensitive topics.

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

UK Journal

Enterprise Knowledge’s Urmi Majumder, Principal Data Architecture Consultant, and Fernando Aguilar Islas, Senior Data Science Consultant, presented "Driving Behavioral Change for Information Management through Data-Driven Green Strategy" on March 27, 2024 at Enterprise Data World (EDW) in Orlando, Florida. In this presentation, Urmi and Fernando discussed a case study describing how the information management division in a large supply chain organization drove user behavior change through awareness of the carbon footprint of their duplicated and near-duplicated content, identified via advanced data analytics. Check out their presentation to gain valuable perspectives on utilizing data-driven strategies to influence positive behavioral shifts and support sustainability initiatives within your organization. In this session, participants gained answers to the following questions: - What is a Green Information Management (IM) Strategy, and why should you have one? - How can Artificial Intelligence (AI) and Machine Learning (ML) support your Green IM Strategy through content deduplication? - How can an organization use insights into their data to influence employee behavior for IM? - How can you reap additional benefits from content reduction that go beyond Green IM?

Driving Behavioral Change for Information Management through Data-Driven Gree...

Enterprise Knowledge

Developing An App To Navigate The Roads of Brazil

V3cube

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Neo4j

[2024]Digital Global Overview Report 2024 Meltwater.pdf

hans926745

Join our latest Connector Corner webinar to discover how UiPath Integration Service revolutionizes API-centric automation in a 'Quote to Cash' process—and how that automation empowers businesses to accelerate revenue generation. A comprehensive demo will explore connecting systems, GenAI, and people, through powerful pre-built connectors designed to speed process cycle times. Speakers: James Dickson, Senior Software Engineer Charlie Greenberg, Host, Product Marketing Manager

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

DianaGray10

A Domino Admins Adventures (Engage 2024)

Gabriella Davis

💉💊+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHABI}}+971581248768 +971581248768 Mtp-Kit (500MG) Prices » Dubai [(+971581248768**)] Abortion Pills For Sale In Dubai, UAE, Mifepristone and Misoprostol Tablets Available In Dubai, UAE CONTACT DR.Maya Whatsapp +971581248768 We Have Abortion Pills / Cytotec Tablets /Mifegest Kit Available in Dubai, Sharjah, Abudhabi, Ajman, Alain, Fujairah, Ras Al Khaimah, Umm Al Quwain, UAE, Buy cytotec in Dubai +971581248768''''Abortion Pills near me DUBAI | ABU DHABI|UAE. Price of Misoprostol, Cytotec” +971581248768' Dr.DEEM ''BUY ABORTION PILLS MIFEGEST KIT, MISOPROTONE, CYTOTEC PILLS IN DUBAI, ABU DHABI,UAE'' Contact me now via What's App…… abortion Pills Cytotec also available Oman Qatar Doha Saudi Arabia Bahrain Above all, Cytotec Abortion Pills are Available In Dubai / UAE, you will be very happy to do abortion in Dubai we are providing cytotec 200mg abortion pill in Dubai, UAE. Medication abortion offers an alternative to Surgical Abortion for women in the early weeks of pregnancy. We only offer abortion pills from 1 week-6 Months. We then advise you to use surgery if its beyond 6 months. Our Abu Dhabi, Ajman, Al Ain, Dubai, Fujairah, Ras Al Khaimah (RAK), Sharjah, Umm Al Quwain (UAQ) United Arab Emirates Abortion Clinic provides the safest and most advanced techniques for providing non-surgical, medical and surgical abortion methods for early through late second trimester, including the Abortion By Pill Procedure (RU 486, Mifeprex, Mifepristone, early options French Abortion Pill), Tamoxifen, Methotrexate and Cytotec (Misoprostol). The Abu Dhabi, United Arab Emirates Abortion Clinic performs Same Day Abortion Procedure using medications that are taken on the first day of the office visit and will cause the abortion to occur generally within 4 to 6 hours (as early as 30 minutes) for patients who are 3 to 12 weeks pregnant. When Mifepristone and Misoprostol are used, 50% of patients complete in 4 to 6 hours; 75% to 80% in 12 hours; and 90% in 24 hours. We use a regimen that allows for completion without the need for surgery 99% of the time. All advanced second trimester and late term pregnancies at our Tampa clinic (17 to 24 weeks or greater) can be completed within 24 hours or less 99% of the time without the need surgery. The procedure is completed with minimal to no complications. Our Women's Health Center located in Abu Dhabi, United Arab Emirates, uses the latest medications for medical abortions (RU-486, Mifeprex, Mifegyne, Mifepristone, early options French abortion pill), Methotrexate and Cytotec (Misoprostol). The safety standards of our Abu Dhabi, United Arab Emirates Abortion Doctors remain unparalleled. They consistently maintain the lowest complication rates throughout the nation. Our Physicians and staff are always available to answer questions and care for women in one of the most difficult times in their lives. The decision to have an abortion at the Abortion Cl

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Product Anonymous

🐬 The future of MySQL is Postgres 🐘

RTylerCroy

Automating Google Workspace (GWS) & more with Apps Script

wesley chun

Kürzlich hochgeladen (20)

What Are The Drone Anti-jamming Systems Technology?

Strategies for Landing an Oracle DBA Job as a Fresher

Real Time Object Detection Using Open CV

Partners Life - Insurer Innovation Award 2024

GenCyber Cyber Security Day Presentation

How to Troubleshoot Apps for the Modern Connected Worker

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

presentation ICT roal in 21st century education

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Driving Behavioral Change for Information Management through Data-Driven Gree...

Developing An App To Navigate The Roads of Brazil

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

[2024]Digital Global Overview Report 2024 Meltwater.pdf

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

A Domino Admins Adventures (Engage 2024)

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

🐬 The future of MySQL is Postgres 🐘

Automating Google Workspace (GWS) & more with Apps Script

Mobile Website or Responsive Design? The Answer is NEITHER.

1. Mobile Website or Responsive Design? Neither! Derek Watson, TWG Oct 4th, 2013 - #FITCSCREENS13

2. Derek Watson Developer at TWG @dcwca @twg

3. Agenda • Mobile websites • Responsive web • Pros / Cons • How to combine the best of both

4. Web Architecture

5. Web Architecture - 1999 HTML Pages

6. Web Architecture - 2004 Content Management System Website

7. Web Architecture - 2007 Content Management System Mobile Web Website

8. Web Architecture - 2010 Content Management System Mobile Web iPhone App Website

9. Web Architecture - 2013 Content Management System HTTP API Mobile Web iPhone App Android App Website Windows App Blackberry App

10. Many mobile platforms lead to complicated architecture

11. Goals for The Web • Native look & feel • Lightweight • Performant • Wide device support

12. The Past Mobile Websites

13. Mobile Websites - Defined • Users are redirected to m.domain.com • Separate project from the main website • Views are rebuilt for mobile • Limited functionality

14.

15. Mobile Websites: Advantages!

16. Mobile Websites: Advantages • Completely custom UI

17. Mobile Websites: Advantages • Completely custom UI • Lightweight

18. Mobile Websites: Advantages • Completely custom UI • Lightweight • Target mobile browsers only

19. Mobile Websites: Challenges

20. Mobile Websites: Challenges • Separate projects, duplicate code

21. Mobile Websites: Challenges • Separate projects, duplicate code • Feature disparity

22. Mobile Websites: Challenges • Separate projects, duplicate code • Feature disparity • URL fragmentation

23. The Present Responsive Web

24. Responsive Web - Defined • Term coined in May 2010 by Ethan Marcotte • CSS3 changes the layout of an HTML document • Site “responds” to different screen sizes

25.

26.

27. “2013 Is The Year of Responsive Web Design” - Mashable.com (in 2012)

28. Responsive Web: Advantages!

29. Responsive Web - Advantages • Simple technology

30. Responsive Web - Advantages • Simple technology • Single project

31. Responsive Web - Advantages • Simple technology • Single project • Feature parity

32. Responsive Web - Advantages • Simple technology • Single project • Feature parity • Uniﬁed URLs

33. Responsive Web: Challenges

34. Responsive Web - Challenges • Contorting your HTML

35. Responsive Web - Challenges • Contorting your HTML • Responsive images

36. Responsive Web - Challenges • Contorting your HTML • Responsive images • HTML and CSS bloat

37. Responsive Web - Challenges • Contorting your HTML • Responsive images • HTML and CSS bloat • Tricky design

38. Mobile Web Fast loading Custom UI Mobile Optimized Uniﬁed URLs Single Project Feature Parity Responsive

39. The Future It just might work!

40. “I’m increasingly interested in solutions that bring together the best of both worlds.” -Luke W. on “RESS” [RESS intro]

41. RESS - Defined • Device detection (but no redirects) • Switching view templates server-side • Using responsive css techniques where appropriate

42. Server-side MVC frameworks

43. MVC Model View Controller User

44. Model Desktop View Controller Tablet View Phone View Phone Tablet Desktop

45.

46.

47.

48. Client-side MVC

49. Food for Thought • Do you want the same experience on web & mobile?

50. Food for Thought • Do you want the same experience on web & mobile? • How critical is performance and load time?

51. Good Reads A gallery of Responsive Web Designs http://mediaqueri.es Responsive Image Workﬂow http://bit.ly/17JS1Lv Performance Implications of Responsive Design http://bit.ly/L9gEDg RESS: Responsive Design + Server Side Components http://bit.ly/nsW1nq

52. Questions?

53. Thanks! Derek Watson @dcwca @twg

Mobile Website or Responsive Design? The Answer is NEITHER.

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie Mobile Website or Responsive Design? The Answer is NEITHER.

Ähnlich wie Mobile Website or Responsive Design? The Answer is NEITHER. (20)

Mehr von TWG

Mehr von TWG (7)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Mobile Website or Responsive Design? The Answer is NEITHER.