From desktop to mobile web

This is the same workshop from August, but about 40 new slides, mostly at the end. A hands-on workshop for DC Web Women on September 11, 2012.

The document discusses how to recreate native mobile controls like those found in apps using jQuery, CSS, and HTML5. It provides examples of recreating controls from Windows Phone 7 like the Panorama and Jump List controls as well as a slide menu and scroll view control. Resources on mobile web development and specifications are also referenced.

1. The document discusses the rise of HTML5 and its adoption in China, noting that older versions of Internet Explorer still dominate the market but that HTML5 support is improving in newer browsers. 2. It provides statistics on browser support for HTML5 features from the HTML5 Test website and global browser usage statistics, showing Internet Explorer 6-8 make up over 80% of the Chinese market. 3. The document advocates for progressive enhancement approaches to support older browsers while taking advantage of new HTML5 features in modern browsers to provide richer experiences.

Using a Joostrap template, Philip will be explaining & demoing how you wire frame a website right in your browser and why it will save you load's of time. There are no fancy plugins here! This is wire framing for your client, built directly in your browser & saving you untold hours messing around in other software. It is so hard sometimes, trying to get across to a client with a few drawings how the functionality of something could work. Wire framing directly in the browser gives your client a working wireframe/prototype where they can interact with links, pages & concepts. Not only that, but after client approval, you just have to style your working wireframe/prototype or switch to the template that is using the same module positions... It's a win win situation!

The document discusses the challenges facing the progressive web and introduces progressive web apps (PWAs) as a solution. PWAs are built using modern web standards to provide native app-like experiences through features like push notifications, offline support, and app installation. They address issues with native apps like high installation friction, lack of control for publishers, and app store policies. PWAs are gaining adoption from companies like Alibaba and Housing.com who saw increases in user engagement metrics after implementing PWAs. The document outlines the core components of PWAs and provides an overview of browser and platform support.

The document discusses the evolution of the web from progressive web apps to native mobile apps and back again to progressive web apps. It notes that early mobile web faced issues like small screens, poor connectivity and unreliable browsers, leading to the rise of native apps. However, app distribution issues like slow updates and the "walled garden" approach of app stores have led to a renewed interest in progressive web apps that work offline but do not require app stores, allowing for more open distribution like the original web.

Caridy Patiño presented on the challenges of building mobile HTML5 applications. Some key challenges include browser fragmentation across devices, network failures, and the need to optimize applications for different runtime environments and adapt them for varying screen sizes and features. Patiño advocated writing applications using a single language, JavaScript, and customizing output per runtime and context while adapting the UI per form factor and feature detection. The goal is to build flexible applications that can run on multiple platforms.

Slides from my recent presentation on Progressive web apps. I showed what they are and how I believe they are the future of web/app development. I also demonstrated how to use de F12 tools in Chrome to debug the Service Worker and the Manifest.json file. I also demonstrated how, by adding and changing a few lines, a Node.js app is converted to a progressive web app.

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.

The document discusses the current state of web development and identifies several issues, including slow page loading times, large file sizes, reliance on outdated libraries and browser hacks, and an emphasis on flashy innovations over foundational web standards. It argues that as an industry, web development has gotten too complex and focuses too much on impressing other developers rather than meeting users' needs. It calls for simplifying solutions, supporting baseline functionality for all browsers, and prioritizing education and collaboration over quick fixes.

This document provides information about the mobile-friendly features of the Collaborative Learning Annotation System (CLAS). Key points include: - CLAS now has a shorter, mobile-friendly URL structure of clas.arts.ubc.ca/name - The interface, course welcome page, and login pages are optimized for mobile usage - Users can easily record, upload, view, annotate and comment on videos from their mobile devices - Recording directly through CLAS is limited to 10 minutes on iOS devices but longer videos can be uploaded from the device camera roll - The system is supported on Safari, Chrome and IE across iPhone, iPad, Android and Windows tablets and phones.

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.

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 various techniques for optimizing web performance, including: - Minifying assets like CSS, JavaScript, and images to reduce file sizes - Leveraging caching, compression, and browser parallelization to speed up page loads - Implementing responsive design patterns and techniques like image sprites and media queries - Optimizing assets further with techniques like image optimization, lazy loading, and prefetching

The document discusses the problem of websites using large, unoptimized images that slow down loading times. It provides solutions like responsive images, automated image optimization tools, extracting metadata from images, intelligent resizing with cloud services, and machine learning for tasks like facial recognition and tagging to improve the image experience on the web. The key is for browsers, tools, and developers to work together to make images lightweight and adaptive while still high quality.

Websites are all about content. People can access your content many different ways and formats with mobile devices, iPads, phones, etc. The questions are: how can we maintain control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform? Enter Responsive Web Design. Many experts are not leaning on one static design but on structured content that adapts to its given environment. In this talk, we are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods of implementation.

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 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.

Web sites can more efficiently meet both goals when developers understand the significant overlap between making a Web site accessible for a mobile device and for people with disabilities.

This document discusses creating mobile websites with Drupal. It covers technology trends in mobile, reasons to go mobile, complexity issues around device fragmentation and standards, examples of mobile Drupal sites, recommendations for bringing users to the mobile site, tools for mobile site creation, and content adaptation techniques.

This presentation, given by Steve Butzel at the 2012 Connecticut Library Association conference, covers trends in mobile website design and possibilities for libraries. Library apps are critically reviewed while simpler, less expensive mobile website techniques are favored. In addition, Steve discusses his Online Newsstand Project which improves access to library database content. Steve Butzel, Assistant Director of the Portsmouth Public Library, Portsmouth, NH