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.
Author: Oleg Gomozov, Senior Software Engineer
Agenda:
- Chose yours: flexible, fluid, adaptive, responsive
- Some data about units
- Media Queries Magic
- JavaScript practices
- Browser, please, help me
- Mobile first, how and why
- Tricks, tools and hacks
This reference is intended to help those familiar with the Bootstrap 3 CSS framework to quickly see how to write the classes properly. For a clickable index please visit:
https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/
Getting to Know Bootstrap for Rapid Web DevelopmentLaurence Svekis ✔
Learn how to add Bootstrap classes to create amazing Bootstrap effects responsive web projects and rapid modern websites
https://www.udemy.com/getting-to-know-bootstrap-for-rapid-web-development/?couponCode=SLIDESHARE
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
Wouldn't it be cool to be able to use CSS3 and HTML5 unfettered by the lack of support in IE? Mobile developers for smart phones get to do just that!
When developing for iPhones, iPods, iPads and Android devices—mobile devices using webkit browsers—we can use CSS animations, transforms, multiple background images, rounded corners, text and box shadows, CSS columns, and HTML5 form elements.
In this session we'll use some CSS3 features learned in earlier session to create a native looking iPhone web app. We'll also cover some CSS UI and HTML5 form elements that will help you get up to speed on developing for mobile webkit. You don't have to wait any longer to use CSS3!
Author: Oleg Gomozov, Senior Software Engineer
Agenda:
- Chose yours: flexible, fluid, adaptive, responsive
- Some data about units
- Media Queries Magic
- JavaScript practices
- Browser, please, help me
- Mobile first, how and why
- Tricks, tools and hacks
This reference is intended to help those familiar with the Bootstrap 3 CSS framework to quickly see how to write the classes properly. For a clickable index please visit:
https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/
Getting to Know Bootstrap for Rapid Web DevelopmentLaurence Svekis ✔
Learn how to add Bootstrap classes to create amazing Bootstrap effects responsive web projects and rapid modern websites
https://www.udemy.com/getting-to-know-bootstrap-for-rapid-web-development/?couponCode=SLIDESHARE
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
Wouldn't it be cool to be able to use CSS3 and HTML5 unfettered by the lack of support in IE? Mobile developers for smart phones get to do just that!
When developing for iPhones, iPods, iPads and Android devices—mobile devices using webkit browsers—we can use CSS animations, transforms, multiple background images, rounded corners, text and box shadows, CSS columns, and HTML5 form elements.
In this session we'll use some CSS3 features learned in earlier session to create a native looking iPhone web app. We'll also cover some CSS UI and HTML5 form elements that will help you get up to speed on developing for mobile webkit. You don't have to wait any longer to use CSS3!
Joomla!Day 2013 Nürnberg; Vortrag von Johannes HockadhocgraFX
Responsive Web Design - Erfahrungen, Fragestellungen, Experimente und Ideen zu responsive Templates für Joomla! 2.5 JoomSkeleton und JoomFluid und JoomFlex für Joomla! 3.
Brief overview about difference of adaptive and responsive web design, main principles of build responsive layout, and main component of responsive layout is media query.
CSS in React is a talk I gave at the ReactJS San Francisco Bay Area meetup yesterday. It covers viable options for implementing CSS in JavaScript React components and the good and bad parts of various solutions including Radium, react-css-modules, styled components, combined with Sass, Webpack, Babel, and ES6.
It also includes a github repo https://github.com/joeshub/css-in-react where you can run all the examples locally
Device aware web frameworks for better programmingSuntae Kim
To capitalize on the explosion of multi-device web access, companies need to unify their web-based properties for desktop, tablets and mobile and implement a holistic, One Web approach. When evaluating solutions that support One Web, it is important to select technologies that support single code-base, offer seamless device-based optimization and deliver fast load times.
[CSSDevConf] Adaptive Images in Responsive Web Design 2014Christopher Schmitt
The web doesn't stop at the desktop anymore. Our image assets need to do more than look good in one context. In this talk, I look at how images like JPEG, GIFs, SVG, Icons, Unicode, and more can be used in a multi-device environment.
Joomla!Day 2013 Nürnberg; Vortrag von Johannes HockadhocgraFX
Responsive Web Design - Erfahrungen, Fragestellungen, Experimente und Ideen zu responsive Templates für Joomla! 2.5 JoomSkeleton und JoomFluid und JoomFlex für Joomla! 3.
Brief overview about difference of adaptive and responsive web design, main principles of build responsive layout, and main component of responsive layout is media query.
CSS in React is a talk I gave at the ReactJS San Francisco Bay Area meetup yesterday. It covers viable options for implementing CSS in JavaScript React components and the good and bad parts of various solutions including Radium, react-css-modules, styled components, combined with Sass, Webpack, Babel, and ES6.
It also includes a github repo https://github.com/joeshub/css-in-react where you can run all the examples locally
Device aware web frameworks for better programmingSuntae Kim
To capitalize on the explosion of multi-device web access, companies need to unify their web-based properties for desktop, tablets and mobile and implement a holistic, One Web approach. When evaluating solutions that support One Web, it is important to select technologies that support single code-base, offer seamless device-based optimization and deliver fast load times.
[CSSDevConf] Adaptive Images in Responsive Web Design 2014Christopher Schmitt
The web doesn't stop at the desktop anymore. Our image assets need to do more than look good in one context. In this talk, I look at how images like JPEG, GIFs, SVG, Icons, Unicode, and more can be used in a multi-device environment.
An updated / extended version of the "What's Next In Marketing And Advertising (2009)" presentation I gave in Boston a couple months back.
This one was given in Brussels, Belgium at the Union of Belgian Advertisers 60 Anniversary Congress.
Introduction to Responsive Web Design http://tinyurl.com/9ldo4c6
Includes a sample project built from scratch in Node.js using LESS available on Github
Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens
From meta viewport to @viewport and from device-pixel-ratio to the resolution media query: various responsive design hooks are undergoing standardization, allowing for future-proof sites that work well in different contexts. In addition, new CSS features like object-fit, relative length units and so on are increasingly supported by browsers as well, and allow for more versatile responsive design solutions. In my talk, I will look at these features and explain how they can be used in websites today.
Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens
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.
Making your site mobile-friendly / RIT++Patrick Lauke
Expanded version of my "Making your site mobile-friendly" speed talk, delivered via Skype for the Russian Internet Technology (RIT) conference, Moscow, 12 April 2010
Responsive Web Design - Devoxx UK - 2014-06-13Frédéric Harper
There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.
Similar to The specs behind the sex, mobile-friendly layout beyond the desktop (20)
IONIC, el framework para crear aplicaciones híbridas multiplataformabetabeers
En esta charla, Juan nos va a enseñar los conceptos básicos para crear una aplicación móvil multiplataforma usando el framework "IONIC". Aprenderemos cómo instalar las herramientas básicas para su uso, haremos una breve aproximación a los distintos plugins que nos ofrece "Cordova" y aprenderemos un poco de la arquitectura interna de IONIC (basado en un patrón MVC, el cuál usa AngularJS, Typescript y CSS (bajo SASS).
Servicios de Gestión de Datos en la Nube - Jaime Balañá (NetApp)betabeers
La transformación digital ha traído nuevas opciones para desplegar aplicaciones y las exigencias de flexibilidad en el desarrollo de negocio son cada vez mayores. ¿Infraestructura propia? ¿Proveedores de servicios? ¿AWS? ¿Azure? En el próximo Betabeers Bilbao, Jaime Balañá, Director Técnico de NetApp, explicará cómo las empresas pueden aprovechar estas distintas opciones sea cual sea su dimensión de negocio y sin cambiar la forma de gestionar sus datos.
Blockchain: la revolución industrial de internet - Oscar Lagebetabeers
Oscar Lage nos hablará de Blockchain una tecnología revolucionaria que viene para quedarse y su capacidad para descentralizar la confianza. Esta cualidad que permite eliminar los intermediarios en muchos procesos y servicios empresariales, dando lugar a nuevos modelos de negocio basados en la desintermediación y la colaboración. La principal diferencia entre Blockchain e internet es que mientras que la red se limita al intercambio de información, la cadena de bloques permite intercambiar valor. Por ejemplo, con Blockchain podremos comprar o vender casas, cosas e ideas directamente entre nosotros sin necesidad de intermediarios, como Amazon, Visa o Wallapop.
Cloud Learning: la formación del siglo XXI - Mónica Mediavillabetabeers
La industria de la educación online y el e-Learning sigue avanzando y proponiendo nuevas maneras de aprender. Estamos en un momento de transición en el que los escenarios formativos locales presenciales se están transformando en escenarios formativos globales en la nube.
Desarrollo web en Nodejs con Pillars por Chelo Quilónbetabeers
Desarrollo web en Nodejs con Pillars por Chelo Quilón. En esta charla veremos inicialmente conceptos de Node.js y JavaScript, para después introducir las características diferenciadoras del desarrollo web en Node.js y se expondrá la metodología para crear una aplicación web mediante el framework Pillars.js.
La línea recta hacia el éxito - Jon Torrado - Betabeers Bilbaobetabeers
Falso. La línea recta al éxito no existe, pero convivir con las curvas es parte del camino. Jon Torrado cuenta con una amplia trayectoria como emprendedor y nos contará su experiencia. Especialmente las claves de GamersWalk donde es Co-founder y CTO. Un proyecto disfrutar de los streamers y eventos de eSport, con los mejores premios.
Ponencia sobre emprendizaje en el Betabeers Bilbao sobre emprendizaje el 24/03/2017
6 errores a evitar si eres una startup móvil y quieres evolucionar tu appbetabeers
Has publicado una versión en el Apple Store con una feature espectacular. Tras un par de días en producción te das cuenta de que algo no va bien y que tienes malas reviews en el store. Mientras localizas el error vas perdiendo cada vez más usuarios... ¿te suena?
No tienes una arquitectura limpia definida en tu proyecto, por lo que te cuesta localizar este fallo, un fallo que podría haberse previsto usando Unit Test, o haberlo detectado a tiempo usando un sistema de crash reporting.
Tras unos años trabajando para startups móviles de diferentes partes del mundo como freelance, Roberto Garrido nos habla de su stack tecnológico preferido para intentar atajar este tipo de problemas.
Dev ops.continuous delivery - Ibon Landa (Plain Concepts)betabeers
Integración y entrega continua: principios y prácticas englobados desde de estos conceptos y por supuesto, beneficios que estas prácticas pueden ofrecer para nuestro producto o negocio.
Gestión de proyectos y consorcios internacionales - Iñigo Cañadas (GFI)betabeers
Hablaremos de las cualidades que debe tener un Project Manager internacional, así como de los retos a los que se enfrenta a la hora de ejercer su liderazgo, con escasa autoridad y debiendo actuar como mediador de conflictos en distintos contextos culturales. También repasaremos los estándares y buenas prácticas en gestión de proyectos más valoradas a nivel internacional, y conoceremos la metodología de trabajo y herramientas adoptadas por Gfi-GaiaTradeFactory para gestionar sus proyectos europeos.
Presentación en Betabeers Madrid - Marzo 2016
IBM Bluemix posee un extenso catálogo de servicios para ayudar a los desarrolladores en su trabajo. Dentro de estos servicios se encuentra Watson, que contiene una serie de servicios cognitivos para enriquecer el funcionamiento de las aplicaciones: análisis de sentimientos de textos, convertir voz a texto y viceversa o extraer información de fotografías, etc.
Spark Java: Aplicaciones web ligeras y rápidas con Java, por Fran Paredes.betabeers
Pesado, lento, antiguo, complicado y complejo son los calificativos que suelen venir a la mente cuando pensamos en aplicaciones web con Java. Y en verdad es así si utilizamos frameworks tradicionales (JSF, Struts, Spring, etc.), enfocados a desarrollar grandes aplicaciones empresariales o corporativas. Pero si necesitamos hacer una aplicación web pequeñas y simples, ¿no hay ningún framework que nos ayude sin toda la complejidad de los tradicionales? Pues sí que lo hay y se llama Spark Java.
Buenas prácticas para la optimización webbetabeers
Buenas prácticas en el frontend, y acciones en el servidor, para hacer que tu web vuele. Impartida por @lmmartin en el XI Betabeers Badajoz (16/07/2015).
Introducción al Big Data - Xabier Tranche - VIII Betabeers Bilbao 27/02/2015betabeers
¿Qué es el Big Data? ¿Qué diferencia hay entre una base de datos relacional y una documental? El almacenamiento masivo de datos es una tendencia en los proyectos tecnológicos. Gracias a bases de datos como MongoDB ahora es posible. Xabier Tranche cuenta con una amplia en proyectos digitales y en marketing, siendo el promotor de Start-ups como Muaacka. Pondrá a nuestra disposición toda su experiencia en esta ponencia
PAYTPV Plataforma Integral de Cobros - VIII Betabeers Bilbao 27/02/2015betabeers
PAYTPV tiene como función reducir los pasos en los procesos de compra y mejorar la experiencia de los clientes a la hora de pagar en cualquier página Web, Móvil, Tablet o SmarTV. Las soluciones de PAYTPV permiten a las empresas poder operar a través del TPV que estas ya tengan contratado con su entidad Bancaria, permitiendo que sus clientes puedan pagar directamente en su página Web, Móvil o Tablet. Los clientes no tendrán que salirse de una experiencia de compra integrada y el cobro y respuesta positiva o negativa se les ofrece en la misma página.
24. Media types
all braille
embossed handheld
print projection
screen speech
tty tv
25. CSS 3 Media Queries
“...the new hotness” Jeffrey Zeldman
http://www.zeldman.com/2010/04/08/best-aea-yet/
26. CSS 3 Media Queries
● builds on CSS 2.1 Media Types concept
● more granular control (not just screen, print...)
http://www.w3.org/TR/css3-mediaqueries/
27. Media features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio
28. CSS 3 Media Queries
<link rel="stylesheet" ...
media="screen and (max-width:480px)" href="...">
@import url("...") screen and (max-width:480px);
@media screen and (max-width:480px) {
// insert CSS rules here
}
29. Multiple expressions – and keyword
@media screen and (min-width:180px) and (max-
width:480px) {
// screen device and width > 180px
// and width < 480px
}
30. Multiple expressions – comma separated
@media screen and (min-width:800px),
print and (min-width:20em) {
// screen device with width > 800px
// or print device with width > 20em
}
31. Negative expressions – not keyword
@media not screen and (min-width:800px) {
// not applied to screen device
// with width > 800px
}
32. Exclusive expressions – only keyword
@media only screen and (min-width:800px) {
// only applied to screen device
// with width > 800px
}
33. Multiple media queries
/* “The absence of a media query is the first
media query” Bryan Rieger */
@media screen and (max-width:480px) {
// screen device and width < 480px
}
@media screen and (max-width:980px) {
// screen device and width < 980px
}
@media screen and (min-width:980px) {
// screen device and width > 980px
}
49. If you're using Media Queries:
<meta name="viewport"
content="width=device-width">
If you have an explicit width:
<meta name="viewport"
content="width=550">
53. CSS Device Adaptation
@viewport {
width: 320px;
zoom: 2.3;
user-zoom: fixed;
}
www.w3.org/TR/css-device-adapt
only works in Opera Mobile 11+ at the moment, with -o- prefix
dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
68. Apple way
<img src=lores.jpg data-src=hires.jpg alt="blah">
Both images are download; requires JS for hires image
69. adaptive-images.com
Add .htaccess and adaptive-images.php to your document-
root folder.
Add one line of JavaScript into the <head> of your site.
Add your CSS Media Query values into $resolutions in the
PHP file.
71. .. extrapolate to HTML?
<img src=foo-lowres.png
set="foo-lowres.png 1x,
foo-highres.png 2x" alt="blah">
"I'll post something to the whatwg thread referencing this
proposal."
72. video and Responsive Web Design
<video>
<source … media="(min-width:1000px)">
<source … media="(max-width:1000px)">
</video>
77. Note to people who weren't at the talk: following slides are
strawman ideas for the next iteration of Media Queries (CSS
4) and are almost certainly to be completely different if they
ever make it into the specification. (CSS 3 MQs became a
"Proposed Recommendation", eg a "Standard" week of 23
April 2012, so very early days!)
78. @media screen and (script) {...}
@media screen and not (script) {…}
http://lists.w3.org/Archives/Public/www-style/2012Jan/0034.html
79. @media (paged) and (interactive:0) {
// I am like a printer
}
@media (paged) and (interactive) {
// I'm a projector, or like a Kindle
}
@media (paged) and (interactive) and (touch)
{
// I'm like a touch-screen Kindle
}
80. @media (touch) and (max-width: 480) {
// looks like an smart phone
}
@media (touch) and (keyboard) and
(min-width:600) {
// looks like a touch-screen laptop
}
81. @media (remote) {
// TV or set-top box?
}
@media (remote) and (hover) {
// Wii?
}
82.
83. @media (network: v-slow) {..}
Florian: "It has been proposed. Most people agree that it
would be cool, nobody has a clue about how to spec it in a
way that is useful and implementable. If you find people
with a clue, encourage them to submit proposals to me or
to www-style@w3.org. Use [css4-mediaqueries] in the
subject line, and read lists.w3.org/Archives/Public/www-
style/2012Mar/0691.html first."