Why responsive design isn't enough

•

3 j'aime•955 vues

Responsive Design is all the rage right now, but honestly, is it the solution to most of our problems? My answer is no, BUT, that also depends on how you define Responsive Design. Is it using @media queries? Partly, yes. In this presentation I discuss a more holistic approach to responsive design.

Technologie

Why Responsive Design
isn't enough
(by itself)

What Problems are we trying to
solve?
Serving optimized experiences across devices/browsers
Having only 1 website
Maintaining 1 codebase

What issues are we facing?
Legacy Browsers
Content Delivery
Who gets What and How

http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/

Responsive sites are made up a
few things
Good Content
Design
Development
Maintenance/Testing

320 & Up
Base css is simplified mobile, customise for IE
All major browsers support @media

Image Handling
Adaptive Images
No end all solution yet

Content Delivery
Media Queries
Adapt/Responsive.js
Mustache

Be Responsible Developers, not
responsive developers

Client Side Resources
Adapt.js Ruby gems:
Respond.js SASS
Retina.js Susy
LESS Bourbon
Bootstrap Neat
Foundation
A bajillion other frameworks Codekit

Server Side Resources
Mustache
Adaptive Images
WURFL
Mobble
WP Fluid Images
WP Retina 2x

Resources:
https://kippt.com/nathanielks/responsive-resources

Contenu connexe

Tendances

We have heard about AMP pages, Facebook Instant Articles and even Apple News, so what dose this all mean? We go through the deck I presented at Web Analytics Wednesday's on the current issues with Ad Blocking and Mobile Speed issues that leads us to AMP. Learn how to get started with AMP and learn how to integrate with Analytics platforms like Google Analytics and Adobe Marketing Cloud in its infant stages. Any questions feel free to contact me on LinkedIn

AMP Accelerated Mobile Pages - Getting Started & Analytics

Vincent Koc

My presentation from South Florida Code Camp 2016 on Accelerated Mobile Pages (AMP). SFLCC was in lovely Fort Lauderdale, Florida. Google started AMP as an initiative to dramatically improve the performance of the mobile web. The main approach that AMP employs is placing HTML on a diet, in an attempt to gain breakneck speeds, for loading content on our mobile devices. This new open-source based framework throws out the standard approach to loading bloated CSS and JavaScript libraries and instead becomes a lean, mean superfast machine. Join me to find out what exactly are Accelerated Mobile Pages, what do they mean for search, and how can you prepare for it on your website?

Amp up your Site with Accelerated Mobile Pages

Brian McKeiver

Make Local WordPress Development Simple

WP Engine

D7 switching

c3tyler

My 2018 WordCamp Sacramento session. At first glance, the WordPress admin can be pretty daunting, especially if it’s your first experience with a content management system (CMS), let alone WordPress. This talk will give designers and developers tips and tricks on ways they can customize the admin to create a better experience for their clients and create peace-of-mind for themselves. We’ll cover things like how to customize the Dashboard widgets, hiding menu items, defining roles and capabilities, creating an Options page, and a variety of plugins that can help.

Optimizing The WordPress Admin For Users

👩🏻‍💻 Cristina Robinson (She/Her)

Web benefits

steggles28

I had a chance to be part of a team that started developing a decent size React Native mobile app from scratch. As a developer with a solid React background, I had some expectations at first. During my initial research, everything sounded terrific: performance stats, ease of development, learn-once-use-everywhere, debugging tools, etc. But is everything terrific really? I'm excited to share my journey about how my expectations met the reality. I'll give my personal opinion about the matureness of the technology, for which use-cases it fits well and for which it doesn't. I'll also try to address the most popular misconceptions about React Native, which front-end developers usually have before they have the chance to actually built something.

React Native: Expectations vs Reality

Kaloyan Kosev

Accelerated Mobile Pages

Jeremy Green

Accelerated Mobile Pages (AMP) & How it will Impact your Business

Harshavardhan MP

When you’re building websites for clients, you’re always looking for ways to either make your life, or your client’s life easier. Today, we’ll explore how to create your own library of client site starter templates. Learn how having your own library of conversion-ready, tested websites makes getting started a LOT easier and faster, especially for clients who don’t have niche needs or have smaller budgets.

How To Work Faster & More Profitably With Client Site Starter Templates

WP Engine

AWS launched in 2006, and since then we have released more than 530 services, features, and major announcements. Every year, we outpace the previous year in launches and are continuously accelerating the pace of innovation across the organization. Ever wonder how we formulate customer-centric ideas, turn them into features and services, and get them to market quickly? This session dives deep into how an idea becomes a service at AWS and how we continue to evolve the service after release through innovation at every level. We even spill the beans on how we manage operational excellence across our services to ensure the highest possible availability. Come learn about the rapid pace of innovation at AWS, and the culture that formulates magic behind the scenes.

AWS Summit Sydney 2014 | Managing the Pace of Innovation: Behind the Scenes a...

Amazon Web Services

Real world sandboxed solutions

Andrew Woodward

AWS Summit Auckland 2014 | Managing the Pace of Innovation: Behind the Scenes...

Amazon Web Services

Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16

Sean Malseed

7 deadly sins for your app

Davide Di Cillo

No one likes to wait. Whether it’s waiting for a bus, the elevator or a site to load, it can be a frustrating experience. Slow sites lead to lost conversions and annoyed customers. Luckily, there are some straightforward practices that you can put into place to make sure your site performs its very best, regardless of screen-size or device. This talk is for everyone who has ever been frustrated by their slow-loading website, but never known how to kick it into high gear.

Need for speed: Tips to Optimize your Website

Anne Thomas

Trying to get clients or stakeholders to see the need for accessibility is hard, people still see it as alot of extra work with rewards that are hard to provide a ROI. However web spiders/crawlers are our biggest blind user on the web, in essence alot of what works to increase SEO will increase the accessibility of your site. Lets take a look at some site building and development tasks we can perform that provide a tick to SEO and a tick to Accessibility. If we can take this approach we can see that the cost of Accessibility is actually bundled with the cost of SEO and not an additional burden to the project. This talk looks at the state of accessibility in Joomla and shows how accessibility is intrinsically linked to SEO performance from a development perspective. We will also look at some new tools to help check and test for accessibility throughout the development process, and how we can add these into a CI/CD approach. Whilst this talk is aimed at all audiences it will be focused on development and management of the development process. With time permitting and depending on the audience questions/experience level there may be some tech demos utilised to help illustrate concepts. *All accessibility guideline discussions will be based on Australian Government Standards http://www.australia.gov.au/accessibility

Accessibility, SEO and Joomla

JoomlaDay Australia

Tendances (17)

AMP Accelerated Mobile Pages - Getting Started & Analytics

Amp up your Site with Accelerated Mobile Pages

Make Local WordPress Development Simple

D7 switching

Optimizing The WordPress Admin For Users

Web benefits

React Native: Expectations vs Reality

Accelerated Mobile Pages

Accelerated Mobile Pages (AMP) & How it will Impact your Business

How To Work Faster & More Profitably With Client Site Starter Templates

AWS Summit Sydney 2014 | Managing the Pace of Innovation: Behind the Scenes a...

Real world sandboxed solutions

AWS Summit Auckland 2014 | Managing the Pace of Innovation: Behind the Scenes...

Get AMP'ed for Accelerated Mobile Pages - SEO Grail Philadelphia 1/20/16

7 deadly sins for your app

Need for speed: Tips to Optimize your Website

Accessibility, SEO and Joomla

Similaire à Why responsive design isn't enough

Going Mobile First With Drupal

Jesper Wøldiche

vishvakumar-ui-web

VISHVA KUMAR

Today, a Web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our websites look good across that spectrum of devices we may forget that we need to make sure that our websites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet. In this session, we’ll look at the tools that can help you understand, measure and improve the performance of your websites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply. This presentation builds upon Dave Olsen’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”

Measuring Web Performance - HighEdWeb Edition

Dave Olsen

Web development

RaziyaChoudhary

webdevelopment-210628031421.pdf

DakshPratapSingh1

Intro to tech stacks bonny

Lama K Banna

AbdulBasit

Abdul Basit

React Native has been at the forefront of the mobile app development world for quite some time now. It has taken the tech world by storm by allowing developers to create native mobile apps for both iOS and Android using a single codebase. Although React Native app development has proven successful for businesses, it’s important to know how it works and why it’s the best fit for your mobile project over other native technologies. In this blog post, we’ll go over some of the known pros and cons of React Native, as well as discuss other alternatives.

What to choose for Mobile app development- React Native vs Native.

Techugo

Two approaches to RWD: Pure & Hybrid. Brendan Falkowski

MeetMagentoNY2014

AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...

Bojan Veljanovski

Bootstrap 4 Online Training Course Book Sample

Bootstrap Creative

Everything is new for you if you’re a newbie in the tech world. But one thing you are sure about is becoming a MERN stack developer. Today, MERN stack development is a lucrative career that opens several doors of opportunities. But do you know the roadmap to becoming a MERN stack developer? What are the technologies you should learn at the tip, and in what order? So many questions might be hitting your mind, and you definitely want the answer to all. Right? Well, this guide got you covered. In this blog post, we have rounded up about mastering this technology and becoming a skilled MERN stack developer. So, what are you waiting for? Why not take a tour of this guide? Let’s start.

Roadmap to Become a Pro in MERN Stack Development

75waytechnologies

How to Find Your Ideal Technical Responsive Design Approach

5th Finger

Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content

National Information Standards Organization (NISO)

A React Native app is a real mobile app With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

9 reasons why programmers should learn react native

React Sharing

Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp

Chris Love

Responsive web design

Christian Glover Wilson

Ruby On Rails Presentation

Paul Pajo

HTML5 Technical Executive Summary

Gilad Khen

For years, Bootstrap and React have been helpful. As frontend giants, there is always the question of which is better. Let's compare these two platforms for making websites and apps to see which one is better. Front-end developers must choose a front-end framework after figuring out what the client wants. Businesses grow and do well when they use new ideas and improve their skills. This article looks at two popular Frontend Frameworks, Bootstrap and React.

Bootstrap or React for Front-End Web Development.pdf

WPWeb Infotech

Similaire à Why responsive design isn't enough (20)

Going Mobile First With Drupal

vishvakumar-ui-web

Measuring Web Performance - HighEdWeb Edition

Web development

webdevelopment-210628031421.pdf

Intro to tech stacks bonny

AbdulBasit

What to choose for Mobile app development- React Native vs Native.

Two approaches to RWD: Pure & Hybrid. Brendan Falkowski

AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...

Bootstrap 4 Online Training Course Book Sample

Roadmap to Become a Pro in MERN Stack Development

How to Find Your Ideal Technical Responsive Design Approach

Jan 8 2014 NISO Webinar: Device to Device: Adaptive Interfaces for Content

9 reasons why programmers should learn react native

Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp

Responsive web design

Ruby On Rails Presentation

HTML5 Technical Executive Summary

Bootstrap or React for Front-End Web Development.pdf

Dernier

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

Data Cloud, More than a CDP by Matt Robison

Anna Loughnan Colquhoun

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Martijn de Jong

Tech Trends Report 2024 Future Today Institute.pdf

hans926745

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

Handwritten Text Recognition for manuscripts and early printed texts

Maria Levchenko

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

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

GenCyber Cyber Security Day Presentation

Michael W. Hawkins

As privacy and data protection regulations evolve rapidly, organizations operating in multiple jurisdictions face mounting challenges to ensure compliance and safeguard customer data. With state-specific privacy laws coming up in multiple states this year, it is essential to understand what their unique data protection regulations will require clearly. How will data privacy evolve in the US in 2024? How to stay compliant? Our panellists will guide you through the intricacies of these states' specific data privacy laws, clarifying complex legal frameworks and compliance requirements. This webinar will review: - The essential aspects of each state's privacy landscape and the latest updates - Common compliance challenges faced by organizations operating in multiple states and best practices to achieve regulatory adherence - Valuable insights into potential changes to existing regulations and prepare your organization for the evolving landscape

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

TrustArc

Advantages of Hiring UIUX Design Service Providers for Your Business

Pixlogix Infotech

Building Digital Trust in a Digital Economy Veronica Tan, Director - Cyber Security Agency of Singapore Apidays Singapore 2024: Connecting Customers, Business and Technology (April 17 & 18, 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 Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

apidays

This presentation explores the impact of HTML injection attacks on web applications, detailing how attackers exploit vulnerabilities to inject malicious code into web pages. Learn about the potential consequences of such attacks and discover effective mitigation strategies to protect your web applications from HTML injection vulnerabilities. for more information visit https://bostoninstituteofanalytics.org/category/cyber-security-ethical-hacking/

HTML Injection Attacks: Impact and Mitigation Strategies

Boston Institute of Analytics

Tata AIG General Insurance Company - Insurer Innovation Award 2024

The Digital Insurer

Developing An App To Navigate The Roads of Brazil

V3cube

Histor y of HAM Radio presentation slide

vu2urc

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

Powerful Google developer tools for immediate impact! (2023-24 C)

wesley chun

Effective data discovery is crucial for maintaining compliance and mitigating risks in today's rapidly evolving privacy landscape. However, traditional manual approaches often struggle to keep pace with the growing volume and complexity of data. Join us for an insightful webinar where industry leaders from TrustArc and Privya will share their expertise on leveraging AI-powered solutions to revolutionize data discovery. You'll learn how to: - Effortlessly maintain a comprehensive, up-to-date data inventory - Harness code scanning insights to gain complete visibility into data flows leveraging the advantages of code scanning over DB scanning - Simplify compliance by leveraging Privya's integration with TrustArc - Implement proven strategies to mitigate third-party risks Our panel of experts will discuss real-world case studies and share practical strategies for overcoming common data discovery challenges. They'll also explore the latest trends and innovations in AI-driven data management, and how these technologies can help organizations stay ahead of the curve in an ever-changing privacy landscape.

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

TrustArc

With more memory available, system performance of three Dell devices increased, which can translate to a better user experience Conclusion When your system has plenty of RAM to meet your needs, you can efficiently access the applications and data you need to finish projects and to-do lists without sacrificing time and focus. Our test results show that with more memory available, three Dell PCs delivered better performance and took less time to complete the Procyon Office Productivity benchmark. These advantages translate to users being able to complete workflows more quickly and multitask more easily. Whether you need the mobility of the Latitude 5440, the creative capabilities of the Precision 3470, or the high performance of the OptiPlex Tower Plus 7010, configuring your system with more RAM can help keep processes running smoothly, enabling you to do more without compromising performance.

Boost PC performance: How more available memory can improve productivity

Principled Technologies

Dernier (20)

AWS Community Day CPH - Three problems of Terraform

Data Cloud, More than a CDP by Matt Robison

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Tech Trends Report 2024 Future Today Institute.pdf

Boost Fertility New Invention Ups Success Rates.pdf

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

Handwritten Text Recognition for manuscripts and early printed texts

presentation ICT roal in 21st century education

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

GenCyber Cyber Security Day Presentation

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

Advantages of Hiring UIUX Design Service Providers for Your Business

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

HTML Injection Attacks: Impact and Mitigation Strategies

Tata AIG General Insurance Company - Insurer Innovation Award 2024

Developing An App To Navigate The Roads of Brazil

Histor y of HAM Radio presentation slide

Powerful Google developer tools for immediate impact! (2023-24 C)

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

Boost PC performance: How more available memory can improve productivity

Why responsive design isn't enough

1. Why Responsive Design isn't enough (by itself)

2. Nathaniel Schweinberg @nathanielks

3. What Problems are we trying to solve? Serving optimized experiences across devices/browsers Having only 1 website Maintaining 1 codebase

4. A Good Start @media queries are great!

5. What issues are we facing? Legacy Browsers Content Delivery Who gets What and How

6. The Underlying issue?

7. Websites got Big Asses

8. Images!

9. Request Headers!

10. Why "Responsive Design" isn't enough

11. http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/

12. What is Responsive Design?

13. Responsive sites are made up a few things Good Content Design Development Maintenance/Testing

14. Content Creation Keep things simple

15.

16. 320 & Up Base css is simplified mobile, customise for IE All major browsers support @media

17. Image Handling Adaptive Images No end all solution yet

18.

19. Content Delivery Media Queries Adapt/Responsive.js Mustache

20. http://www.lukew.com/ff/entry.asp?1392

21. Optimized Scripts Mobble WURFL

22. Be Responsible Developers, not responsive developers

23. Client Side Resources Adapt.js Ruby gems: Respond.js SASS Retina.js Susy LESS Bourbon Bootstrap Neat Foundation A bajillion other frameworks Codekit

24. Server Side Resources Mustache Adaptive Images WURFL Mobble WP Fluid Images WP Retina 2x

25. Real World Scenarios

26. Theatre Francais

27. Resources: https://kippt.com/nathanielks/responsive-resources

28.

29. Nathaniel Schweinberg @nathanielks