Making your site mobile-friendly - Standards-Next 12.06.2010

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.

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.

The document discusses the future of web technologies, focusing on three main areas: 1. New web standards like HTML5 that provide more capabilities without plugins through elements, forms, canvas and video. CSS3 media queries also allow adaptive content for different devices. 2. Adaptive content through media queries and responsive design can make sites work across devices that vary in screen size, input, and capabilities. 3. The browser is emerging as a platform through widgets, JavaScript APIs and the browser runtime, allowing development across devices without writing for each platform natively. Standards will make the browser a ubiquitous platform.

Wicket stores session information, pagemaps, and pages in different locations depending on the version. In Wicket 1.2, pagemaps containing the last 7 page versions were stored in the HTTP session. Wicket 1.3 introduced the ISessionStore interface which specifies where the pagemap and page undo manager are stored, with two implementations: the HttpSessionStore stores this information in the HTTP session like Wicket 1.2, and the SecondLevelCacheSessionStore stores only the active page reference. Pages can also be stored on disk using the DiskPageStore for high performance, with files saved per pagemap in a temp directory.

Multisite, also known as a WordPress network, allows for multiple sites to exist under one WordPress installation. This allows content to be shared across sites through plugins like Sitewide Tags and Multipost/Broadcast. Plugins are available to customize each site individually while under the same network through features like Domain Mapping, Custom CSS, and privacy settings. Network administrators can manage users, themes, and plugins across all sites for oversight and standardization.

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.

This document introduces WebSockets as a new technology for bidirectional communication between a browser and server. It discusses how WebSockets improve on older techniques like Ajax and Comet by allowing real-time data updates with less overhead. Example uses of WebSockets include chat applications, displaying stock prices, and collaboration tools. While browser support is still limited, libraries exist for many programming languages to create WebSocket servers.

From jQuery San Diego, held Feb 12-13 2014, my talk on web accessibility for web developers. I cover basic techniques, introduce screen readers and ARIA, and go over testing. The goal is to demystify accessibility so we can weave it in to applications today.

The document is about an Italian WordPress conference in 2012. It discusses various topics around WordPress security and performance. Some of the key topics covered include protecting wp-login.php with .htaccess rules, changing the WordPress directory structure for security, using blackholing to block bots, monitoring files for changes, avoiding FTP, using caching and transients, reducing plugins, minifying files, and using a CDN and server tuning.

Multisite allows multiple individual sites to run within a single WordPress installation and shared database, referred to as a network. It began as WordPress MU and is now commonly used by news organizations, universities, and big businesses to manage multiple related sites more efficiently. Multisite provides benefits for a wide range of uses including personal sites, client work, development demonstrations, multilingual sites, intranets, and more.

De basis en een stukje meer... Bootstrap 3 in Joomla! In deze presentatie legt Hans Kuijpers tijdens Joomladagen 2015 #jd15nl uit hoe je Bootstrap 3 framework verwerkt in Joomla en waar je op moet letten.

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!

Internetnutzung auf Handys und mobilen Geräten ist in den letzten Jahren drastisch gestiegen. Und mit diesem Trend steigen auch die Erwartungen der Kunden – eine "mobile-optimised"-Version gehört bei vielen Webprojekten schon jetzt zum Standard – und der Endnutzer. Obwohl die Browser im mobilen Bereich schon recht gut mit "normalen" Webangeboten klar kommen, gibt es trotzdem neue Strategien und altbekannte Webdesign-/Web-Development-Methoden, um sicherzustellen, dass ihre Seiten auf allen Geräten – jenseits vom klassischen Desktoprechner – so gut wie möglich aussehen und funktionieren.

This document discusses approaches to developing websites that are accessible across desktop and mobile devices. It describes three main approaches: 1) Doing nothing and relying on modern mobile browsers to handle desktop sites, 2) Creating a separate mobile site, or 3) Using a single adaptive design that responds to different screen sizes through fluid layouts, responsive design, and CSS media queries. The document advocates the third approach of a single adaptive site as the best way to build sites that provide a good user experience across all devices.

This document discusses approaches to mobile-friendly web development beyond just desktop websites. It outlines three main approaches: 1) Doing nothing and hoping normal websites work okay on mobile, 2) Creating a separate mobile-optimized site, or 3) Having a single adaptive site that uses techniques like fluid layouts, responsive design, and CSS media queries to dynamically adapt to different screen sizes and devices. The document then goes into details about techniques for adaptive sites, including viewport meta tags, touch and gesture support, and using device capabilities like geolocation without plugins. It emphasizes that adaptive design is useful not just for mobile but any device.

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.

The document provides tips for optimizing websites for mobile browsers. It discusses differences between mobile and desktop browsers like slower rendering speeds and varied browser families on mobile. It recommends strategies like embedding resources inline, caching assets locally, lazy-loading content, minimizing requests and file sizes, detecting devices, and testing on mobile emulators. The document emphasizes optimizing for the limitations of low-end mobile browsers.

This document discusses making websites mobile-friendly. It recommends building a single, adaptive site that uses fluid layouts, progressive enhancement, and graceful degradation. Key techniques include using CSS media queries and viewport meta tags to customize styling for different screen sizes, minimizing data and requests through techniques like CSS sprites and data URLs, and supporting the most common mobile browsers.

This document discusses approaches to mobile-friendly web development beyond just desktop websites. It outlines three main approaches: 1) Doing nothing and relying on modern mobile browsers to render normal sites, 2) Creating a separate mobile site with a subdomain or folder, and 3) Having a single adaptive site that uses fluid layouts, responsive design, and CSS media queries to dynamically adapt to different screen sizes and devices. The document then covers various techniques for adaptive design, including viewport meta tags, touch and gesture support, multimedia without plugins, geolocation, and offline capabilities.

This document discusses approaches to web development for mobile devices. It begins by noting the increasing importance of the mobile web. It then examines three approaches: 1) Doing nothing and hoping modern mobile browsers can handle desktop sites, 2) Creating a separate mobile site, and 3) Having a single adaptive site that refactors content for different screens using fluid layouts, progressive enhancement and media queries. The document dives into techniques for adaptive design like viewport meta tags, touch events, and responsive images. It also notes remaining challenges like viewport interpretation and high-DPI screens lying about resolution.

1. The document discusses approaches for making websites adaptive and responsive across different mobile devices and screen sizes. 2. It describes using CSS media queries and viewport meta tags to selectively style content for different device widths and resolutions. 3. Fully responsive design is recommended, using a fluid grid, fluid images, and media queries to automatically adjust the layout without separate mobile versions.

This document discusses making websites responsive and cross-device friendly. It covers: 1. The need to support mobile devices like phones and tablets. 2. CSS media types and queries that allow targeting different device capabilities like width. 3. The viewport meta tag which helps mobile browsers render web pages properly. 4. Challenges like devices reporting incorrect widths that require viewport fixes.

This document discusses making websites responsive for different devices. It covers using CSS media queries to apply different styling based on screen width, height, and other device features. It also covers using viewport meta tags to control zooming and scaling on mobile browsers. The goal is to build sites that can adapt their layouts across various devices like phones, tablets, and desktops.

This document discusses methodologies and techniques for optimizing websites for mobile devices, including using responsive design with CSS media queries. It presents three main approaches: building a separate mobile site, making no changes, or optimizing the main site for mobile. The bulk of the document then focuses on how to use CSS media queries to optimize websites, covering features like width, height, and orientation. It also discusses related techniques like viewport meta tags and approaches being considered for future standards.

The document discusses HTML5, including what it is, its features, adoption, and changes from previous versions of HTML. It provides information on new HTML5 elements like <header>, <footer>, <nav>, <section>, and <article>. It also covers new form input types, multimedia support through <video> and <audio> elements, canvas graphics, geolocation, web sockets, and more. The document contains examples and explanations of how to implement and use various HTML5 features.

This document compares native applications, web applications, and widgets for mobile devices. Native applications have direct access to device features but must be developed for each platform. Web applications can be written once and deployed anywhere but run inside the browser without direct device access. Widgets combine the cross-platform capabilities of web applications with the ability to access device features and run standalone like native applications.

This document discusses various topics related to developing web apps, including HTML5, responsive design, touch events, offline capabilities, and debugging tools. It provides links to resources on HTML5 features like media queries, SVG, web workers, and the page visibility API. It also covers techniques for adapting content like responsive web design, progressive enhancement, and server-side adaptation. Mobile browser stats and popular devices on Douban are mentioned. Frameworks like Bootstrap and tools like Weinre for debugging mobile apps are referenced.

This document discusses various techniques for making web applications work offline and with unreliable network connections, including: - The application cache manifest which allows specifying cached resources to work offline - Issues with the current manifest specification and potential enhancements - The window.applicationCache API for caching resources and monitoring cache status - Detecting online/offline status using the navigator.onLine property In 3 sentences or less, it summarizes approaches for offline web applications using the application cache manifest, applicationCache API, and navigator.onLine property.

Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6 Includes a sample project built from scratch in Node.js using LESS available on Github

Learn how to design responsive HTML5 websites and applications, and learn how to choose the right tool for the job.

This document provides tips and techniques for making a website mobile-friendly. It discusses three approaches: doing nothing and hoping the mobile browser can handle it, creating a separate mobile site, or using a single adaptive site. The recommended approach is a single adaptive site that uses fluid layouts, progressive enhancement, and CSS media queries to provide an optimized experience across devices. Specific techniques include using the viewport meta tag, minimizing data and requests, CSS sprites, and data URLs.

Presentation that I gave, along with coworkers Mark Sims and Mike Townson, at the Dallas Society of Visual Communications. http://www.dsvc.org/events/working-lunch/10/2012

WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the guidelines' normative text. And, of course, it is not perfect - with some omissions, handwaving, and straight-up loopholes. So where does this leave developers and auditors? In this talk - a reprise of a previous talk, now updated to cover new SCs from WCAG 2.2 - Patrick may not have all the answers, but he'll have a good rant around the subject anyway...