The document discusses responsive web design and mobile web development. It recommends creating a single page web application that is optimized for all devices as a long term goal. It also discusses challenges like different screen sizes, browsers, and touch vs mouse interactions across diverse devices. The document advocates adapting the web experience according to the device using responsive design principles.
Presented at Web Directions Code, Melbourne
If you have a website—particularly one that generates revenue for your organization—you need a Progressive Web App. So where do you begin? How do you decide which features of a Progressive Web App make sense for your users? What tools can make the process easier (or harder)? In this practical session, Jason will guide you through the key design decisions you’ll need to make about your Progressive Web App and how those decisions impact the scope of your project. He'll also teach you how to avoid common pitfalls and help you take full advantage of Progressive Web App technology.
Responsive Web Design, as laid out by Ethan Marcotte, is about a whole lot more than just media queries. I look at the three elements of responsive web design, statistics about mobile web browsing, and offer tips on how to best design sites for responsiveness.
N.B.: Several slides are lifted wholesale from Bryan Rieger's excellent "Rethinking the Mobile Web" presentation, be sure to check it out!
Now you see me... Adaptive Web Design and DevelopmentJonas Päckos
Progressive enhancement is still an important approach for building responsive websites and web applications. While JavaScript can now be assumed to be widely available, progressive enhancement avoids single points of failure and improves performance by loading critical content first before non-essential enhancements. The distinction between websites and applications is also blurred, so progressive techniques remain applicable to most digital experiences on the web.
This document discusses various user experience (UX) patterns and antipatterns for multiplatform mobile app design. It begins with definitions of UX and provides overviews of common mobile navigation patterns like side drawers and tab menus. The document then covers antipatterns to avoid such as splash screens, forcing registration, and excessive confirmation messages. It also discusses dark patterns designed to mislead users. Throughout, it provides examples and recommendations for implementing positive patterns and avoiding antipatterns to create a good user experience.
Responsive web design involves creating layouts that adapt to different screen sizes using flexible grids and media queries. It allows for a device-agnostic approach and is easier to build than separate mobile sites. Key aspects of responsive design include planning with a mobile-first approach, prototyping, using consistent breakpoints based on content, usability testing, writing for different screens, designing visually hierarchical layouts, and addressing images and media. Testing is important throughout the process. While responsive design is a good base, other solutions like responsive or native apps may still be needed, and the job requires ongoing review.
Using Responsive Web Design To Make Your Web Work EverywhereChris Love
The document discusses responsive web design and strategies for creating websites that adapt to different screen sizes. It recommends taking a mobile-first approach, using fluid layouts and media queries to make content responsive. Key tips include starting small and resizing the browser, using Chrome's device mode to emulate different devices, and the matchMedia API to bind JavaScript to breakpoints. The overall goal is to provide an optimal viewing experience across all devices.
The document discusses responsive images and issues around their implementation. It begins by outlining the new <picture> element and srcset/sizes attributes that allow images to adapt based on screen size and resolution. It then discusses challenges like managing many images, the need for image breakpoints to determine appropriate file sizes, and the tension between responsive images and the browser's lookahead parser. Overall, the document examines both the promise and difficulties of responsive images on the modern web.
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanRobert Nyman
This document provides a history of the development of the web from 1991 to the present. It discusses technologies like HTML, HTTP, XMLHttpRequest, AJAX, and mobile web development. It then introduces progressive web apps, which are web applications that are reliable, fast and engaging like native apps through the use of technologies like service workers, web app manifests and push notifications. Examples are given of companies like Flipkart that have seen success adopting progressive web apps.
Optimizing User Experience with Responsive Web DesignClarissa Peterson
Responsive web design allows a single website to be accessed from any device by dynamically adjusting the layout depending on screen size. The content remains the same across devices but is formatted appropriately for each screen width through techniques like adjusting column numbers and widths. Designing first for mobile forces focus on essential content and ensures parity across devices. Examples demonstrate how navigation, images and text restructure seamlessly for an optimized experience on any device.
Responsive Web Design for Universal Access 2016Kate Walser
You can improve how well your website works and looks across different devices using responsive web design techniques. But did you know you can also improve access for all users, including those with disabilities, by applying responsive techniques? Learn how.
The document discusses responsive web design and compares it to other approaches like adaptive web design. It addresses some myths around responsive design, including that every website should be responsive, that it hurts performance, and that it limits creativity. It also discusses technical aspects like media queries and their uses beyond mobile screens.
jQTouch – Mobile Web Apps with HTML, CSS and JavaScriptPhilipp Bosch
The document discusses jQTouch, a plugin for jQuery that allows developers to build mobile web apps with HTML, CSS, and JavaScript. It works by turning regular web pages into touch-friendly "apps" that can be added to a mobile device's home screen. Key points covered include:
- jQTouch uses jQuery and adds iPhone-style UI elements and themes
- It supports animations between "pages" and touch events
- Combined with PhoneGap, web apps built with jQTouch can be wrapped into native mobile apps and distributed through app stores
- The presentation demonstrates jQTouch's capabilities and provides information on getting started and further resources
This document contains the transcript of a presentation by Chris Heilmann on web development. Some of the key points discussed include:
- The benefits of progressive enhancement and using HTML, CSS, and JavaScript together to build robust and accessible websites.
- How limitations in early design can foster creativity.
- The importance of error handling and defensive coding practices.
- Embracing new technologies like Service Workers and Manifests to build Progressive Web Apps.
- Rethinking the idea that JavaScript is unreliable and should not be depended on, as modern browsers have made it a capable tool.
// talk given at WordCamp Chicago 2014 //
Fast, simple, SMART. Mobile devices have forever changed the way we interact with content. Now we have to consider many things such as HiDPI graphics, responsive design, speed, UI/UX patterns, touch target sizes, gestures, and more. All while not losing track of what’s important: Content.
We’re going to discuss the influence of mobile on design trends and learn implementation techniques of smart design such as icon fonts, svg, and other helpful tips.
The document discusses progressive web apps (PWAs) and outlines key considerations for creating a PWA. It addresses questions around what a PWA is, how to make a website feel like an app, offline functionality, push notifications, and creating a roadmap. Examples from companies that implemented PWAs successfully are provided. The conclusion recommends developing a progressive roadmap that starts with baseline PWA features and builds out functionality over time based on priorities and initiatives.
This document provides guidance on how to build effective mobile web apps. It discusses understanding the mobile landscape and user needs, designing for a mobile-first approach, leveraging HTML5 features, optimizing for touch interfaces, and using technologies like CSS3, JavaScript, and device APIs. The key recommendations are to focus on the most common user tasks, reduce content, and make all functionality accessible within 3 taps or clicks.
“If Tetris has taught me anything, it’s that errors pile up and accomplishments disappear” is a common quote and it seems we’re living this to its full extend as web developers. We fail to celebrate the successes we have and the tools that are at our disposal but we’re never short of finding reasons why things don’t work. We also tend to pile on technology on technology to solve problems that may actually not exist and thus clog up the web. In this talk Chris Heilmann wants to remind us what we achieved and how we should celebrate it and how we should stop trying to solve problems that are simply beyond our control.
Presentation by Clarissa Peterson for LVL Studio's UX Soiree, November 21, 2012, in Montreal, Quebec. Overview of responsive design with focus on user experience.
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkSt. Petersburg College
Presented June 8, 2012 (Online) at the 'Access by Touch: Delivering Library Services Through Mobile Technologies' conference sponsored by Amigos Library Services.
Description: By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this webinar, you will:
- learn what a mobile framework is.
- acquire best practices in mobile Web development.
- understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile Web apps.
- recognize the differences between native and web apps.
- have an opportunity to continue to work with Chad after the webinar to demonstrate what you learned.
- gain access after the webinar to a free Web server so you can see your mobile Web app live.
Slides from a presentation I gave at these conferences:
— Big Design
— Front Porch
— Thunder Plains
— Web Afternoon
I co-presented at Big Design with Matt Baxter.
http://twitter.com/mbxtr
This document discusses hybrid mobile app development. It defines hybrid apps as combining the best of mobile web apps and native apps by developing basic features with HTML, CSS, and JavaScript and leveraging native APIs for more advanced features. This allows for quicker development and updates across platforms while still accessing device-level capabilities. The document outlines several techniques hybrid apps can use such as URL modification and interception to trigger native functionality from web views and pass data between web and native components. It promotes choosing the right development approach for each feature rather than relying solely on web or native.
According to the International Telecommunication Union, at the end of 2011 there were more than 1 billion mobile‐broadband subscriptions worldwide! With more of your library users using mobile devices to access information they will assume that your library can be available from anywhere, at any time, and on most any device. Now is the time to be ready for this demand.
In this webinar:
- Explore some innovative library mobile website designs and see how they were built.
- Understand how HTML, CSS, and JavaScript work together to build mobile websites.
- Learn what a mobile framework is and why they are used.
- Provide some existing mobile services/apps that can be included in library-created mobile websites.
- Acquire best practices in mobile Web development from start to finish.
This document discusses the state of mobile UX and challenges in choosing a development approach. It outlines the options of native, web, and responsive design. Native apps offer rich features but require high costs and platform fragmentation. Web apps have broad reach but limited functionality. Responsive design provides continuity across devices but not all content is equally suited. The key is understanding user needs and balancing capabilities with costs for the optimal strategy.
This document discusses the state of mobile UX and challenges in choosing a development approach. It outlines the options of native apps, mobile web, and responsive design. Native apps provide the best experience but are more expensive, while mobile web has broader reach but limited features. Responsive design aims for continuity across devices but may not be optimal for all situations. The document emphasizes understanding user needs and having a clear strategy to determine the best approach for each use case and business goals.
This document discusses how to create mobile apps that feel native using only web technologies. It covers supporting features in Mobile Safari like local storage, CSS3 features, and geolocation. It recommends using web technologies over native due to quicker iteration times. Specific techniques covered include detecting browser type, adding home screen icons, startup images, going full screen, and viewport settings. The document also discusses frameworks like jQuery Mobile but notes native DOM APIs may be sufficient. It covers input features, touch vs click, animations, locking orientation, and performance tips. It acknowledges limitations of Android and webOS and recommends testing on actual devices. Finally, it discusses hybrid mobile frameworks like PhoneGap and Titanium that allow developing for multiple platforms using one code
Breaking the Box: Pushing the Boundaries of UX with DrupalAcquia
The document discusses pushing the boundaries of user experience with Drupal. It talks about using responsive design and progressive enhancement to build websites that automatically adapt to different screen sizes like desktop, tablet, and mobile. Responsive design uses CSS media queries and a fluid, data-driven approach to layouts. This allows a single website to effectively serve users on any device. The document recommends using responsive frameworks like Omega or Mojo themes for Drupal, and discusses building custom "UX modules" to enhance the user experience for different devices.
An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.
Ecommerce Mini Project / Group Project CodingHemant Sarthak
This is an Ecommerce Mini Project / Group Project Presentation that I created as part of the college curriculum, this presentation is a more coding focused presentation that you might need to give in your college.
If you want Design focused presentation please see Ecommerce Mini Project / Group Project Design PPT that I uploaded.
It has things explained like VS Code, Adobe XD, Owl Carousel etc.
This document discusses making SharePoint websites accessible on mobile devices. It explains that responsive design using HTML5, CSS3, and media queries allows a single website to automatically adapt to different screen sizes and devices. It also describes using device channels in SharePoint 2013 to deliver different content for specific devices, but notes limitations. The document demonstrates creating responsive designs with media queries and recommends responsive design over separate mobile pages.
1) The document discusses how to make web applications accessible to users with JavaScript disabled or who are using older browsers or mobile devices.
2) It recommends coding the basic page structure for the "lowest common denominator" and then using DOM scripting and JavaScript libraries to enhance the experience for newer browsers and devices.
3) The document provides tips on understanding your audience, adding accessibility features like links to turn off advanced options, and using techniques like yellow highlighting to help low-sighted users follow changes to the page.
1) The document discusses making web applications accessible to users with JavaScript disabled or who are using older browsers/mobile devices (1.0 users).
2) It provides examples of problems that can arise if a site requires JavaScript, like not being able to add an event on a site that uses JavaScript for that functionality.
3) The document suggests coding sites like it was 1999 by following web standards and building a functional site without JavaScript, then enhancing it with JavaScript if available rather than requiring it.
QuickSoft Mobile Tips & Tricks 11-03-10Almog Koren
The document provides an overview of mobile design and development. It discusses types of mobile applications, platforms and tools including Flash Lite, Flash Player 10.1 and Adobe Air. It covers considerations for designing mobile user interfaces like screen size and user input. It also discusses best practices for mobile development including performance optimization and testing.
A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP.
You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.
Web development is evolving at a breakneck speed every passing year. New website technologies are being discovered regularly as developers explore new ways of innovation.
To make it easier for you, I have analyzed the shifts across industries and created an ultimate list of some of the latest web development trends in 2022.
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampChris Love
This document discusses doing modern web development with JavaScript and HTML5 in the enterprise. It begins by introducing the author and their background. It then discusses resources like podcast interviews and JavaScript libraries the author has created. The document goes on to summarize some key differences between enterprise and non-enterprise development. The main part of the document discusses what a modern web app is, how to structure one for the enterprise, and technologies like HTML5, CSS3, JavaScript, and APIs. It emphasizes the importance of making enterprise JavaScript apps maintainable, scalable, testable, and deployable. It also provides recommendations for managing a JavaScript app project.
This document discusses techniques to make a WordPress site resemble a native iPhone app, including hiding the browser address bar, scaling the window properly, customizing the home screen icon and splash screen, and putting the site into full-screen mode. While not a substitute for a responsive design, these tricks can provide a better mobile experience and make the site look more like a true app. Examples are provided of the code needed and the impact on a sample site.
Similar to Responsive web design & mobile web development - a technical and business approach (20)
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsMydbops
This presentation, delivered at the Postgres Bangalore (PGBLR) Meetup-2 on June 29th, 2024, dives deep into connection pooling for PostgreSQL databases. Aakash M, a PostgreSQL Tech Lead at Mydbops, explores the challenges of managing numerous connections and explains how connection pooling optimizes performance and resource utilization.
Key Takeaways:
* Understand why connection pooling is essential for high-traffic applications
* Explore various connection poolers available for PostgreSQL, including pgbouncer
* Learn the configuration options and functionalities of pgbouncer
* Discover best practices for monitoring and troubleshooting connection pooling setups
* Gain insights into real-world use cases and considerations for production environments
This presentation is ideal for:
* Database administrators (DBAs)
* Developers working with PostgreSQL
* DevOps engineers
* Anyone interested in optimizing PostgreSQL performance
Contact info@mydbops.com for PostgreSQL Managed, Consulting and Remote DBA Services
Best Practices for Effectively Running dbt in Airflow.pdfTatiana Al-Chueyr
As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models.
This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through:
- Standard ways of running dbt (and when to utilize other methods)
- How Cosmos can be used to run and visualize your dbt projects in Airflow
- Common challenges and how to address them, including performance, dependency conflicts, and more
- How running dbt projects in Airflow helps with cost optimization
Webinar given on 9 July 2024
Quantum Communications Q&A with Gemini LLM. These are based on Shannon's Noisy channel Theorem and offers how the classical theory applies to the quantum world.
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...Toru Tamaki
Jindong Gu, Zhen Han, Shuo Chen, Ahmad Beirami, Bailan He, Gengyuan Zhang, Ruotong Liao, Yao Qin, Volker Tresp, Philip Torr "A Systematic Survey of Prompt Engineering on Vision-Language Foundation Models" arXiv2023
https://arxiv.org/abs/2307.12980
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfjackson110191
These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.
Sustainability requires ingenuity and stewardship. Did you know Pigging Solutions pigging systems help you achieve your sustainable manufacturing goals AND provide rapid return on investment.
How? Our systems recover over 99% of product in transfer piping. Recovering trapped product from transfer lines that would otherwise become flush-waste, means you can increase batch yields and eliminate flush waste. From raw materials to finished product, if you can pump it, we can pig it.
The Rise of Supernetwork Data Intensive ComputingLarry Smarr
Invited Remote Lecture to SC21
The International Conference for High Performance Computing, Networking, Storage, and Analysis
St. Louis, Missouri
November 18, 2021
Measuring the Impact of Network Latency at TwitterScyllaDB
Widya Salim and Victor Ma will outline the causal impact analysis, framework, and key learnings used to quantify the impact of reducing Twitter's network latency.
Implementations of Fused Deposition Modeling in real worldEmerging Tech
The presentation showcases the diverse real-world applications of Fused Deposition Modeling (FDM) across multiple industries:
1. **Manufacturing**: FDM is utilized in manufacturing for rapid prototyping, creating custom tools and fixtures, and producing functional end-use parts. Companies leverage its cost-effectiveness and flexibility to streamline production processes.
2. **Medical**: In the medical field, FDM is used to create patient-specific anatomical models, surgical guides, and prosthetics. Its ability to produce precise and biocompatible parts supports advancements in personalized healthcare solutions.
3. **Education**: FDM plays a crucial role in education by enabling students to learn about design and engineering through hands-on 3D printing projects. It promotes innovation and practical skill development in STEM disciplines.
4. **Science**: Researchers use FDM to prototype equipment for scientific experiments, build custom laboratory tools, and create models for visualization and testing purposes. It facilitates rapid iteration and customization in scientific endeavors.
5. **Automotive**: Automotive manufacturers employ FDM for prototyping vehicle components, tooling for assembly lines, and customized parts. It speeds up the design validation process and enhances efficiency in automotive engineering.
6. **Consumer Electronics**: FDM is utilized in consumer electronics for designing and prototyping product enclosures, casings, and internal components. It enables rapid iteration and customization to meet evolving consumer demands.
7. **Robotics**: Robotics engineers leverage FDM to prototype robot parts, create lightweight and durable components, and customize robot designs for specific applications. It supports innovation and optimization in robotic systems.
8. **Aerospace**: In aerospace, FDM is used to manufacture lightweight parts, complex geometries, and prototypes of aircraft components. It contributes to cost reduction, faster production cycles, and weight savings in aerospace engineering.
9. **Architecture**: Architects utilize FDM for creating detailed architectural models, prototypes of building components, and intricate designs. It aids in visualizing concepts, testing structural integrity, and communicating design ideas effectively.
Each industry example demonstrates how FDM enhances innovation, accelerates product development, and addresses specific challenges through advanced manufacturing capabilities.
Quality Patents: Patents That Stand the Test of TimeAurora Consulting
Is your patent a vanity piece of paper for your office wall? Or is it a reliable, defendable, assertable, property right? The difference is often quality.
Is your patent simply a transactional cost and a large pile of legal bills for your startup? Or is it a leverageable asset worthy of attracting precious investment dollars, worth its cost in multiples of valuation? The difference is often quality.
Is your patent application only good enough to get through the examination process? Or has it been crafted to stand the tests of time and varied audiences if you later need to assert that document against an infringer, find yourself litigating with it in an Article 3 Court at the hands of a judge and jury, God forbid, end up having to defend its validity at the PTAB, or even needing to use it to block pirated imports at the International Trade Commission? The difference is often quality.
Quality will be our focus for a good chunk of the remainder of this season. What goes into a quality patent, and where possible, how do you get it without breaking the bank?
** Episode Overview **
In this first episode of our quality series, Kristen Hansen and the panel discuss:
⦿ What do we mean when we say patent quality?
⦿ Why is patent quality important?
⦿ How to balance quality and budget
⦿ The importance of searching, continuations, and draftsperson domain expertise
⦿ Very practical tips, tricks, examples, and Kristen’s Musts for drafting quality applications
https://www.aurorapatents.com/patently-strategic-podcast.html
Are you interested in dipping your toes in the cloud native observability waters, but as an engineer you are not sure where to get started with tracing problems through your microservices and application landscapes on Kubernetes? Then this is the session for you, where we take you on your first steps in an active open-source project that offers a buffet of languages, challenges, and opportunities for getting started with telemetry data.
The project is called openTelemetry, but before diving into the specifics, we’ll start with de-mystifying key concepts and terms such as observability, telemetry, instrumentation, cardinality, percentile to lay a foundation. After understanding the nuts and bolts of observability and distributed traces, we’ll explore the openTelemetry community; its Special Interest Groups (SIGs), repositories, and how to become not only an end-user, but possibly a contributor.We will wrap up with an overview of the components in this project, such as the Collector, the OpenTelemetry protocol (OTLP), its APIs, and its SDKs.
Attendees will leave with an understanding of key observability concepts, become grounded in distributed tracing terminology, be aware of the components of openTelemetry, and know how to take their first steps to an open-source contribution!
Key Takeaways: Open source, vendor neutral instrumentation is an exciting new reality as the industry standardizes on openTelemetry for observability. OpenTelemetry is on a mission to enable effective observability by making high-quality, portable telemetry ubiquitous. The world of observability and monitoring today has a steep learning curve and in order to achieve ubiquity, the project would benefit from growing our contributor community.
How Social Media Hackers Help You to See Your Wife's Message.pdfHackersList
In the modern digital era, social media platforms have become integral to our daily lives. These platforms, including Facebook, Instagram, WhatsApp, and Snapchat, offer countless ways to connect, share, and communicate.
How RPA Help in the Transportation and Logistics Industry.pptxSynapseIndia
Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionBert Blevins
Cybersecurity is a major concern in today's connected digital world. Threats to organizations are constantly evolving and have the potential to compromise sensitive information, disrupt operations, and lead to significant financial losses. Traditional cybersecurity techniques often fall short against modern attackers. Therefore, advanced techniques for cyber security analysis and anomaly detection are essential for protecting digital assets. This blog explores these cutting-edge methods, providing a comprehensive overview of their application and importance.
8. Web ? What Web ? One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices W3.org - Mobile Web Best Practices 1.0 - 2008
11. Interests of the Any Web devices approaches Our goal is to design Web Pages available and optimized on all web-able devices Two short term goals : Create unique Websites for all devices ! Create Web App for mobile devices , with native equivalent quality http://www.facebook.com , http://touch.facebook.com http://x.facebook.com http://www.pmu.fr http://mob.pmu.fr http://mobile.parier.pmu.fr https://tab.pmu.fr/hippique
12. Interests of the Any Web devices approaches Our goal is to design Web Pages available and optimized on all web-able devices One long term goal : Create ________ an _____ , _____ , ___ , ____ ____________________ ___________ industrially Unique Smooth Sexy Fast Single Page Web App for all devices !
14. Interests of the Any Web devices approaches Our goal is to design Web Pages available and optimized on all web-able devices One long term goals : Create an Unique Single Page Web App for all devices ! Navigation Caching URL Testing Browser support Ergonomic designing HTML5 support SEO Javascript
17. What is « Responsive Web design » ? http://www.alistapart.com/articles/responsive-web-design
18. What is « Responsive Web design » ? How you can deliver a quality experience to your users no matter how large (or small) their screen are . Responsive Design Fluid Grids Flexibles images Media Queries
19. Why is « Responsive Web design » so hype ? Responsive design is hype because : The « Wahou effect » Very visual and so easy to understand Seen an easy solution to solve all their problem Too hype ? Delivering a quality Experience not delivering a great looking web site for any screen size It doesn’t solve everything
20. Adapt or Die As told before, now we have too many devices, many capabilities, ... Screen : Screen size from 3 to 80” Resolution from QVGA to WUXGA Interaction: touch, mouse, remote, … Network : Latency from 3ms to 1s Bandwidth from 3kB/s to 20MB/s Browser support : HTML <4 to 5 CSS 2 / 3 Hardware: RAM From 128mo 20go CPU from 500mHz to 4*3Ghz
22. I’m a Mobile Developper I use daily : My IDE My interface designing tools I develop for few devices : iOS hardware Android Phone & Tablet I use a lots : Native components API I use the simulator for debugging The documentation on the SDK is rather accurate
23. I’m a Mobile Developper I‘m asked to get the same results by: Using Web Technologies Writing Javascript ! Move a part of Rendering server Side Find the good place for code Learn about packaging Thinking differently Rewriting lot of stuff no more handled by the Native APIs
24. I am a Desktop Web Designer I develop on IE 7, IE8, IE 9 Firefox Chrome For simplicity I use fix width Debugging on IE is quite difficult
25. I am a Desktop Web Designer Now I have to develop web app for: iOS 3.1.3, iOS 4.2.1, iOS 5.0.1 Android 2.2, Android 2.3, Android 4.0 Opera Mini, Opera Mobile Firefox / Chrome IE Mobile IE 7, IE8, IE 9 And I can’t install them on my computer to test Debugging is worst on mobile than on IE. No more fixed width, I do fluid interfaces on very different screen sizes.
26. I am a Desktop Web Designer And you will be asked: To do something small With offline support (poor bandwith) With smooth animation That reacts quickly With touch’y features (like facebook, twitter, …) That works on every mobile. With the same functionalities than the website. Original design Embedded in apps for every market I am not Santa Claus, you will have to choose
27. One Website For all devices : Adapt to mobile 3 strategies CSS only Framework driven Handcrafted
28. One Website For all devices : CSS only Do media queries, nothing more IE handling Google-Chrome Frame or Respond.js Pros Only impact the CSS Cons Only simple things client side Not reactive interface Avoid jQuery plugins overflow: scroll position: fixed
30. One Website For all devices : Framework driven http://jquerymobile.com/test/ http://jquerymobile.com/demos/1.0.1/docs/about/platforms.html Aiming Mobile + Tablet (+desktop) Pros: Unified UI Touch handling Transitions between pages with AJAX partial rendering Cons: Heavy Limited to jQuery Mobile components Default CSS not so nice on Desktop
32. One Website For all devices : Handcrafted Choose a limited number of devices (2 or 3 max) to test on Webkit/Firefox : 80% mobile market Forget about IE : Google chrome frame Have fun with Zepto on any webkit optimized library Normalize touch and click behavior Use effects, CSS transitions, …
34. WebApp with native equivalent quality If your goal is to design Mobile Web applications and Website You should probably think Hybride : Encapulsation of web pages in Web Views Do navigation in Native Use Native components when needed Communication between Native and WebView by Extending Javascript
38. Touch handling Yes but : Doesn’t work on desktop Nor on Windows Phone Nor on Opera Mini … http://modernizr.github.com/Modernizr/touch.html
39. Touch handling $.support.touch = ('ontouchstart' in window) if no touch support $(‘body’).bind(‘click’, function(e){ e.preventDefault(); $(e.target).trigger(‘tap’); });
40. Touch handling Ok, but You have to trigger your router manually every time you click on a link You can’t validate forms by clicking on the input[type=« submit »] You can’t open external links in a new tab.
41. Touch handling Ok but we can do it : var externalLinkRegex = new RegExp("^([a-z;A-Z;0-9])+:"); // Catch click so no page reload occurs $('body').on('click', 'a', function (e) { var $link = $(e.target).closest('a'); var href = $link.attr('href'); // do not prevent click on external links if(!href || !externalLinkRegex.test(href)){ e.preventDefault(); } }); $('body').on('tap', 'a', function (e) { var $link = $(e.target).closest('a'); var href = $link.attr('href'); if(!href) return false; if(href === '#') return false; if(externalLinkRegex.test(href)) return true; // only navigate if href is not # router.navigate(href, true); return false; }); // Submit forms $('body').on('tap', 'a', function (e) { var $target = $(e.target); if(!$target.closest('input[type="submit"]').length) return; var $form = $target.closest('form'); if($form.length){ $form.first().submit(); return false; } });
42. Touch handling Good but when I click on a link, and an other link appear under my finger, multiple click events are triggered. Just give up here…
45. jQuery Mobile jQuery Mobile : Support + Browser sniffing vMouse + event Position fixed without GPU acceleration issue ( Soon in 1.1 < 3 Months) Transition between pages Partial AJAX rendering Unit tests !!! Normalized Inputs with native interface for Select Butons (with image, grouped, …, flipped), sliders, … navbars Position fixed Dialog / Page Grid accordions Lists A list of supported devices Next version would make it easier just to grab the functionnality that you want OpenSource, licence, mailing list,
46. jQuery Mobile and URLs URLs are an important part on the WEB : Access Bookmarks SEO Stats To render your site quickly, you may want : the full page to be rendered in HTML, No Ajax Loading on cold URL invocation and: Then in the same site, you may not want the full page to be reloaded Partial content replacement And : You want to deal correctly with others link : Router
47. Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile jQuery Mobile Plugins
48. Zepto, jQMobi A little part of the jQuery API querySelectorAll Dom Traversing attr, CSS, text, html, addClass, … ajax Events : bind, trigger, on, … Lighter because written for new browsers: Webkit, Firefox But mobile is hard, forget about Windows Phone, Opera Mini on BlackBerry, … Write everything, do not trust jQuery plugins
49. Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile jqMobi Zepto jQuery Mobile Plugins
50. Modernizr sur mobile Modernizr : Which features are available in this browser ? Works well on IE, Chrome and Firefox Need some work around on Mobile (Touch, …) http://haz.io/
51. Routing Plugins UI DOM Ajax Plugins Touch Feature Detection jQuery Mobile Modernizr jqMobi Zepto jQuery Mobile Plugins
52. Performance Web performance is a broad topic ! Lots of papers Some dedicated Workshop Some business With lots of influence factors : Dom Overload, CPU usage, JavaScript Speed, Networking bandwidth and latency, Shim Quality, touch handling, speed of the loading wheel, … With one and only one goal : Increase the Perceived performance
53. How to increase the perceived performance ? Reduce network time : Avoid mixing SSLs sites Avoid CORS (OPTIONS request make it slow) Avoid small files ( Sprites, JS and CSS minification) Don’t load anything useless Make It fluid A 30fps list scrolling is better than a 60fps with some latency Ask your users
54. Mobile First Mobile First ? Think for mobile Extend for others Mobile First is: Hype A Philosophy to structure your Development Accept, understand, embrace, but don’t be extremist Performance Ergonomic Capabilities Design Usage Focus Dynamic Loading
55. Mobile First Accept, understand, embrace, but don’t be extremist “ should be on the lips of every web designer . “ Ethan Marcotte , Responsive Web Design
57. A LAST SMALL ADVICE Before you start this adventure,
58. A word to Manager Managers please: Considers this move as mush as from a technologist point of view than an human one Consider all the technical possibilities to : Minimize risks Reduce frustrations Satisfy your customers Cost reduction ? Going on new platforms Uniformisation of the user Experience
59. A word to Developper Developer : Don’t be afraid : lot’s of fun, new stuff Be careful : lot’s of traps too Always look for the good mix : Innovation, sexy stuff Working stuff Don’t forget : Mobile First, More Communication and more Brainstorming Ask the users
60. Thank you This is an internal technical presentation done by BSD. Our twitter : @AtosWorldline Atos, the Atos logo, Atos Consulting, Atos Worldline, Atos Sphere, Atos Cloud and Atos WorldGrid are registered trademarks of Atos SA. June 2011