Intro to @viewport & other new Responsive Web Design CSS features

This document discusses empowering the mobile web. It begins by defining the mobile web as the web experienced on mobile devices, with considerations for usability and responsiveness. It then addresses concerns about the web versus native apps, and outlines Mozilla's solutions including their app ecosystem with installable apps, the Firefox OS mobile platform, and APIs that allow web apps to access device capabilities. The document also covers developer experience tools and techniques to improve web app performance.

In this talk, Chris Mills discusses the historic problems with web apps and which technologies are stepping up to fill the holes. This includes device APIs such as Web Activities, Camera, device orientation and nfc, offline apps (which are finally looking realistic thanks to service workers), installable apps, and high quality games and other immersive high performance experiences using such features as Web audio API, Pointer lock, asm.js and Emscripten.

APIsNow, and in the future discusses the evolution of browser JavaScript APIs. It describes how early APIs allowed new features like geolocation and canvas but more were needed to compete with native apps and improve multimedia, performance, and internationalization support. New APIs like Service Workers and Fetch help enable offline functionality while standards like WebRTC improve media capabilities. The talk argues the web is progressing through continued standardization of device and other APIs.

Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점은 Angular 2.0에서 컴포넌트 기반 아키텍처로 변경되었다고 설명했습니다. Angular 2.0에서는 타입스크립트를 사용하며 컴포넌트, 디렉티브, 템플릿 등의 개념이 도입되었습니다. 또한 Angular 2.0

Bootstrap is a popular HTML, CSS, and JS framework for building responsive mobile-first projects. It provides predefined grid and layout components, forms, buttons, navigation menus and other interface elements for a consistent user experience across devices. The framework is open source, supports all major browsers, and can be easily customized.

The document discusses a screencast on using jQuery for designers, noting that the screencast will cover getting started with jQuery, DOM navigation and manipulation, events, Ajax, and tips. It provides Remy's contact information and encourages asking questions during the screencast. The document also lists various jQuery resources like documentation, blogs, tutorials, and forums for getting help with jQuery.

Não é nenhum segredo que o mundo está cada vez mais móvel. As vendas de PCs caíram em 20% desde 2008, e em 2015 é esperado que o acesso à Internet por dispositivos portáteis supere o acesso por desktops. A Web pode ser acessada de qualquer lugar, a qualquer hora. Mas com tantos modelos de dispositivos—tablets, notebooks, netbooks e smartphones—como fazer com que seu produto funcione em todos? O Responsive Web Design—um conjunto de técnicas e ideologias—promete solucionar este problema, oferecendo o mesmo conteúdo em todas as plataformas, da melhor maneira. Nesta palestra, serão ensinadas técnicas de design, front e back-end para que seu site seja usável e acessível por todos, sem limitar-se a modelos, tamanhos de tela ou versões específicas.

The document discusses the messy and buggy state of the DOM across browsers and strategies for writing cross-browser JavaScript code. It notes that nearly every DOM method has bugs or inconsistencies in some browsers. It then covers strategies like feature detection, graceful fallback for missing features, simulating features via workarounds, monitoring for regressions, and having a robust test suite to prevent regressions in one's own code. The overall message is that the DOM is messy and one needs to "know your enemies" by thoroughly testing code in all target browsers.

This document discusses how to build applications that combine Ext JS components with Angular 2. It provides an overview of the new Angular 2 bridge for Ext JS, which allows Ext JS grids, trees, charts and other components to be used in Angular 2 apps. It demonstrates how to create Angular 2 components that utilize Ext JS components like grids, select fields and charts. It also shows how to create non-visual Ext JS classes like stores that can be used by the Angular 2 application. The document concludes with a demo of a sample Angular 2 application integrated with Ext JS.

A quick overview of tips, tricks and code snippets for developers using Symfony and all its ecosystem, from Monolog to Doctrine. Learn how to become more productive and discover some rarely used options and features.

This document discusses WebGL and WebVR. It provides an introduction and overview of WebGL 1.0 and 2.0, including key features and APIs. It also covers how to get VR devices and handle rendering for VR using WebVR, including handling eye parameters, view matrices, and timewarp. Code examples are provided for common VR rendering tasks. The document concludes by noting the rapid growth of VR and encourages developing with these web technologies.

Learn all about AWS Step Functions and how to use them to model business workflows and ship customer values quickly. In this session, we will talk about what is Step Functions, how to model business workflows as state machines, real-world case studies, and design patterns. By the end of this webinar, you should have a good idea of where Step Functions fit into your application and why you should use them (and why not!) to model workflows instead of building a custom solution yourself.

The document discusses organizing frontend assets in Rails applications. It recommends using Bower for frontend packages instead of gems. Rails Assets provides a bridge between Bower and Bundler. Autoprefixer can be used instead of Compass to add vendor prefixes. Grunt or Gulp can be used for task automation. Sass and BEM methodology are recommended for writing scalable, maintainable CSS code. Key aspects include separating concerns, naming conventions, and modular file structure.

The document discusses various jQuery anti-patterns that can negatively impact performance and compression. It describes caching selections, using document fragments to append content outside of loops, avoiding unnecessary re-querying of elements, and leveraging event delegation with delegate() instead of binding individual handlers. The document emphasizes optimizing selector syntax from right to left, avoiding universal selectors, and detaching elements from the DOM when manipulating them to improve speed.

Presented at phpXperts seminar 2009, Bangladesh. A real quick start for jQuery learners. http://tech.groups.yahoo.com/group/phpexperts/message/11888

This document provides an overview of jQuery, a JavaScript library. It discusses what jQuery is and is not (a library, not a framework), its basic features like selecting elements and chaining methods. It also covers jQuery's main functionality areas like selections, DOM traversal, DOM manipulation, attributes/CSS, events, and animation. The document provides examples for these areas and discusses useful techniques like event handling, namespacing, custom events, and event delegation that can be used with jQuery. It concludes with ways jQuery itself can be extended, such as adding new functions, selectors, or animation properties.

The way that banner is rendered is really bland. That animation performance is lackluster to say the least. Maybe you're still unsatisfied with grid. CSS has always suffered from a slow-paced evolution but it's probably coming to an end. Houdini is a project that aims to expose the internals of CSS engines to developers, in order to create new and performant ways to extend CSS. We'll see the current state-of-the-art and some neat examples, to conclude with a glance to what the future holds for us.

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.

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

CSS Media Queries have received a justifiable amount of hype lately. However, do they really represent a new way to take your web content mobile or do they promise more than they deliver? In this session lynda.com senior author James Williamson breaks down media queries, how to use them, and where they belong in your mobile development medicine chest.

Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

Responsive web design allows sites to adapt to different screen sizes and devices. Key techniques include using flexible layouts with relative units, media queries to apply styles conditionally, responsive images, and grid systems. The viewport meta tag controls scaling. Flexbox and grids help build flexible layout structures. Tables can be made responsive by scrolling or rearranging content for small screens. Mobile-first and content-focused approaches support responsive goals.

The document discusses media queries and responsive web design. It covers topics such as media types, logical operators, media features, viewports, layout strategies, and new CSS layout mechanisms. Throughout the document, B. Rowser engages in a comedic back-and-forth dialogue to help explain and expand on the concepts around responsive design. In the end, the document emphasizes thinking about design principles and systems rather than specific layouts.

This presentation introduces responsive web design which allows websites to automatically adapt their layout to different screen sizes. It discusses using a flexible grid system, flexible images and media, and media queries to create a single adaptive design. The strategy is to use a linear mobile-first approach and progressively enhance the design for larger screens using media queries. This allows the site to work on any device while providing the best experience for each form factor.

Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques. I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.

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

presportal.ru is the biggest Russian knowledge bank about presentations. We publish best presentations.

This document summarizes Vitaly Friedman's talk on responsive design techniques and tricks. The talk covered resolution independence using SVG/icon fonts, content choreography with Flexbox, compressive images that maintain quality at different sizes, conditional loading of assets based on breakpoints, and lazy loading of JavaScript and social buttons. It also discussed maintaining aspect ratios for images and videos across screens, and serving different video files for different devices. The overall message was that responsive design requires a new mindset and pragmatic solutions rather than rigid rules.

The document discusses responsive web design, which involves creating websites that automatically adapt their layout to different screen sizes and devices using flexible grids, flexible images and media, and media queries. The key ingredients of responsive web design are a flexible grid-based layout, flexible images and media that resize appropriately, and media queries which allow the application of CSS styles based on characteristics of the device. Responsive design aims to provide an optimized viewing and interaction experience across a wide range of devices without the need for separate mobile sites.

The document provides an overview of key considerations for designing mobile applications and websites. It discusses whether to build a mobile web or native app, addresses issues of screen size and resolution including pixel density, and emphasizes the importance of usability testing through wireframing and prototyping. Design decisions like whether to use vectors or raster images and how to handle orientation are covered. The document lists resources for mobile design patterns, guidelines and tools to use for wireframing prototypes.

This document provides an agenda for a presentation on building mobile map applications. It will cover 3 approaches to mobile map apps, frameworks for building them like CSS3 and HTML5, and hybrid map apps. It introduces the two presenters, Antoon Uijtdehaag and Andy Gup, and covers topics like why build mobile apps, demos of mobile apps, usage statistics, approaches, frameworks, and hybrid apps. It also includes questions that may come up around topics like panning and zooming maps, loading map layers, performance, and using GPS in surveys.

With great power, comes great responsive-ability web design. Responsive web design (RWD) will be demystified. Believe it or not, it's more than just media queries, although those will be discussed. It starts with proper UI design and application architecture, and then the dive into CSS - but not too deep! You don't have to be an expert to do RWD, but it helps to have some idea of what you are doing.

The document discusses responsive web design and how it offers a way forward to design work meant for different experiences across a gradient of devices. It provides examples of using CSS media queries to serve different stylesheets based on screen width and other device features. This allows content to adapt to different screens from mobile to desktop in a fluid, responsive way.

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. What are CSS grids and media queries, how do they work and how integrate these in my APEX application design? These are the questions I want to answer during my presentation, build an example explication using Theme 25, the responsive theme provided in Oracle Application Express 4.2.

Responsive web design refers to a website designed to adapt to whatever device a visitor is using. Responsive web sites are designed to provide an optimal viewing experience across all platforms. In this presentation, you'll find benefits and basic principles of Responsive Web Design.

A presentation for WordCampNL on the importance of accessible, useable websites and how to achieve that with responsive webdesign.

Progressive Web Apps: Opera’s Perspective discusses Opera's views on progressive web apps (PWAs). Some key points covered include: - PWAs are well-suited for Africa due to their lightweight nature and ability to work offline/with unreliable networks. - Opera Mini, used by millions in Africa, now supports PWA features when using standard web views but not its "Extreme" compression mode. - The document outlines various user experience patterns for PWAs, such as prompting installation, setting display modes, handling offline content, and using push notifications. - It also briefly discusses the display mode media query, experiments with PWA interfaces, and recommends the pwa

From its early days, Opera has focused on providing its users with a snappy browsing experience on a wide range of hardware and OSes. In this talk, I look at the latest versions of Opera for desktop, Opera Mobile and Opera Mini and explore how they make web pages super fast. http://velocityconf.com/velocityeu/public/schedule/detail/22183

Demos available on http://people.opera.com/andreasb/demos/demos_svgopen2011/ For a long time now, Opera has been committed to implementing SVG in its desktop and mobile browser products. Over the last year, we have been focused on improving the performance of our SVG implementation, while adding new features as well, including support for embedding SVG in HTML5. Our Opera Dragonfly debugger has matured as well and is now a powerful tool for debugging SVG on desktop as well as on mobile. In this presentation, I give a status update of Opera's SVG implementation and introduce some of the latest changes to our Opera Presto engine. I also show demos and practical examples of how SVG can be mixed with other technologies to create compelling web applications.

This is the presentation I gave at Gulltaggen as part of the "Three In One - Story, Technology and Team work" session: http://www.gulltaggen.no/2011/conference/day-1-12th-of-april/three-in-one-story-technology-and-team-work

My presentation for SVG Open 2010. http://svgopen.org/2010/registration.php?section=abstracts_and_proceedings#paper_32 Textures from http://www.flickr.com/photos/delanydean/4460819042/ (CC by 2.0) and http://www.flickr.com/photos/poetatum/3380087493/ (CC by-nc 2.0)

This document discusses mobile web development techniques and Opera's developer tools. It outlines three approaches to catering websites for mobile users: doing nothing, creating a separate mobile site, or creating one site that works for all devices. Key techniques discussed include using the viewport meta tag to control zoom levels, media queries to apply different CSS styles based on screen width, and keeping mobile design in mind from the start to simplify layouts. The document promotes the goal of a "one site holy grail" that works seamlessly across devices and concludes by introducing Opera's developer tools for testing mobile webpages.

The document discusses the history and evolution of web browsers and standards. It notes that early browsers in the 1990s included Mosaic and Netscape Navigator. In the late 1990s, Internet Explorer and Netscape competed using both open and closed standards. HTML5 was developed in the 2000s to better support web applications and add new elements like video. The document also discusses approaches to making websites mobile-friendly, including responsive design using viewport meta tags and media queries.

This is the presentation I gave on the "An Evening with YDN and Opera in Oslo" event (http://ydnoslo.eventbrite.com/). Opera Widgets for Desktop are available in our latest alpha build from http://www.opera.com/browser/next/