Media queries, server-side or client-side sniffers, how do we determine if the user is a mobile or desktop device? This tech talk will discuss which is the right solution(s) and how to implement it taking into consideration the various mobile user's browser capacity, bandwidth restrictions, as well as user choice.
Jenifer Hanen
@msjen
http://blackphoebe.com/msjen
The document summarizes key techniques for responsible responsive web design, including building mobile-first responsive designs, keeping CSS images in their place, conditionally loading JavaScript based on screen size and capabilities, delivering different sized images at different screen sizes, and handling high-density images carefully. It also discusses debates around whether a one-size-fits-all responsive approach can compete with a tailored experience and ensuring responsive designs are optimized for performance.
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.
Web2.0: from "I know nothing" to "I know something" in 2 hours (what?!?)Paolo Massa
The document discusses the concept and history of "Web 2.0". It begins with a disclaimer that Web 2.0 is an evolving buzzword trend. It then discusses how the term was coined by Tim O'Reilly in 2004 to describe websites that harness user participation and collective intelligence through open APIs and interactivity. Examples discussed include social bookmarking sites like Delicious, media sharing sites like Flickr, wikis like Wikipedia, and mashups that combine data from multiple sites. The document also notes that Web 2.0 concepts like AJAX enable more interactive and dynamic web applications.
The document discusses the concept of responsive design and mobile first approaches to web design. It notes that as mobile usage increases, web design needs to adapt to various screen sizes through flexible grids, flexible images, and media queries. A mobile first approach focuses on designing for the constraints of mobile devices first before expanding the design to larger screens, in order to prioritize usability on most common devices. This drives innovation through solutions that leverage capabilities unique to mobile like touch and location services.
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.
Presentation to:
Madison Web Design & Development Meetup - February 11, 2013.
Web Content Mavens, Washington, DC - January 8, 2013.
NYC Web Design Meetup -January 24, 2013.
The document summarizes key techniques for responsible responsive web design, including building mobile-first responsive designs, keeping CSS images in their place, conditionally loading JavaScript based on screen size and capabilities, delivering different sized images at different screen sizes, and handling high-density images carefully. It also discusses debates around whether a one-size-fits-all responsive approach can compete with a tailored experience and ensuring responsive designs are optimized for performance.
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.
Web2.0: from "I know nothing" to "I know something" in 2 hours (what?!?)Paolo Massa
The document discusses the concept and history of "Web 2.0". It begins with a disclaimer that Web 2.0 is an evolving buzzword trend. It then discusses how the term was coined by Tim O'Reilly in 2004 to describe websites that harness user participation and collective intelligence through open APIs and interactivity. Examples discussed include social bookmarking sites like Delicious, media sharing sites like Flickr, wikis like Wikipedia, and mashups that combine data from multiple sites. The document also notes that Web 2.0 concepts like AJAX enable more interactive and dynamic web applications.
The document discusses the concept of responsive design and mobile first approaches to web design. It notes that as mobile usage increases, web design needs to adapt to various screen sizes through flexible grids, flexible images, and media queries. A mobile first approach focuses on designing for the constraints of mobile devices first before expanding the design to larger screens, in order to prioritize usability on most common devices. This drives innovation through solutions that leverage capabilities unique to mobile like touch and location services.
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.
Presentation to:
Madison Web Design & Development Meetup - February 11, 2013.
Web Content Mavens, Washington, DC - January 8, 2013.
NYC Web Design Meetup -January 24, 2013.
Creating mobile apps without native codeJoakim Kemeny
The document discusses creating mobile apps without using native code. It describes how mobile apps today are often created natively, but that native apps have disadvantages like being expensive to create and only working on specific platforms. The document then presents alternatives like mobile web apps and hybrid apps. It provides examples of how to build a basic mobile web app using HTML, CSS, and responsive design techniques like viewports and media queries to make the app work well on different devices.
How To Be an HTML5 Mobile Cloud ChampionChris Love
Chris Love is a Chief Mobility Officer who focuses on mobile cloud technologies. He advocates for mobile-first design and HTML5 web applications to reach large consumer markets on personal mobile devices. Some key points he discusses include using meta tags and viewports to optimize the mobile experience, leveraging new HTML5 form inputs and CSS3 features, and considering touch and mobile usability in design. He also discusses options for enterprise mobility including managing devices and data in the cloud.
This is an introduction to Developing Mobile Web sites using Microsoft Webmatrix and jQuery to create rich, enganging mobile web sites. You can view the demo site http://m.movie.extremewebworks.com
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.
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.
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.
Why Nobody Fills Out My Forms 2 - Electric Boogalo (Updated)Andrew Malek
Still having difficulty encouraging people to fill out web forms to sign up for newsletters, apply for jobs, or complete their online shopping orders? Find out even more tips to help keep people from abandoning early, such as making form field widths more convenient, easing credit card entry, grouping related fields into sections to promote scanning, and styling buttons and controls so your webpage does not look like it was written in 2000.
The document discusses responsive web design and developing for multiple devices. It recommends creating a single responsive website that adapts to different screens through techniques like fluid grids, flexible images, and media queries. It also suggests considering hybrid approaches that incorporate both web and native capabilities to deliver high-quality experiences across all devices.
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
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.
2021 Chrome Dev Summit: Web Performance 101Tammy Everts
What do we mean when we talk about "web performance"? Why should you care about it? How can measure it? How do you get other people in your organization to care? In this workshop at the 2021 Chrome Dev Summit, I covered these questions – including an overview of the history of performance metrics, up to Core Web Vitals.
The document discusses how mobile sites are getting slower due to larger page sizes from images, CSS, JavaScript and fonts. It provides tips for optimizing images, such as using responsive images and smaller image sizes. It also recommends prioritizing critical content over non-essential elements like unnecessary JavaScript and web fonts to improve page load times.
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.
Martin bazley Creating effective content 15 Mar 11Martin Bazley
The document summarizes tips for creating effective digital content on a budget. It discusses writing for the web by focusing on visual elements, short paragraphs, and easy scanning. Key recommendations include planning, evaluating audiences through research, and utilizing free or cheap tools like WordPress, YouTube, and social media. Proper content structure and signposting across a website is also emphasized to quickly engage users.
This document provides search strings and footprints to identify various blog, article, social networking, and forum platforms as well as directory submission sites. It includes footprints for vBulletin, BuddyPress, Drupal, Elgg, PHPfox, Oxwall, Jcow, MediaWiki, Wikkawiki, MoinMoin, TikkiWiki, Pligg, GetBoo, PHPDug, Scuttle, MyBB, MVN Forum, UseBB, YaBB, phpBB, ExpressionEngine, SMF, PHP-Nuke, VBulletin, Open Classifieds Directory, Open Link Directory, Particle Links Directory, and php Link Directory.
Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...Strangeloop
Last year at Velocity, Strangeloop's VP Product, Hooman Beheshti, presented the findings from phase one of Strangeloop’s long-term research into the relationship between web performance and business benefits. The results were also published in Watching Websites. Since then, we’ve received a barrage of questions from the web performance community, which fueled phase two of our study. In this presentation, Strangeloop president Joshua Bixby offers our most recent findings.
Some of the community’s questions were:
* Who were the clients?
* How fast were the pages?
* What acceleration techniques were implemented?
* What happened to the key page components (such as JS size, payload and roundtrips) of the websites?
* How did changing key variables (page load time, payload, number of roundtrips, etc.) affect the outcome?
We’ve been collecting and analyzing data to help us answer these questions, as well as some new ones we’ve thought up along the way. Join us as we present our findings, and help us consider what areas deserve further study.
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]Tammy Everts
This document discusses how slow load times can hurt the user experience on websites and provides suggestions for improving performance. It notes that users expect pages to load within 2 seconds and cites studies showing that even small improvements in load time (1 second or less) can significantly increase conversion rates and other metrics. Common causes of poor performance are discussed, such as inefficient stylesheets, unoptimized JavaScript, and large images. The document provides many suggestions for optimizing front-end and back-end performance, such as creating a performance budget, minimizing page weight, deferring scripts, optimizing third-party content, and continuous monitoring.
This document provides an overview and guidelines for developing an effective eMarketing strategy using digital and social media. It begins with an introduction to basic digital media concepts such as URLs, web pages, and landing pages. It then discusses listening to customers online, analyzing social media insights and trends, and using analytics tools. The document concludes by offering tips for developing an online presence, including planning a website, finding an authentic voice, and effective copywriting. The overall aim is to provide a framework for establishing clear eMarketing guidelines.
We’ll get deep in the well-known techniques for website’s performance (from Steve Souders and others) and how real mobile devices reacts to each one. Are mobile browsers compatible with CSS Sprites or with Lazy Load Script? What about inline images and canvas? What are the big differences between desktop and mobile web performance?
Presentation given by Jenifer Hanen on Mon April 16, 2012 at Breaking Development Orlando [http://bdconf.com/2012/orlando].
"Designing and developing for mobile devices can be overwhelming in the sheer amount of factors to consider. Questions of where get started or how to retool for fast and lovely mobile sites can send one screaming for the supposed safety of Webkit before running and hiding under an iOS rock. But such fear and trembling is unnecessary and we can go forth in confidence with the minimalist's guide on data sipping as a legitimate lifestyle, serving responsive images, how to strip that code, and do I really need all this Javascript?"
The document discusses the benefits of meditation for reducing stress and anxiety. Regular meditation practice can help calm the mind and body by lowering heart rate and blood pressure. Making meditation a part of a daily routine, even if just 10-15 minutes per day, can offer improvements to mood, focus, and overall feelings of well-being over time.
Creating mobile apps without native codeJoakim Kemeny
The document discusses creating mobile apps without using native code. It describes how mobile apps today are often created natively, but that native apps have disadvantages like being expensive to create and only working on specific platforms. The document then presents alternatives like mobile web apps and hybrid apps. It provides examples of how to build a basic mobile web app using HTML, CSS, and responsive design techniques like viewports and media queries to make the app work well on different devices.
How To Be an HTML5 Mobile Cloud ChampionChris Love
Chris Love is a Chief Mobility Officer who focuses on mobile cloud technologies. He advocates for mobile-first design and HTML5 web applications to reach large consumer markets on personal mobile devices. Some key points he discusses include using meta tags and viewports to optimize the mobile experience, leveraging new HTML5 form inputs and CSS3 features, and considering touch and mobile usability in design. He also discusses options for enterprise mobility including managing devices and data in the cloud.
This is an introduction to Developing Mobile Web sites using Microsoft Webmatrix and jQuery to create rich, enganging mobile web sites. You can view the demo site http://m.movie.extremewebworks.com
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.
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.
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.
Why Nobody Fills Out My Forms 2 - Electric Boogalo (Updated)Andrew Malek
Still having difficulty encouraging people to fill out web forms to sign up for newsletters, apply for jobs, or complete their online shopping orders? Find out even more tips to help keep people from abandoning early, such as making form field widths more convenient, easing credit card entry, grouping related fields into sections to promote scanning, and styling buttons and controls so your webpage does not look like it was written in 2000.
The document discusses responsive web design and developing for multiple devices. It recommends creating a single responsive website that adapts to different screens through techniques like fluid grids, flexible images, and media queries. It also suggests considering hybrid approaches that incorporate both web and native capabilities to deliver high-quality experiences across all devices.
Responsive web design & mobile web development - a technical and business app...Atos_Worldline
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.
2021 Chrome Dev Summit: Web Performance 101Tammy Everts
What do we mean when we talk about "web performance"? Why should you care about it? How can measure it? How do you get other people in your organization to care? In this workshop at the 2021 Chrome Dev Summit, I covered these questions – including an overview of the history of performance metrics, up to Core Web Vitals.
The document discusses how mobile sites are getting slower due to larger page sizes from images, CSS, JavaScript and fonts. It provides tips for optimizing images, such as using responsive images and smaller image sizes. It also recommends prioritizing critical content over non-essential elements like unnecessary JavaScript and web fonts to improve page load times.
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.
Martin bazley Creating effective content 15 Mar 11Martin Bazley
The document summarizes tips for creating effective digital content on a budget. It discusses writing for the web by focusing on visual elements, short paragraphs, and easy scanning. Key recommendations include planning, evaluating audiences through research, and utilizing free or cheap tools like WordPress, YouTube, and social media. Proper content structure and signposting across a website is also emphasized to quickly engage users.
This document provides search strings and footprints to identify various blog, article, social networking, and forum platforms as well as directory submission sites. It includes footprints for vBulletin, BuddyPress, Drupal, Elgg, PHPfox, Oxwall, Jcow, MediaWiki, Wikkawiki, MoinMoin, TikkiWiki, Pligg, GetBoo, PHPDug, Scuttle, MyBB, MVN Forum, UseBB, YaBB, phpBB, ExpressionEngine, SMF, PHP-Nuke, VBulletin, Open Classifieds Directory, Open Link Directory, Particle Links Directory, and php Link Directory.
Velocity 2010: Performance Impact, Part Two: More Findings from the Front Lin...Strangeloop
Last year at Velocity, Strangeloop's VP Product, Hooman Beheshti, presented the findings from phase one of Strangeloop’s long-term research into the relationship between web performance and business benefits. The results were also published in Watching Websites. Since then, we’ve received a barrage of questions from the web performance community, which fueled phase two of our study. In this presentation, Strangeloop president Joshua Bixby offers our most recent findings.
Some of the community’s questions were:
* Who were the clients?
* How fast were the pages?
* What acceleration techniques were implemented?
* What happened to the key page components (such as JS size, payload and roundtrips) of the websites?
* How did changing key variables (page load time, payload, number of roundtrips, etc.) affect the outcome?
We’ve been collecting and analyzing data to help us answer these questions, as well as some new ones we’ve thought up along the way. Join us as we present our findings, and help us consider what areas deserve further study.
How slow load times hurt UX (and what you can do about it) [FluentConf 2016]Tammy Everts
This document discusses how slow load times can hurt the user experience on websites and provides suggestions for improving performance. It notes that users expect pages to load within 2 seconds and cites studies showing that even small improvements in load time (1 second or less) can significantly increase conversion rates and other metrics. Common causes of poor performance are discussed, such as inefficient stylesheets, unoptimized JavaScript, and large images. The document provides many suggestions for optimizing front-end and back-end performance, such as creating a performance budget, minimizing page weight, deferring scripts, optimizing third-party content, and continuous monitoring.
This document provides an overview and guidelines for developing an effective eMarketing strategy using digital and social media. It begins with an introduction to basic digital media concepts such as URLs, web pages, and landing pages. It then discusses listening to customers online, analyzing social media insights and trends, and using analytics tools. The document concludes by offering tips for developing an online presence, including planning a website, finding an authentic voice, and effective copywriting. The overall aim is to provide a framework for establishing clear eMarketing guidelines.
We’ll get deep in the well-known techniques for website’s performance (from Steve Souders and others) and how real mobile devices reacts to each one. Are mobile browsers compatible with CSS Sprites or with Lazy Load Script? What about inline images and canvas? What are the big differences between desktop and mobile web performance?
Presentation given by Jenifer Hanen on Mon April 16, 2012 at Breaking Development Orlando [http://bdconf.com/2012/orlando].
"Designing and developing for mobile devices can be overwhelming in the sheer amount of factors to consider. Questions of where get started or how to retool for fast and lovely mobile sites can send one screaming for the supposed safety of Webkit before running and hiding under an iOS rock. But such fear and trembling is unnecessary and we can go forth in confidence with the minimalist's guide on data sipping as a legitimate lifestyle, serving responsive images, how to strip that code, and do I really need all this Javascript?"
The document discusses the benefits of meditation for reducing stress and anxiety. Regular meditation practice can help calm the mind and body by lowering heart rate and blood pressure. Making meditation a part of a daily routine, even if just 10-15 minutes per day, can offer improvements to mood, focus, and overall feelings of well-being over time.
Mobile Development on a Shoestring ConnectionJenifer Hanen
Designing and developing mobile applications and responsive web sites when there are a variety of ways that a person can connect to the mobile web, as we can't assume unlimited data and wifi.
The document discusses best practices for mobile user experience design, providing tips on choosing between a mobile website or app, prioritizing user goals and context, designing for different mobile devices and contexts, and emphasizing simplicity, voice interaction, and working within the physical constraints of mobile. It also provides resources for mobile design templates.
EYE'EM @MobileArtConference 2010, NYU ITPFlo Meissner
EYE'EM represents a new generation of photographers, using their mobile phone cameras to capture the world as they see it.
As technology develops, new mediums arise, and a new generation of artists establish what is now, the mobile photography movement.
Let's create something beautiful together!
www.eyeem.com
1) Rachel Andrew discusses considerations when choosing tools and frameworks for front-end development projects, emphasizing progressive enhancement and ensuring the core experience works for all.
2) She argues against over-reliance on frameworks, which can mask issues and prevent learning core skills. Frameworks should be used lightly and evaluated on a case-by-case basis.
3) Andrew talks about the importance of standards-based development and contributing to emerging specifications like CSS Grid Layout, rather than depending entirely on pre-processors. Her goal is to encourage continued progress of the open web.
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.
Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans
The document discusses responsive UX, which is designing websites and applications that adapt to different screen sizes and devices using fluid grids, media queries, and responsive images; it provides examples of how to implement responsive design principles through fluid grids, image scaling, and media queries to build sites that automatically adjust for smartphones, tablets, and other devices.
SMX@adtech: Mobile Local and Video Search — Cindy Krumadtech_fan
The document provides tips for optimizing websites for mobile search engines. It discusses the differences between mobile and desktop search, including that mobile has carrier search engines that are often white-labeled versions of other engines. It also outlines strategies for mobile search engine optimization, including appropriate site architecture, clean code, relevant mobile content, and submitting the site to various mobile directories and search engines.
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.
Mobile web development is important because over 6.8 billion people in the world use mobile devices. There are currently over 3.4 billion people with mobile phones, making mobile the 7th mass media. When developing for mobile, it is best to target WebKit-based browsers like those used on Android and iOS devices to ensure compatibility with newer HTML5 features. Websites should be optimized for mobile with a responsive design or separate mobile sites at m.domain.com to provide the best experience for touchscreen smartphones and limited feature phones.
Optimizing content for the "mobile web"Chris Mills
In this presentation I discuss the mobile web: what it is, why it is lucrative, the limitations of developing for mobile, and how to best optimize web sites for viewing on mobile. This includes media queries, viewport and general best practices. I delivered this to a class at Oxford Brookes university on the 25th March 2011.
Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke
Extended version of my "Making your site mobile-friendly" talk, including a short look at native applications vs web apps, for the UKOLN DevCSI event "Developing for Mobile Applications in Education" in Reading http://www.ukoln.ac.uk/events/devcsi/mobile_applications/
10 Things To Make You a Great Mobile Web DeveloperTellago
This document provides 10 tips to make you a great mobile web developer: 1) Understand the mobile landscape and technologies; 2) Determine optimal content and user flows for mobile; 3) Set the viewport meta tag correctly; 4) Use progressive enhancement; 5) Leverage HTML5 semantics; 6) Understand CSS3 features; 7) Use AJAX and mobile frameworks; 8) Account for touch gestures; 9) Optimize images; and 10) Support offline usage.
10 things to make you a Great Mobile Web DeveloperChris Love
This document provides 10 tips for developing effective mobile web applications: 1) Understand the mobile landscape and technologies; 2) Determine essential content and use cases; 3) Optimize the viewport for mobile screens; 4) Use progressive enhancement; 5) Leverage HTML5 semantics; 6) Utilize CSS3 features; 7) Incorporate AJAX and frameworks; 8) Account for touch gestures; 9) Optimize images; and 10) Support offline usage.
10 Things To Make You a Great Mobile Web DeveloperTellago
This document provides 10 tips to make you a great mobile web developer: 1) Understand the mobile landscape and technologies; 2) Determine optimal content and user flows for mobile; 3) Set the viewport meta tag correctly; 4) Use progressive enhancement; 5) Leverage HTML5 semantics; 6) Understand CSS3 features; 7) Use AJAX and mobile frameworks; 8) Account for touch gestures; 9) Optimize images; and 10) Support offline usage.
This document discusses mobile web 2.0 and strategies for mobilizing ASP.NET websites. It defines mobile as being about the person rather than the device, and emphasizes context and short interactions. Key aspects of web 2.0 that apply to mobile include harnessing collective intelligence and data as the next "Intel Inside." The majority of internet usage is expected to eventually be on mobile phones. Over 17 million people in the UK use the mobile web. The document provides demonstrations of detecting mobile browsers, using CSS for small screens, optimizing images, and accounting for varying screen sizes and page structures.
The browser has been called the "most hostile software development
environment imaginable." While at the same time, the ubiquity of the
browser is exactly what makes a web application so powerful. A good
web application is designed to run everywhere and for everyone. Today
that means supporting more browsers on more devices than any time in
history. This session will explore the challenges (and fun) of
building sites in a multi-platform and multi-device world while still enabling features of the Open Web like HTML5 and CSS3.
Responsive web design involves creating web pages that dynamically change layout depending on the screen size and orientation of the device being used to view the page. Over the past 5 years, mobile internet speeds and devices have improved greatly, and mobile traffic now accounts for over 12% of total internet usage. With responsive design techniques like fluid grids and CSS3 media queries, a single webpage can be designed to automatically adapt to different screen sizes, providing an optimized interface for both desktop and mobile users. These techniques are now supported by all major browsers and allow websites to be fully responsive.
This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.
Best Practices in Mobile Development: Building Your First jQuery Mobile AppSt. Petersburg College
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 hands-on webinar, you will:
- learn the differences between native and web apps.
- understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile web apps.
- gain hands-on experience using jQuery Mobile to develop a fully functional mobile-optimized web app.
- have access to a free Web server so you can continue to work/test your project live on the Web.
- continue to work with Jason and Chad so you can have a mentor during and after your project.
The document discusses responsive web design, which is an approach where design and development respond to the user's behavior and environment based on screen size, platform, and orientation. It involves flexible grids and layouts, images, and media queries to automatically adjust the website for different devices like laptops and iPads. The goal is for the website to have technology that automatically responds to the user's preferences as they switch devices.
The document discusses responsive web design (RWD), which is an approach to building websites that dynamically adapt their layout to different screen sizes and devices. It covers the key features of RWD, including flexible grids, images, and using CSS3 media queries to detect screen sizes and orientations. The benefits of RWD are also summarized, such as improved performance, saving time and money. Popular RWD frameworks like Foundation and Bootstrap are also mentioned.
Similaire à Mobilism 2011: How to put the mobile in the mobile web (20)
Generating privacy-protected synthetic data using Secludy and MilvusZilliz
During this demo, the founders of Secludy will demonstrate how their system utilizes Milvus to store and manipulate embeddings for generating privacy-protected synthetic data. Their approach not only maintains the confidentiality of the original data but also enhances the utility and scalability of LLMs under privacy constraints. Attendees, including machine learning engineers, data scientists, and data managers, will witness first-hand how Secludy's integration with Milvus empowers organizations to harness the power of LLMs securely and efficiently.
Webinar: Designing a schema for a Data WarehouseFederico Razzoli
Are you new to data warehouses (DWH)? Do you need to check whether your data warehouse follows the best practices for a good design? In both cases, this webinar is for you.
A data warehouse is a central relational database that contains all measurements about a business or an organisation. This data comes from a variety of heterogeneous data sources, which includes databases of any type that back the applications used by the company, data files exported by some applications, or APIs provided by internal or external services.
But designing a data warehouse correctly is a hard task, which requires gathering information about the business processes that need to be analysed in the first place. These processes must be translated into so-called star schemas, which means, denormalised databases where each table represents a dimension or facts.
We will discuss these topics:
- How to gather information about a business;
- Understanding dictionaries and how to identify business entities;
- Dimensions and facts;
- Setting a table granularity;
- Types of facts;
- Types of dimensions;
- Snowflakes and how to avoid them;
- Expanding existing dimensions and facts.
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxSitimaJohn
Ocean Lotus cyber threat actors represent a sophisticated, persistent, and politically motivated group that poses a significant risk to organizations and individuals in the Southeast Asian region. Their continuous evolution and adaptability underscore the need for robust cybersecurity measures and international cooperation to identify and mitigate the threats posed by such advanced persistent threat groups.
UiPath Test Automation using UiPath Test Suite series, part 6DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 6. In this session, we will cover Test Automation with generative AI and Open AI.
UiPath Test Automation with generative AI and Open AI webinar offers an in-depth exploration of leveraging cutting-edge technologies for test automation within the UiPath platform. Attendees will delve into the integration of generative AI, a test automation solution, with Open AI advanced natural language processing capabilities.
Throughout the session, participants will discover how this synergy empowers testers to automate repetitive tasks, enhance testing accuracy, and expedite the software testing life cycle. Topics covered include the seamless integration process, practical use cases, and the benefits of harnessing AI-driven automation for UiPath testing initiatives. By attending this webinar, testers, and automation professionals can gain valuable insights into harnessing the power of AI to optimize their test automation workflows within the UiPath ecosystem, ultimately driving efficiency and quality in software development processes.
What will you get from this session?
1. Insights into integrating generative AI.
2. Understanding how this integration enhances test automation within the UiPath platform
3. Practical demonstrations
4. Exploration of real-world use cases illustrating the benefits of AI-driven test automation for UiPath
Topics covered:
What is generative AI
Test Automation with generative AI and Open AI.
UiPath integration with generative AI
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUpanagenda
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-und-domino-lizenzkostenreduzierung-in-der-welt-von-dlau/
DLAU und die Lizenzen nach dem CCB- und CCX-Modell sind für viele in der HCL-Community seit letztem Jahr ein heißes Thema. Als Notes- oder Domino-Kunde haben Sie vielleicht mit unerwartet hohen Benutzerzahlen und Lizenzgebühren zu kämpfen. Sie fragen sich vielleicht, wie diese neue Art der Lizenzierung funktioniert und welchen Nutzen sie Ihnen bringt. Vor allem wollen Sie sicherlich Ihr Budget einhalten und Kosten sparen, wo immer möglich. Das verstehen wir und wir möchten Ihnen dabei helfen!
Wir erklären Ihnen, wie Sie häufige Konfigurationsprobleme lösen können, die dazu führen können, dass mehr Benutzer gezählt werden als nötig, und wie Sie überflüssige oder ungenutzte Konten identifizieren und entfernen können, um Geld zu sparen. Es gibt auch einige Ansätze, die zu unnötigen Ausgaben führen können, z. B. wenn ein Personendokument anstelle eines Mail-Ins für geteilte Mailboxen verwendet wird. Wir zeigen Ihnen solche Fälle und deren Lösungen. Und natürlich erklären wir Ihnen das neue Lizenzmodell.
Nehmen Sie an diesem Webinar teil, bei dem HCL-Ambassador Marc Thomas und Gastredner Franz Walder Ihnen diese neue Welt näherbringen. Es vermittelt Ihnen die Tools und das Know-how, um den Überblick zu bewahren. Sie werden in der Lage sein, Ihre Kosten durch eine optimierte Domino-Konfiguration zu reduzieren und auch in Zukunft gering zu halten.
Diese Themen werden behandelt
- Reduzierung der Lizenzkosten durch Auffinden und Beheben von Fehlkonfigurationen und überflüssigen Konten
- Wie funktionieren CCB- und CCX-Lizenzen wirklich?
- Verstehen des DLAU-Tools und wie man es am besten nutzt
- Tipps für häufige Problembereiche, wie z. B. Team-Postfächer, Funktions-/Testbenutzer usw.
- Praxisbeispiele und Best Practices zum sofortigen Umsetzen
GraphRAG for Life Science to increase LLM accuracyTomaz Bratanic
GraphRAG for life science domain, where you retriever information from biomedical knowledge graphs using LLMs to increase the accuracy and performance of generated answers
Skybuffer SAM4U tool for SAP license adoptionTatiana Kojar
Manage and optimize your license adoption and consumption with SAM4U, an SAP free customer software asset management tool.
SAM4U, an SAP complimentary software asset management tool for customers, delivers a detailed and well-structured overview of license inventory and usage with a user-friendly interface. We offer a hosted, cost-effective, and performance-optimized SAM4U setup in the Skybuffer Cloud environment. You retain ownership of the system and data, while we manage the ABAP 7.58 infrastructure, ensuring fixed Total Cost of Ownership (TCO) and exceptional services through the SAP Fiori interface.
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfMalak Abu Hammad
Discover how MongoDB Atlas and vector search technology can revolutionize your application's search capabilities. This comprehensive presentation covers:
* What is Vector Search?
* Importance and benefits of vector search
* Practical use cases across various industries
* Step-by-step implementation guide
* Live demos with code snippets
* Enhancing LLM capabilities with vector search
* Best practices and optimization strategies
Perfect for developers, AI enthusiasts, and tech leaders. Learn how to leverage MongoDB Atlas to deliver highly relevant, context-aware search results, transforming your data retrieval process. Stay ahead in tech innovation and maximize the potential of your applications.
#MongoDB #VectorSearch #AI #SemanticSearch #TechInnovation #DataScience #LLM #MachineLearning #SearchTechnology
Fueling AI with Great Data with Airbyte WebinarZilliz
This talk will focus on how to collect data from a variety of sources, leveraging this data for RAG and other GenAI use cases, and finally charting your course to productionalization.
For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2024/06/building-and-scaling-ai-applications-with-the-nx-ai-manager-a-presentation-from-network-optix/
Robin van Emden, Senior Director of Data Science at Network Optix, presents the “Building and Scaling AI Applications with the Nx AI Manager,” tutorial at the May 2024 Embedded Vision Summit.
In this presentation, van Emden covers the basics of scaling edge AI solutions using the Nx tool kit. He emphasizes the process of developing AI models and deploying them globally. He also showcases the conversion of AI models and the creation of effective edge AI pipelines, with a focus on pre-processing, model conversion, selecting the appropriate inference engine for the target hardware and post-processing.
van Emden shows how Nx can simplify the developer’s life and facilitate a rapid transition from concept to production-ready applications.He provides valuable insights into developing scalable and efficient edge AI solutions, with a strong focus on practical implementation.
HCL Notes and Domino License Cost Reduction in the World of DLAUpanagenda
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-and-domino-license-cost-reduction-in-the-world-of-dlau/
The introduction of DLAU and the CCB & CCX licensing model caused quite a stir in the HCL community. As a Notes and Domino customer, you may have faced challenges with unexpected user counts and license costs. You probably have questions on how this new licensing approach works and how to benefit from it. Most importantly, you likely have budget constraints and want to save money where possible. Don’t worry, we can help with all of this!
We’ll show you how to fix common misconfigurations that cause higher-than-expected user counts, and how to identify accounts which you can deactivate to save money. There are also frequent patterns that can cause unnecessary cost, like using a person document instead of a mail-in for shared mailboxes. We’ll provide examples and solutions for those as well. And naturally we’ll explain the new licensing model.
Join HCL Ambassador Marc Thomas in this webinar with a special guest appearance from Franz Walder. It will give you the tools and know-how to stay on top of what is going on with Domino licensing. You will be able lower your cost through an optimized configuration and keep it low going forward.
These topics will be covered
- Reducing license cost by finding and fixing misconfigurations and superfluous accounts
- How do CCB and CCX licenses really work?
- Understanding the DLAU tool and how to best utilize it
- Tips for common problem areas, like team mailboxes, functional/test users, etc
- Practical examples and best practices to implement right away
Digital Marketing Trends in 2024 | Guide for Staying AheadWask
https://www.wask.co/ebooks/digital-marketing-trends-in-2024
Feeling lost in the digital marketing whirlwind of 2024? Technology is changing, consumer habits are evolving, and staying ahead of the curve feels like a never-ending pursuit. This e-book is your compass. Dive into actionable insights to handle the complexities of modern marketing. From hyper-personalization to the power of user-generated content, learn how to build long-term relationships with your audience and unlock the secrets to success in the ever-shifting digital landscape.
8. My Hunch was Right.
! <script type="text/javascript">
! var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
! document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/
javascript'%3E%3C/script%3E"));
! </script>
! <script type="text/javascript">
! try {
! var pageTracker = _gat._getTracker("UA-8949178-1");
! pageTracker._trackPageview();
! } catch(err) {}</script>
6 months after launch,
57% of users were coming to the
site via a BlackBerry browser, 23%
with an iPhone, & the rest was
desktop browsers.
9. Let’s Talk Bandwidth:
Meet Rita El Khoury
Lebanese
Pharmacist
Mobilist
Blogger
ritaelkhoury.com
iPod
Nokia N8
HTC Desire Z
10. Data is Expensive in Lebanon
“Data plans in Lebanon are divided between prepaid and
postpaid plans. Most people are on prepaid, the only deal
they can get is a fixed 25MB/month for 5$ or 3$, non
renewable before another month.
On postpaid, we get 3 plans:
50MB for 10$,
120MB for 15$,
250MB for 30$.
Every additional MB costs 0.10$.
I am on the 120MB plan and I do just fine, most months
hovering between 100 and 160mb of use. Those are all
EDGE connections by the way, we have been on them for
approximately 2years. 3.5G is promised to be deployed in
the summer.”
- Rita El Khoury, May 2011
11. Not an Ad
“For the mobile web, I exclusively use Opera Mini. Whether on my
iPod, Nokia N8 or Desire Z, Opera Mini is the only browser I will use.
Its data efficiency is the reason I can view all web pages I need access
to on the go without going ridiculously over my cap.” - Rita El Khoury, 2011
13. Three ways to put the Mobile in the Mobile Web:
CSS : The famed and lauded Media Queries
Javascript : Oh Braces, camelCase & Semicolons
Server-Side : Fear Not
14. <!DOCTYPE html>
As always, we need to
start with good, <html>
semantic markup.
XHTML or HTML5 ...
Which should I use? </html>
It depends... or
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-basic11.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" >
...
Update: It was pointed out to me by Jeremy Keith & Paul Stevens
</html> that this is about DTDs, not XHTML v. HTML, will blog about this.
15. CSS : The famed and lauded Media Queries
http://www.flickr.com/photos/jcroft/112754603/
16. In Ethan Marcotte’s Responsive Web Design article,
he advocates for the use of:
CSS @media types & query
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
href="shetland.css" />
Flexible layout
@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}
Flexible images
@media screen and (max-width: 400px) {
.figure,
li#f-mycroft {
margin-right: 3.317535545023696682%; /* 21px / 633px */
width: 48.341232227488151658%; /* 306px / 633px */
}
li#f-watson,
li#f-moriarty {
margin-right: 0;
}
}
http://www.alistapart.com/articles/responsive-web-design/
17. Mr. Marcotte is not the only one who is a proponent of
Responsive Web Design and Media Queries...
Stephen Hay will be presenting next on
Meta Layout: A Closer Look at Media Queries
http://www.slideshare.net/slideshow/mobilism2011
For examples & inspiration: http://mediaqueri.es
18. CSS Media Queries Pros and Cons:
Pros:
* Uses CSS, relatively simple for web workers
* If budget does not allow for separate mobile web site, one
can make it apart of current website that accounts for screen
sizes.
Cons:
* Does not take into consideration bandwidth or kind of
connection - mobile data or wifi?
* While there are a few image reduction solutions, they are
not quite there yet.
* Umm.. Cough Cough... Internet Cough Explorer Cough...
* Most importantly for data sippers, all scripts and media
objects are loaded by the mobile browser even if the @media
gives a different layout & images for the small screen.
19. Mobile Sites Are A Must:
Meet CJ!
3rd Culture Kid
CompSci by Degree
Blogger by Love
zomgitscj.com.com
iPad
Nokia(s)
Many Mobiles
20. Why Mobile Sites Are A Must:
“I think a lot of folks assume that everyone out there
has a 3G plan, that's unlimited or has a lot of leeway. In
India's case, that's definitely not true, and as such folks
tend to avoid websites that might be too data
intensive, or use way too much flash. A Mobile-friendly
version is a must here, if you want people to visit your
site.
And unfortunately, at least here in Delhi, Free Wifi can
be hard to find, so heading to a coffee shop to leach off
their Wifi is not an option.” - CJ, May 2011
21. -|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-
s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er
(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|
Javascript : Oh Braces, camelCase & Semicolons
gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi
(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|
Javascript opens up our options for Mobile
go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|
detection, which then allows us to create a
iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|
better experience for the mobile web viewer.
kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|e-|e/|-[a-w])|libw|
lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me
It can be as simple as using Javascript to detect if
(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|
it is a mobile device, not just by user agent
zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|
strings but by features of the mobile web
n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|
browser.
nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|
-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt
With Javascript there are several approaches:
-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|
rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p
24. One Not So Small Problem
Not all mobile browsers are Javascript equal and
some feature phones have little to no Javascript.
Please refer to the Mobile Compatibility tables:
http://quirksmode.org/m/table.html
25. But we can’t count Javascript out...
Many have great hopes that JQuery Mobile will
mature in a way that the web trio of HTML/CSS/JS
will be more than enough for the mobile web,
as well as, other future Javascript solutions
for the mobile browser.
Scott Jehl will be presenting on JQuery Mobile after lunch
26. How do we build for a
complex Mobile Web?
Meet Chandrachoodan
Filmaker / Archaeologist
MA from U. of Bristol
Photographer
Blogger
Chennai Proud Nokia E63
27. “I think that support for Indic scripts would be very important in the future. More and more Tamil/
Hindi/Indian language publications are getting online, and a lot of Tamil blogs already exist. So support for
Indic scripts on the mobile web essential. I realise this is an issue with slightly older phones and that
newer phones come with UTF-8 support.” - Chandru, May 2011 Photo by Jenifer Hanen
28. Server-Side : Fear Not
You have determined that you need a mobile web site or app
that works for many connected mobile devices, including ones
that Javascript may not work with and for users who are
bandwidth sensitive. Time to look to the server.
If the word server-side gives strikes fear in your gut, worry not,
if you are willing to calculate fluid grid percentages to the 8th
decimal point then what is a wee bit of server-side scripting
between friends...
margin-right:
3.317535545023696682%;
width:
48.341232227488151658%;
29. The PHP Script from Detect Mobile Browser
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|
lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|symbian|treo|up.
(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|
4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|
attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|
chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er
(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|
t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|
im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|e
-|e/|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo
(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne
((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|
pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro
(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl
(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|
tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|
voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(-|2|g)|yas
-|your|zeto|zte-/i',substr($useragent,0,4)))
header('Location: http://detectmobilebrowser.com/mobile');
?>
Looks quite a bit like the Javascript DMB script, the RegEx for mobile browser UA’s
remains the same, but the Javascript is swapped out for PHP at the top & bottom.
http://detectmobilebrowser.com/
30. <?xml version="1.0" encoding="UTF-8"?>
<wurfl>
WURFL
<version>
<ver>www.wurflpro.com - 2011-04-24 12:07:53</ver>
<last_updated>Sun Apr 24 12:09:17 -0500 2011</last_updated>
<official_url>http://wurfl.sourceforge.net/</official_url>
! <maintainers>
! <maintainer name="Luca Passani" email="luca.passani at gmail point
“The WURFL is an XML configuration file which contains com" home_page="http://www.wurfl.com"/>
! </maintainers>
information about capabilities and features of many mobile ! <authors>
devices. ! <author name="Luca Passani" email="luca.passani at gmail point com"
home_page="http://www.wurfl.com"/>
! </authors>
</version>
The main scope of the file is to collect as much <devices>
information as we can about all the existing mobile <device id="generic" user_agent="" fall_back="root">
<group id="product_info">
devices that access WAP pages so that developers will be <capability name="mobile_browser" value=""/>
able to build better applications and better services for <capability name="nokia_feature_pack" value="0"/>
<capability name="device_os" value=""/>
the users. <capability name="nokia_series" value="0"/>
<capability name="has_qwerty_keyboard" value="false"/>
<capability name="pointing_method" value=""/>
This project is open-source and is intended for developers <capability name="mobile_browser_version" value=""/>
<capability name="is_tablet" value="false"/>
working with the WAP and Wireless. All the information <capability name="nokia_edition" value="0"/>
listed here has been collected by many different people <capability name="uaprof" value=""/>
<capability name="can_skip_aligned_link_row" value="false"/>
from many different countries.You are allowed to use <capability name="device_claims_web_support" value="false"/>
<capability name="ununiqueness_handler" value=""/>
WURFL in any of your applications, free or commercial. <capability name="model_name" value=""/>
The only thing required is to make any modification to <capability name="device_os_version" value=""/>
<capability name="uaprof2" value=""/>
this file public, following the original spirit and idea of the <capability name="is_wireless_device" value="true"/>
<capability name="uaprof3" value=""/>
creators of this project. This will help WURFL to grow <capability name="brand_name" value=""/>
better and better every day.” - Luca Passini <capability name="model_extra_info" value=""/>
<capability name="marketing_name" value=""/>
<capability name="can_assign_phone_number" value="true"/>
<capability name="release_date" value="2002_january"/>
<capability name="unique" value="true"/>
http://wurfl.sourceforge.net </group>
<group id="wml_ui">
<capability name="icons_on_menu_items_support" value="false"/>
http://tera-wurfl.com/explore/
<capability name="opwv_wml_extensions_support" value="false"/>
<capability name="built_in_back_button_support" value="false"/>
<capability name="proportional_font" value="false"/>
<capability name="insert_br_element_after_widget_recommended"
value="false"/>
<capability name="wizards_recommended" value="false"/>
<capability name="wml_can_display_images_and_text_on_same_line"
value="false"/>
<capability name="softkey_support" value="false"/>
<capability name="wml_make_phone_call_string" value="wtai://wp/mc;"/>
<capability name="deck_prefetch_support" value="false"/>
<capability name="menu_with_select_element_recommended"
value="false"/>
31. What Challenges do you
face with bandwidth?
Meet Jason
San Francisco
Web Developer
Photographer
iPhone
32. San Francisco, Connection Black Hole
“It depends on where I am. At my old place in the Inner Sunset, very rarely did my
phone drop calls, and I always had great reception. Now in the Castro, and when I'm
downtown, I get dropped calls frequently, and at home I need to be near the
windows at the front of the apartment to make sure I don't lose reception. Even
then, it might not help. If I happen to walk into the kitchen without thinking about
it, I might as well say "good bye" on the way because the call will certainly drop.
At home, when I'm visiting friends, or somewhere with free wifi, I just turn on wifi.
Otherwise I just have to be patient. My mobile data usage is rarely time-sensitive, so
I don't usually stress out about it. The only time I feel it's critical is when I'm using
the maps app for directions. That's the worst time to be left in the lurch.
There's no section at home that's a black hole for data, though you think there
would be, given the above.” - Jason, May 2011
33. Possible Solutions:
Form a grassroots set of folk to work up the hybrid server/client side solution for mobile browser and
feature detection as proposed in Brian Rieger’s presentation
Work with browser makers for a more complete feature profile and to alert of user preferences on
data, media, and current context.
We are all here now, what are we willing to accomplish & organize?
The Mobile Web is young, let’s keep the lines of
communication open and work together.
34. How To Get from Here to There
The Mobilism Presentations that Go in More Detail:
Steve Hay on Media Queries : http://slideshare.net/stephenhay/mobilism2011
Scott Jehl on Mobile JQuery (he will be posting this later after permission is gained)
Brian Rieger on Muddling Through the Mobile Web : http://slideshare.net/yiibu/
muddling-through-the-mobile-web
35. Resources:Text
W3C's Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/
W3C's Mobile Web Application Best Practices http://www.w3.org/TR/mwabp/
W3C Media Queries http://www.w3.org/TR/css3-mediaqueries/
Global Authoring Practices for the Mobile Web http://www.passani.it/gap/
USC's Best Practices in Mobile Detection http://webservices.usc.edu/blog/development/mobile_detection/
Quirksmode Mobile http://quirksmode.org/mobile/
Detect Mobile Browser http://detectmobilebrowser.com/
Modernizr http://www.modernizr.com/
Simple javascript mobile OS detector http://blog.justin.kelly.org.au/simple-javascript-mobile-os-detector
WURFL http://wurfl.sourceforge.net/
Deploying WURFL http://wurfl.sourceforge.net/newapi/
Tera-WURFL UA & Feature Explorer http://tera-wurfl.com/explore/
James Pearce's Modernizr-server https://github.com/jamesgpearce/modernizr-server
The Switcher http://www.passani.it/switcher/
Manifesto for Responsible Reformatting http://wurfl.sourceforge.net/manifesto/
36. Thank you!
Jenifer Hanen :: Black Phoebe Designs
@msjen blackphoebe.com/msjen
Please watch twitter | blog for the Slideshare URL of this Presentation