The Big Picture: Responsive Images in Action #scd14

The document summarizes Christopher Schmitt's presentation at RWD Summit 2014 on adaptive images in responsive web design. It discusses using feature testing over browser sniffing to determine screen resolution and bandwidth. It presents techniques like srcset, picture, and JavaScript solutions to serve appropriately sized images. It also covers workarounds like background-size, SVG, and font-based solutions when native techniques are not supported. The focus is on building responsive images that scale with the device and load quickly.

The document discusses adaptive images and responsive web design. It covers using srcset and sizes attributes, the <picture> element, and feature testing versus browser sniffing to determine the best image to display based on factors like screen width, resolution, and bandwidth. It also discusses workarounds like background-size, SVG, and font-based solutions for responsive images.

The accompaning slides to my presentation at the Cape Town Front End Developers Group. Please enjoy and send me any other questions you might have :)

This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. It discusses using feature testing versus browser sniffing to determine the appropriate image to serve, including testing browser width, screen resolution, and bandwidth. It then covers various techniques for serving adaptive images, such as using .htaccess files, the <picture> element, srcset attributes, and JavaScript libraries. It emphasizes using a mobile-first approach and progressive enhancement to provide the best experience for all devices.

This document discusses 6 rules for responsive web design: 1. Responsive design doesn't end with squishy layouts - optimize based on user capabilities rather than just screen size. 2. There is no responsive pixie dust - streamline workflows and use rapid prototypes and style tiles to communicate fluid layouts. 3. Your workflow will change - iterate designs quickly through prototypes rather than big reveals. 4. Your tools will change - leverage preprocessors like SASS and frameworks like Foundation for responsive coding. 5. The web is responsive by default - prioritize content and build APIs to support multiple platforms. 6. Embrace unpredictability - acknowledge the constraints of different devices

Smartphones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy. They also have better displays, which demands more of us when we use images. This session will work through tips and tricks to develop future friendly images in our sites and apps.

This document discusses responsive images and various techniques for implementing responsive images, including: 1. Using .htaccess files to serve different image sizes based on screen resolution. 2. Implementing the <picture> element and srcset attribute to serve different image sources based on media queries. 3. Using JavaScript solutions like HiSRC to programmatically swap image sources based on screen properties like pixel density and connection speed. 4. Various workarounds and tricks for responsive images, including using background-size: 100% for images, optimizing images as SVGs, and using font-based solutions.

Christopher Schmitt presented on adaptive images in responsive web design. He discussed using browser features like width, resolution and bandwidth to determine the best image to serve rather than browser sniffing. Feature testing methods included JavaScript, jQuery and CSS media queries. Workarounds for older browsers included background images, SVGs and font-based solutions. Compressed JPEG images were also suggested to reduce file sizes.

This document provides an overview of HTML5 and what's new in the latest version. It discusses new semantic elements like <header>, <nav>, and <article> that improve document outlining. It also covers new multimedia features like native audio and video playback without Flash, as well as 2D/3D graphics using <canvas>. Other additions include new form controls, multiple file uploading, and geolocation. While HTML5 brings many new features, it is an ongoing evolution of HTML rather than a completely new language.

The document discusses various image formats (GIF, PNG, JPEG), optimization tools, responsive image techniques (srcset, picture), lazy loading, icon fonts versus SVG sprites, and video optimization. It provides information on each topic and examples of how to implement the different techniques for optimizing images and other assets for faster page loads.

This document provides an agenda for an HTML5 workshop. The agenda includes discussions of differences between HTML5 and XHTML, building with HTML5 syntax like DOCTYPEs and character sets, and features like audio/video, geolocation, forms, and accessibility. It also outlines exercises for validating HTML5 markup and exploring new HTML5 elements.

Virtual Private Networks (VPNs) allow users to establish secure connections to remote networks privately over the internet. A VPN masks the user's IP address and encrypts data transmission, protecting privacy and security while users are online. VPN services have grown in popularity for personal and business use, allowing secure access to networks, privacy of online activity, and the ability to access geographically restricted content and services from anywhere.

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

This document provides an agenda and overview for an HTML5 and CSS3 workshop. The agenda includes explaining differences between HTML5 and XHTML, building with HTML5 elements like <header>, <nav>, <article>, <aside>, and <footer>, bringing back semantic HTML tags, figures and captions, editable elements, drag and drop, HTML5 metadata like microformats, and page structure. It discusses syntax changes in HTML5 and introducing new elements and attributes to improve semantics and accessibility.

Web development has become increasingly complex, with the advent of smartphones, tablets, and multiple browsers with varying capabilities. Bootstrap makes the process faster by providing pre-written HTML, CSS, and Javascript that has been thoroughly tested and debugged. Learn how to get started with this framework, and build a responsive web page. Explore commonly used components such as buttons, tabs, tooltips, pop-ups, and third-party plugins. See examples of beautiful websites built on Bootstrap. Presented on Oct 5, 2015 at HighEdWeb 2015, Milwaukee, WI

JavaScript is a programming language designed to add interactivity to web pages. It was created to allow non-programmers to add dynamic elements and animations to their web designs. JavaScript code is written in scripts that are embedded directly in HTML and can manipulate elements on a web page without reloading. Examples show how JavaScript can be used to preload images and swap images on mouseover and mouseout events to create image rollovers.

This document discusses how HTML5 can be used to build engaging mobile applications. Key features covered include offline storage using the Application Cache API, storing data locally using Web Storage, using a SQL database with Web SQL, advanced graphics capabilities with Canvas and SVG, real-time communications over WebSockets, and tools for developing HTML5 apps like jQuery Mobile, Sencha Touch, and Google Web Toolkit. It emphasizes testing on multiple platforms and browsers to ensure compatibility.

This document discusses how numbers and data are powering the next era of marketing. It notes that nearly 4 in 10 CMOs say they do not have the right tools and resources to meet their marketing objectives. Companies are turning to providers like Accenture Interactive to bring together full marketing solutions using consulting, technology, and analytics. The CMO agenda is being disrupted by the explosion of data from sources like mobile devices, social media, and the internet of things. This data needs to be captured, analyzed, and used to optimize marketing interactions and drive continuous discovery. Strong collaboration between marketing and IT is needed to take advantage of big data technologies and manage various data environments.

This presentation makes an argument for a more central focus on images within social media research. It offers approaches and concrete examples from both 'Big data' and 'small data' perspectives. Presented at the Digital Transformations in the Arts and Humanities: Big Data Workshop, London, June 25 2013.

1. Data visualizations do not speak for themselves and need words and context to provide meaning. 2. While data visualizations are useful for identifying patterns, they often only scratch the surface and deeper qualitative analysis is needed to understand the full context and meaning. 3. When analyzing social media data, data visualizations are limited because they reduce large amounts of data and obscure important details; combining visualizations with in-depth qualitative analysis provides a more complete understanding.

This document discusses the potential uses of social media and networking technologies for research purposes. It notes that while researchers are sometimes cautious about using these tools, social media can support networking, feedback, and serendipitous discoveries. The document examines some examples of how social media is being used for networking, testing ideas, sharing research outputs, visualizing data, collaborative projects, and critiquing public policy. It raises questions about how researchers can best utilize their networks and social connections to support data collection, research management, and networking while considering issues of reliability, validity, trust, and ethics.

Big data analytics in the cloud allows companies to extract value from vast amounts of data. By leveraging cloud computing infrastructure, businesses can analyze customer behavior patterns, optimize operations, and gain insights faster at lower costs compared to on-premise data centers. The cloud provides massive scalability, advanced analytics tools, and pay-as-you-go pricing that enables organizations to efficiently process big data and make data-driven decisions.

Presentation from the 2012 Sentiment Analysis Symposium on sentiment analysis from different kinds of text and in different languages.

The simplest definition of Big Data is large and complex unstructured data (images posted on Facebook, email, text messages, GPS signals from mobile phones, tweets, and other social media updates…etc.) that cannot be processed by traditional database tools.

The use of new forms of data is not an evolution. Instead, powering big data supply chains, and innovating through new forms of analytics, is a step change. New forms of data do not fit traditional architectures. Traditional supply chains were architected to use structured data with software using relational databases. The big data era will make many of the investments from the last decade obsolete. Big data offers the opportunity to redefine supply chain processes from the outside-in (from the channel back) and define the customer-centric supply chain. This is in stark contrast to the inflexible IT investments installed over the last decade to respond inside-out based on order shipments. These traditional investments in Enterprise Resource Planning (ERP), Advanced Planning Systems (APS) and traditional Business Intelligence (BI) for reporting, improved the supply chain response, but did not allow the organization to sense, shape or orchestrate outside-in. New forms of data (e.g., images, social data, sensor transmission, input from global positioning systems (GPS), the Internet of Things, and unstructured text from email, blogs and ratings and reviews) offer new opportunities. They also require new techniques and technologies. Big data offers new opportunities for the corporation to listen, test and learn, and respond faster. In this study, companies see the greatest opportunity to use big data for “demand” (to better know the customer and improve the response); however, actual investments are in “supply” not “demand.” Respondents view supply-centric projects like product traceability (involving product serialization and traceability), supply chain visibility and temperature controlled handling as important. Is big data a problem or a new market opportunity? Like the respondents of this survey, we believe that big data represents an opportunity for all. In the study, one-fourth of respondents currently have a big data initiative. However, interest is growing. Sixty-five percent have or plan to have a big data initiative in the future. Despite the hype, and the intensity of marketing rhetoric in the market, in our year-over-year studies on big data we see very little change in activity. Despite the fact that the IT group is more likely to see big data as a problem, 49% of those with a big data initiative report that it is headed by an IT leader. Big data represents a new opportunity, but seizing it requires a new form of leadership. It can ignite new business models and drive channel opportunities. However, it cannot be big data for big data itself. Instead, the initiatives need to be aligned to business objectives with a focus on small and iterative projects. It requires innovation. To move forward, companies need to embrace new technologies and redesign processes. It is not the case of stuffing new forms of data into old processes.

Keynote delivered at the SRA Social Media in Social Research conference, London, 24 June, 2013. The presentation highlights some thoughts on sampling, tools, data, ethics and user requirements for Twitter analytics, including an overview of a series of recent tools.

This talk highlights the work of the Visual Social Media Lab and the Picturing the Social project. It summarises the key research questions and aims of the project. It highlights the value of interdisciplinarity and working closely with industry in this area. It also focuses on the way in which me might study different types of structures involved in the circulation and the scopic regimes that make social media images more or less visible. It also tries to unpack how we can start to think about APIs as 'method' and looks at the different ways in which we can get access to different kinds of social media image data. Both through public ('free') APIs and ('pay for') firehose data.

From Flickr to Snapchat: The challenge of analysing images on social media. Presentation part of the 'Challenges/Opportunities of Using Social Media for Social Science Research' panel. 9th of July 2014

This is the first part of a 5-part series on the Information Challenges facing organizations. A white paper describing these challenges can be found here - http://pages2.aiim.org/CIPWebPage_InfoProWP.html

A talk I gave in the workshop "Tools for astronomical big data" held in Tucson, Arizona on March 2015. My talk was about how to do data science and big data in Astronomy having a small budget.

- WHAT IS WATSON ANALYTICS FOR SOCIAL MEDIA - PREVIOUS ARCHITECTURE ON HADOOP - THOUGHT PROCESS TOWARDS MULTITENANCY - NEW ARCHITECTURE ON TOP OF APACHE SPARK - LESSONS LEARNED

Researching Social Media – Big Data and Social Media Analysis, presentation for the Social Media for Researchers: A Sheffield Universities Social Media Symposium, 23 September 2014

1) The document describes a case study using Apache Solr for image analysis as part of a "images as big data" application prototype. Solr provides data storage and search capabilities for the Image as Big Data Toolkit. 2) Various types of data visualization are discussed, including traditional statistical charts, tabular displays, notebook-based visualization, and map-based displays. Crime data and microscope image analysis are used as examples. 3) Solr integrates well into the data pipeline due to its flexibility and ability to work with other components like Apache Tika. Deep learning and machine learning can also be incorporated to develop analytics applications with intelligent search.

Paper Overview - Every day, we create 2.5 quintillion bytes of data — so much that 90% of the data in the world today has been created in the last two years alone. Data comes from everywhere and we are generating data more than ever before. This white paper will explain what Big Data is and provide practical examples, concluding with a message how to put data your data to work.

A hands-on workshop about how to design and test business models in a corporate environment. This workshop will empower you to create better value propositions for your innovative ideas. This workshop was part of the Knowledge in Focus Conference 2016 organized by Podravka on 24. November 2016 in Zagreb, Croatia (More information about the event here: http://www.podravka.com/company/knowledge-in-focus-2016/)

The document provides tips for creating effective visual presentation slides. It recommends using imagery over bullet points to engage audiences as visuals are better received and remembered. Specific tips include using simple fonts and limiting words on each slide to maximize comprehension. Images should support the core message while data and symbols can make logical points more compelling when combined. Overall the presentation should blend different media to appeal to both logical and emotional thinking.

The document discusses dashboard design and best practices. It provides examples of good and bad dashboard design, highlighting principles like removing clutter, unnecessary colors and duplication. Key sources discussed include Edward Tufte, Stephen Few, and their emphasis on visualizing data clearly and simply without distorting the meaning. The document advocates for dashboards that focus on communicating effectively by highlighting important data and trends.

The open web doesn't stop at our desktop. Smart phones and tablets not only contain more computing power and better browsers than the computers that started the Internet economy, they have better displays. Presented at WebVisions Barcelona 2013.

The document discusses adaptive images in responsive web design. It covers techniques like using the browser width and screen resolution to determine the appropriate image size via JavaScript or media queries. It also discusses checking bandwidth and using techniques like picture, srcset, .htaccess rewriting, and single pixel GIFs to serve the right image. The document recommends using CSS media queries for design and covers workaround techniques like background-size, SVG, and font-based solutions.

This document summarizes Christopher Schmitt's presentation on adaptive images in responsive web design. The presentation covered: 1. Using the browser width, screen resolution, and bandwidth to determine the appropriate image to serve through feature testing rather than browser sniffing. 2. Techniques for serving responsive images including using .htaccess files, the <picture> element, and JavaScript libraries like HiSRC that select images based on various tests. 3. Workarounds for older browsers including using background-size: 100%, SVG images, and font-based solutions.

The document discusses adaptive images in responsive web design. It covers using the browser's user agent string and feature testing to determine screen resolution and bandwidth instead of browser sniffing. Methods presented include using viewport width with JavaScript, jQuery, and CSS media queries; checking screen resolution directly and considering retina displays; and avoiding bandwidth speed tests. Workarounds discussed are using background-size: 100% with images, SVG, and a "Clown Car" SVG technique loading different image files via CSS media queries.

This document discusses various techniques for responsive images in web design, including browser sniffing versus feature testing, image sizes for different screen resolutions and bandwidths, and different implementation methods like .htaccess files, the <picture> element, and JavaScript libraries. It covers topics like using the browser width to determine layouts, screen resolution detection, and bandwidth testing. Workarounds discussed include using background images, SVGs, icon fonts, and compressed JPEGs. The document advocates a mobile-first approach and using CSS media queries to adapt designs based on screen size.

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.

This document discusses adaptive images in responsive web design. It begins by explaining why the browser should be asked about screen resolution and bandwidth instead of sniffing the browser. It then demonstrates using feature testing to determine browser width and screen resolution. Next, it covers issues with higher resolution retina displays like larger file sizes. The document proposes solutions like using .htaccess files, srcset, and JavaScript libraries to serve the appropriate image based on screen details without browser sniffing. It emphasizes that CSS media queries are still important for responsive design.

The document discusses adaptive images in responsive web design. It begins by explaining why the browser should be asked for information like screen resolution and bandwidth instead of doing speed tests. It then covers different techniques for adaptive images like using the browser width, screen resolution, bandwidth tests, feature testing vs browser sniffing, and CSS media queries. It also discusses workarounds like using the .htaccess file, <picture> element, and HiSRC plugin to serve responsive images. The document advocates for newer approaches that provide a simple user experience while allowing the browser and server to communicate information.

This document discusses responsive image techniques for adaptive web design. It begins by explaining browser sniffing versus feature testing, and recommends using feature testing to determine browser width, screen resolution, and bandwidth instead of browser sniffing. It then covers techniques like using background-size to control image sizes, SVG for smaller file sizes, and font-based solutions. The document also discusses server-side techniques like .htaccess rewrite rules and client-side techniques like picture and HiSRC. It advocates for a mobile-first approach using CSS media queries and a single pixel GIF for responsive images.

The document discusses minimalism in web development. It advocates for building simple things using simple tools where appropriate. This includes using microframeworks that do just enough rather than full-featured frameworks, and taking advantage of CSS3 features to simplify layouts and designs. SQLite is recommended for low to medium traffic sites due to its small size and simplicity. Graceful degradation is also discussed to ensure sites still function acceptably in older browsers.

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.

This document discusses responsive web design techniques including: - Using viewports and media queries to adapt layouts for different screen sizes. - Sizing images fluidly using max-width: 100% so they are responsive. - Design patterns for responsive tables, hiding/showing content, and converting menus to dropdowns. - Tools like Modernizr, Respond.js, and frameworks like LESS to support responsive design goals. - Tips like using relative units (ems/percentages) over fixed pixels and transitions for visual changes.

How do you plan for the unknown? The answer is obvious—you can’t—but that’s not a bad thing. Unknowns can be scary, but they also create opportunity. On the web, it’s tempting to focus our effort around what we know (or think we know) about our customers based on analytics data we’re collecting and our own experience of the web. Similarly, we often get hung up on trying to give every customer the exact same experience of our product. What we need to realize, however, is that analytics and anecdotal knowledge only get you so far. Our customers’ access and experience of the web is highly variable, deeply personal, and, more often than not, completely out of our control. But take heart, all is not lost. By being flexible in our approach and embracing the unknown, we can create user experiences that are intended to vary from device to device, browser to browser, and network to network. In this workshop, Aaron Gustafson will explain the ins and outs of crafting rich web experiences that adapt to the capabilities and peculiarities of our customers and their devices, while maintaining your sanity in the proces. You’ll leave with: * an understanding of the challenges (and possibilities) presented by the wide range of browsers and devices being used to access the web; * a fresh perspective on interface design, grounded in the progressive enhancement philosophy; * ideas around how to tailor experiences based on device capabilities; * solid strategies for determining how common UI components can be re-imagined in an adaptive fashion; and * a practical knowledge of how HTML, CSS, and JavaScript can be deployed in the service of adaptive user interfaces.

The document discusses responsive web design and performance. It covers topics like building flexible and fast sites, embracing constraints of different devices, conditional loading of content, lazy loading of images, and optimizing assets like CSS and JavaScript. Key aspects of responsive design like media queries, flexible layouts, and responsive images are presented alongside techniques to improve page performance like prioritizing content, conditional loading, and lazy loading of non-critical assets.

Use a mixture of user agent detection and browser feature detection or a device detection library to enhance your responsive website.

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

Real world aspects of implementing flexible, mobile and future-friendly sites through responsive design.