Smartphones, tablets, gaming consoles, ebook readers and internet fridges are becoming our main tools to browse the web and yet websites are strictly made for a desktop consumption.
We need to develop a device agnostic approach and fully embrace the flexibility of the web with semantic coding and progressive enhancements.
From The Front, Back To The Front (Cesena, Sept 29th, 2011)
@lucasalvini
Métricas e a automatização do controle de qualidadeCaelum
"Essa história vai melhorar as vendas. Essa refatoração vai melhorar a manutenção". Será?
Se queremos escolher histórias e manter um produto melhor para o cliente final, essa decisão deve ser baseada em alguma medida.
Complexidade do código? Coesão? Aguentar altas cargas? Diminuir taxas de erro? Efetuar mais compras? Para entender qualquer uma delas é preciso medir: veremos nessa palestra como pegar um projeto cujo build mínimo está automatizado, mediremos a complexidade do código, o desempenho em relação a erros, a vendas e a percepção do usuário final.
Mantemos um rastreamento dessas métricas com o passar do tempo: encontrando os commits responsáveis pela quebra nas regras estabelecidas. A decisão se algo é bom ou não deixa de ser romântico e passa a ser algo lógico.
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
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.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
User experience expert Theresa Neil will guide you through the current mobile strategies: Responsive web, Optimized sites, Native apps, and Hybrids.
Study the most successful mobile implementations in the market today (and some of the worst). Learn the merits and pitfalls of each strategy.
Get to your mobile solution faster by learning the best patterns for Navigation, Forms, Tables, Search, Sort & Filter, Charts, Tools, Invitations, Feedback, and Help.
New approaches for designing in the responsive age. These slides are from a presentation I did at the NYC Responsive Web Design Meetup on 14 June.
It includes a responsive case study from my work at R/GA and a look at new techniques responsive designers are using around the world to improve their workflow.
Huge thanks to @brad_frost, @laurenbugeja and Michael Barrish.
Métricas e a automatização do controle de qualidadeCaelum
"Essa história vai melhorar as vendas. Essa refatoração vai melhorar a manutenção". Será?
Se queremos escolher histórias e manter um produto melhor para o cliente final, essa decisão deve ser baseada em alguma medida.
Complexidade do código? Coesão? Aguentar altas cargas? Diminuir taxas de erro? Efetuar mais compras? Para entender qualquer uma delas é preciso medir: veremos nessa palestra como pegar um projeto cujo build mínimo está automatizado, mediremos a complexidade do código, o desempenho em relação a erros, a vendas e a percepção do usuário final.
Mantemos um rastreamento dessas métricas com o passar do tempo: encontrando os commits responsáveis pela quebra nas regras estabelecidas. A decisão se algo é bom ou não deixa de ser romântico e passa a ser algo lógico.
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
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.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
User experience expert Theresa Neil will guide you through the current mobile strategies: Responsive web, Optimized sites, Native apps, and Hybrids.
Study the most successful mobile implementations in the market today (and some of the worst). Learn the merits and pitfalls of each strategy.
Get to your mobile solution faster by learning the best patterns for Navigation, Forms, Tables, Search, Sort & Filter, Charts, Tools, Invitations, Feedback, and Help.
New approaches for designing in the responsive age. These slides are from a presentation I did at the NYC Responsive Web Design Meetup on 14 June.
It includes a responsive case study from my work at R/GA and a look at new techniques responsive designers are using around the world to improve their workflow.
Huge thanks to @brad_frost, @laurenbugeja and Michael Barrish.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
2024 State of Marketing Report – by HubspotMarius Sescu
https://www.hubspot.com/state-of-marketing
· Scaling relationships and proving ROI
· Social media is the place for search, sales, and service
· Authentic influencer partnerships fuel brand growth
· The strongest connections happen via call, click, chat, and camera.
· Time saved with AI leads to more creative work
· Seeking: A single source of truth
· TLDR; Get on social, try AI, and align your systems.
· More human marketing, powered by robots
ChatGPT is a revolutionary addition to the world since its introduction in 2022. A big shift in the sector of information gathering and processing happened because of this chatbot. What is the story of ChatGPT? How is the bot responding to prompts and generating contents? Swipe through these slides prepared by Expeed Software, a web development company regarding the development and technical intricacies of ChatGPT!
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
2024 State of Marketing Report – by HubspotMarius Sescu
https://www.hubspot.com/state-of-marketing
· Scaling relationships and proving ROI
· Social media is the place for search, sales, and service
· Authentic influencer partnerships fuel brand growth
· The strongest connections happen via call, click, chat, and camera.
· Time saved with AI leads to more creative work
· Seeking: A single source of truth
· TLDR; Get on social, try AI, and align your systems.
· More human marketing, powered by robots
ChatGPT is a revolutionary addition to the world since its introduction in 2022. A big shift in the sector of information gathering and processing happened because of this chatbot. What is the story of ChatGPT? How is the bot responding to prompts and generating contents? Swipe through these slides prepared by Expeed Software, a web development company regarding the development and technical intricacies of ChatGPT!
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
The realm of product design is a constantly changing environment where technology and style intersect. Every year introduces fresh challenges and exciting trends that mold the future of this captivating art form. In this piece, we delve into the significant trends set to influence the look and functionality of product design in the year 2024.
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
Mental health has been in the news quite a bit lately. Dozens of U.S. states are currently suing Meta for contributing to the youth mental health crisis by inserting addictive features into their products, while the U.S. Surgeon General is touring the nation to bring awareness to the growing epidemic of loneliness and isolation. The country has endured periods of low national morale, such as in the 1970s when high inflation and the energy crisis worsened public sentiment following the Vietnam War. The current mood, however, feels different. Gallup recently reported that national mental health is at an all-time low, with few bright spots to lift spirits.
To better understand how Americans are feeling and their attitudes towards mental health in general, ThinkNow conducted a nationally representative quantitative survey of 1,500 respondents and found some interesting differences among ethnic, age and gender groups.
Technology
For example, 52% agree that technology and social media have a negative impact on mental health, but when broken out by race, 61% of Whites felt technology had a negative effect, and only 48% of Hispanics thought it did.
While technology has helped us keep in touch with friends and family in faraway places, it appears to have degraded our ability to connect in person. Staying connected online is a double-edged sword since the same news feed that brings us pictures of the grandkids and fluffy kittens also feeds us news about the wars in Israel and Ukraine, the dysfunction in Washington, the latest mass shooting and the climate crisis.
Hispanics may have a built-in defense against the isolation technology breeds, owing to their large, multigenerational households, strong social support systems, and tendency to use social media to stay connected with relatives abroad.
Age and Gender
When asked how individuals rate their mental health, men rate it higher than women by 11 percentage points, and Baby Boomers rank it highest at 83%, saying it’s good or excellent vs. 57% of Gen Z saying the same.
Gen Z spends the most amount of time on social media, so the notion that social media negatively affects mental health appears to be correlated. Unfortunately, Gen Z is also the generation that’s least comfortable discussing mental health concerns with healthcare professionals. Only 40% of them state they’re comfortable discussing their issues with a professional compared to 60% of Millennials and 65% of Boomers.
Race Affects Attitudes
As seen in previous research conducted by ThinkNow, Asian Americans lag other groups when it comes to awareness of mental health issues. Twenty-four percent of Asian Americans believe that having a mental health issue is a sign of weakness compared to the 16% average for all groups. Asians are also considerably less likely to be aware of mental health services in their communities (42% vs. 55%) and most likely to seek out information on social media (51% vs. 35%).
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
This article is all about what AI trends will emerge in the field of creative operations in 2024. All the marketers and brand builders should be aware of these trends for their further use and save themselves some time!
A report by thenetworkone and Kurio.
The contributing experts and agencies are (in an alphabetical order): Sylwia Rytel, Social Media Supervisor, 180heartbeats + JUNG v MATT (PL), Sharlene Jenner, Vice President - Director of Engagement Strategy, Abelson Taylor (USA), Alex Casanovas, Digital Director, Atrevia (ES), Dora Beilin, Senior Social Strategist, Barrett Hoffher (USA), Min Seo, Campaign Director, Brand New Agency (KR), Deshé M. Gully, Associate Strategist, Day One Agency (USA), Francesca Trevisan, Strategist, Different (IT), Trevor Crossman, CX and Digital Transformation Director; Olivia Hussey, Strategic Planner; Simi Srinarula, Social Media Manager, The Hallway (AUS), James Hebbert, Managing Director, Hylink (CN / UK), Mundy Álvarez, Planning Director; Pedro Rojas, Social Media Manager; Pancho González, CCO, Inbrax (CH), Oana Oprea, Head of Digital Planning, Jam Session Agency (RO), Amy Bottrill, Social Account Director, Launch (UK), Gaby Arriaga, Founder, Leonardo1452 (MX), Shantesh S Row, Creative Director, Liwa (UAE), Rajesh Mehta, Chief Strategy Officer; Dhruv Gaur, Digital Planning Lead; Leonie Mergulhao, Account Supervisor - Social Media & PR, Medulla (IN), Aurelija Plioplytė, Head of Digital & Social, Not Perfect (LI), Daiana Khaidargaliyeva, Account Manager, Osaka Labs (UK / USA), Stefanie Söhnchen, Vice President Digital, PIABO Communications (DE), Elisabeth Winiartati, Managing Consultant, Head of Global Integrated Communications; Lydia Aprina, Account Manager, Integrated Marketing and Communications; Nita Prabowo, Account Manager, Integrated Marketing and Communications; Okhi, Web Developer, PNTR Group (ID), Kei Obusan, Insights Director; Daffi Ranandi, Insights Manager, Radarr (SG), Gautam Reghunath, Co-founder & CEO, Talented (IN), Donagh Humphreys, Head of Social and Digital Innovation, THINKHOUSE (IRE), Sarah Yim, Strategy Director, Zulu Alpha Kilo (CA).
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
The search marketing landscape is evolving rapidly with new technologies, and professionals, like you, rely on innovative paid search strategies to meet changing demands.
It’s important that you’re ready to implement new strategies in 2024.
Check this out and learn the top trends in paid search advertising that are expected to gain traction, so you can drive higher ROI more efficiently in 2024.
You’ll learn:
- The latest trends in AI and automation, and what this means for an evolving paid search ecosystem.
- New developments in privacy and data regulation.
- Emerging ad formats that are expected to make an impact next year.
Watch Sreekant Lanka from iQuanti and Irina Klein from OneMain Financial as they dive into the future of paid search and explore the trends, strategies, and technologies that will shape the search marketing landscape.
If you’re looking to assess your paid search strategy and design an industry-aligned plan for 2024, then this webinar is for you.
5 Public speaking tips from TED - Visualized summarySpeakerHub
From their humble beginnings in 1984, TED has grown into the world’s most powerful amplifier for speakers and thought-leaders to share their ideas. They have over 2,400 filmed talks (not including the 30,000+ TEDx videos) freely available online, and have hosted over 17,500 events around the world.
With over one billion views in a year, it’s no wonder that so many speakers are looking to TED for ideas on how to share their message more effectively.
The article “5 Public-Speaking Tips TED Gives Its Speakers”, by Carmine Gallo for Forbes, gives speakers five practical ways to connect with their audience, and effectively share their ideas on stage.
Whether you are gearing up to get on a TED stage yourself, or just want to master the skills that so many of their speakers possess, these tips and quotes from Chris Anderson, the TED Talks Curator, will encourage you to make the most impactful impression on your audience.
See the full article and more summaries like this on SpeakerHub here: https://speakerhub.com/blog/5-presentation-tips-ted-gives-its-speakers
See the original article on Forbes here:
http://www.forbes.com/forbes/welcome/?toURL=http://www.forbes.com/sites/carminegallo/2016/05/06/5-public-speaking-tips-ted-gives-its-speakers/&refURL=&referrer=#5c07a8221d9b
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
Everyone is in agreement that ChatGPT (and other generative AI tools) will shape the future of work. Yet there is little consensus on exactly how, when, and to what extent this technology will change our world.
Businesses that extract maximum value from ChatGPT will use it as a collaborative tool for everything from brainstorming to technical maintenance.
For individuals, now is the time to pinpoint the skills the future professional will need to thrive in the AI age.
Check out this presentation to understand what ChatGPT is, how it will shape the future of work, and how you can prepare to take advantage.
A brief introduction to DataScience with explaining of the concepts, algorithms, machine learning, supervised and unsupervised learning, clustering, statistics, data preprocessing, real-world applications etc.
It's part of a Data Science Corner Campaign where I will be discussing the fundamentals of DataScience, AIML, Statistics etc.
Time Management & Productivity - Best PracticesVit Horky
Here's my presentation on by proven best practices how to manage your work time effectively and how to improve your productivity. It includes practical tips and how to use tools such as Slack, Google Apps, Hubspot, Google Calendar, Gmail and others.
The six step guide to practical project managementMindGenius
The six step guide to practical project management
If you think managing projects is too difficult, think again.
We’ve stripped back project management processes to the
basics – to make it quicker and easier, without sacrificing
the vital ingredients for success.
“If you’re looking for some real-world guidance, then The Six Step Guide to Practical Project Management will help.”
Dr Andrew Makar, Tactical Project Management
5. one web to rule them alL
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
6. a new approach
before we start we need to unlearn something
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
7. a new approach
We have no canvas
there’s no such thing as pixel perfect
we know nothing*
*assumption is the mother of all fuckups
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
8. a new approach
SO,
what’s our starting point if we have no canvas?
CONTENT
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
9. a new approach
WE have to build AROUND
CONTENT
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
10. a new approach
structured & prioritized
CONTENT
AND RELEVANT, POSSIBLY.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
11. a new approach
structured & prioritized
CONTENT
AND RELEVANT, possibly.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
12. a new approach structured CONTENT
<article>
<hgroup>
<h2>Emmett Brown committed</h2>
<h3>Crackpot Inventor Declared Legally Insane</h3>
</hgroup>
<time datetime="1983-05-23">May 23, 1983</time>
<address>
! <p>Rachel Tennant</p>
</address>!!
<figure>
! <img src="i/art1.jpg" alt="Mr.Emmett Brown"/>
</figure>
<p>The facts regarding the situation remain the same, state the
authorities. Details concerning the action have been given a
preliminary investigation, but it is felt that only by a more detailed
study will the true facts become known.</p>
</article>
SEMANTIC HTML
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
13. a new approach structured CONTENT
<article role=”article”>
<hgroup>
<h2>Emmett Brown committed</h2>
<h3>Crackpot Inventor Declared Legally Insane</h3>
</hgroup>
<time datetime="1983-05-23">May 23, 1983</time>
<address>
! <p>Rachel Tennant</p>
</address>!!
<figure>
! <img src="i/art1.jpg" alt="Mr.Emmett Brown"/>
</figure>
<p>The facts regarding the situation remain the same, state the
authorities. Details concerning the action have been given a
preliminary investigation, but it is felt that only by a more detailed
study will the true facts become known.</p>
</article>
SEMANTIC HTML WAI-ARIA ROLES
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
14. a new approach structured CONTENT
<article role=”article” class=”hentry”>
<hgroup>
<h2 class=”entry-title”>Emmett Brown committed</h2>
<h3>Crackpot Inventor Declared Legally Insane</h3>
</hgroup>
<time class=”updated” datetime="1983-05-23">May 23, 1983</time>
<address class=”vcard”>
! <p class=”fn”>Rachel Tennant</p>
</address>!!
<figure>
! <img src="i/art1.jpg" alt="Mr.Emmett Brown"/>
</figure>
<p class=”entry-content”>The facts regarding the situation remain the
same, state the authorities. Details concerning the action have been
given a preliminary investigation, but it is felt that only by a more
detailed study will the true facts become known.</p>
</article>
SEMANTIC HTML WAI-ARIA ROLES
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
15. a new approach
structured & prioritized
CONTENT
AND RELEVANT, possibly.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
16. a new approach prioritized CONTENT
The foundation
the order of information is the simplest possible layout
Ok, but what next?
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
17. institute du monde arabe
Photo: Rory Hyde
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
18. institute du monde arabe
Photo: Rory Hyde
responsive architectures measure actual
environmental conditions to enable buildings to adapt
their form, shape, color or character responsively.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
19. institute du monde arabe
Photo: Rory Hyde
“Fluid grids, flexible images, and media queries are the
RWD
FLUID GRIDS Flexible
three technical ingredients for responsive web design”
ETHAN MARCOTTE
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
20. institute du monde arabe
Photo: Rory Hyde
RWD
FLUID GRIDS
Flexible images
media queries
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
21. institute du monde arabe
Photo: Rory Hyde
RWD
FLUID GRIDS
Flexible images
media queries
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
22. a new approach FLUID GRIDS
REMEMBER OUR foundation layout?
Every module of information can be
moved and resized as needed
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
23. a new approach FLUID GRIDS
REMEMBER OUR foundation layout?
Every module of information can be
moved and resized as needed
The GRID IS our guide
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
24. responsive web design FLUID GRIDS
fixed WIDTH grid FLUID grid
absolute units relative units
250px 250px 250px 250px 25% 25% 25% 25%
1000px any width
CONTENT
MATH is SIMPLE CONTAINER
=%
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
25. institute du monde arabe
Photo: Rory Hyde
responsive web design
RWD
FLUID GRIDS
Flexible images
media queries
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
29. responsive web design FLEXIBLE IMAGES
THE “HIDING” solution
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
30. institute du monde arabe
Photo: Rory Hyde
responsive web design
RWD
FLUID GRIDS
Flexible images
media queries
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
31. responsive web design MEDIA QUERIES
media types
@media screen {...}
@media print {...}
@media handheld {...}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
32. responsive web design MEDIA QUERIES
media types + logics =media queries
@media screen and (exp) {...}
@media print and (exp) {...}
@media handheld and (exp) {...}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
33. responsive web design MEDIA QUERIES
media types + logics =media queries
@media screen and (exp) {...}
@media print and (exp) {...}
@media handheld and (exp) {...}
they work as feature detection
@media screen and (min-width: 500px) {...}
(if viewport width is at least 500 pixels...)
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
34. responsive web design MEDIA QUERIES
WHAT features can we detect?
[min/max] WIDTH
[min/max] HEIGHT
[min/max] DEVICE-WIDTH
[min/max] DEVICE-HEIGHT
[min/max] ASPECT-RATIO
[min/max] DEVICE-ASPECT-RATIO
[min/max] COLOR
[min/max] COLOR-INDEX
MONOCHROME
[min/max] RESOLUTION
ORIENTATION
SCAN
GRID
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
35. responsive web design MEDIA QUERIES
WHAT features can we detect?
[min/max] WIDTH
[min/max] HEIGHT
[min/max] DEVICE-WIDTH
[min/max] DEVICE-HEIGHT
[min/max] ASPECT-RATIO
[min/max] DEVICE-ASPECT-RATIO
[min/max] COLOR
[min/max] COLOR-INDEX
MONOCHROME
[min/max] RESOLUTION
ORIENTATION
SCAN
GRID
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
36. responsive web design MEDIA QUERIES
WHAT features can we detect?
[min/max] WIDTH -webkit- [min/max] DEVICE-PIXEL-RATIO
[min/max] HEIGHT [min/max] --moz- DEVICE-PIXEL-RATIO
[min/max] DEVICE-WIDTH -o- [min/max] DEVICE-PIXEL-RATIO
[min/max] DEVICE-HEIGHT DEVICE-PIXEL-RATIO
[min/max] ASPECT-RATIO -moz- TOUCH-ENABLED
[min/max] DEVICE-ASPECT-RATIO
[min/max] COLOR
[min/max] COLOR-INDEX
MONOCHROME
[min/max] RESOLUTION
ORIENTATION
SCAN
GRID
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
37. responsive web design MEDIA QUERIES
dissection of media queries
@media [not|only] type [and] (condition) {...}
operators
and @media screen and (min-width: 500px)
and (max-width: 800px) {...}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
38. responsive web design MEDIA QUERIES
dissection of media queries
@media [not|only] type [and] (condition) {...}
operators
and @media screen and (min-width: 500px)
and (max-width: 800px) {...}
@media screen and (min-width: 500px),
OR screen and (orientation: landscape) {...}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
39. responsive web design MEDIA QUERIES
dissection of media queries
@media [not|only] type [and] (condition) {...}
operators
and @media screen and (min-width: 500px)
and (max-width: 800px) {...}
@media screen and (min-width: 500px),
OR screen and (orientation: landscape) {...}
NOT @media not screen and (min-width: 500px) {...}
!!
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
40. responsive web design MEDIA QUERIES
BE CAREFUL, NOT negates the entire media querY
@media not screen and (min-width: 500px) {...}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
41. responsive web design MEDIA QUERIES
BE CAREFUL, NOT negates the entire media querY
@media not screen and (min-width: 500px) {...}
So, it doesn’t evaluate like this
@media (not screen) and (min-width: 500px) {...}
X
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
42. responsive web design MEDIA QUERIES
BE CAREFUL, NOT negates the entire media querY
@media not screen and (min-width: 500px) {...}
So, it doesn’t evaluate like this
@media (not screen) and (min-width: 500px) {...}
X
But IT evaluates like this
@media (not (screen and (min-width: 500px))) {...}
✓
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
43. responsive web design MEDIA QUERIES
dissection of media queries
@media [not|only] type [and] (condition) {...}
ONLY AND NOT Hide the media query from OLDER BROWSERS
PRO TIP: preventing them to uncontitionally apply styles
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
44. responsive web design MEDIA QUERIES
THE VIEWPORT ISSUE
device-width
VIEWPORT width
@media only screen and (max-device-width: 20em) {
#test {width:50%}
}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
45. responsive web design MEDIA QUERIES
THE VIEWPORT ISSUE
device-width
VIEWPORT width
@media only screen and (max-device-width: 20em) {
#test {width:50%}
}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
46. responsive web design MEDIA QUERIES
THE VIEWPORT ISSUE
device-width
VIEWPORT width
<meta name=”viewport” content=”width=device-width, initial-scale=1” />
@media only screen and (max-width: 20em) {
#test {width:50%}
}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
47. responsive web design MEDIA QUERIES
THE ABSENCE of a media query
is in fact, the first media query
Bryan Rieger, Rethinking the Mobile Web
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
48. responsive web design MEDIA QUERIES
EVOLVE USING THE INCREaSING SPACE to
rearrange content flow.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
49. responsive web design MEDIA QUERIES
EVEN MORE SPACE
makes room for
LARGER images and
deeper asides
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
50. responsive web design MEDIA QUERIES
to infinity and beyond!
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
51. responsive web design MEDIA QUERIES
BREAKPOINTS BASED on cONTENT, not on devices
embrace CASCADING, define only WHAT CHANGES
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
52. responsive web design
silver bullet or fool’s gold?
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
53. responsive web design
ISSUES RAISED on RWD
1. one (image) size doesn’t fit all
❖ unnecessary downloads on small viewports or bad quality on large ones
❖ real-time image resizing is cpu and memory intensive
2. non viewable assets are downloaded anyway (display: none is not download:none)
❖ unnecessary downloads
3. media-queries will not remove unnecessary code
❖ unnecessary downloads of code not suitable for “mobile”
4. media-queries are not supported by older devices
❖ unnecessary downloads
❖ unpredictable css results
5. context of “mobile” ≠ context of “desktop”
❖ RWD doesn’t respect contextual usage patterns
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
54. Photo: Niall & Elizabeth Dawson
progressive enhancement
An escalator can never break; Mitch hedberg
it can only become stairs.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
55. progressive enhancement
big CSS IMAGES big inline images JS DRIVEN MAP selectivizr.js MODERNIZR.js RESPOND.js
PLUGIns, AUDIO &
VIDEO with
SMALL CSS SMALL inline FALLBACKS responsive
STATIC MAPS CSS3
IMAGES IMAGES layout
CSS: color and typography
STRUCTURED CONTENT with linear layout
media queries available Javascript available
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
56. progressive enhancement
ISSUES RAISED on RWD
1. one (image) size does’t fit all
❖ unnecessary downloads on small viewports or bad quality on large ones
❖ real-time image resizing is cpu and memory intensive
SOLUTION: start from small images and dinamically load bigger assets
resources:
http://adaptive-images.com/
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
http://www.craig-russell.co.uk/responsive-images-and-context-aware-image-sizing/
http://csswizardry.com/2011/07/responsive-images-right-now/
http://nicolasgallagher.com/responsive-images-using-css3/
http://blog.keithclark.co.uk/responsive-images-using-cookies/
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
57. progressive enhancement
ISSUES RAISED on RWD
2. non viewable assets are downloaded anyway (display: none is not download:none)
❖ unnecessary downloads
SOLUTION: start from the cleanest solution and progressive enhance
adding what MORE capable browsers can use.
if (matchMedia(‘only screen and
(min-width: 30em)’).matches) {
// load more assets
}
https://github.com/paulirish/matchMedia.js/
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
58. progressive enhancement
ISSUES RAISED on RWD
3. media-queries will not remove unnecessary code
❖ unnecessary downloads of code not suitable for SMALL VIEWPORTS
SOLUTION: use javascript & media-queries to add, not to remove it
4. media-queries are not supported by older devices
❖ unnecessary downloads
❖ unpredictable css results
SOLUTION: the first media-query is the absence of media-queries
use ONLY to prevent older browsers to unconditionally load css
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
59. progressive enhancement
ISSUES RAISED on RWD
5. context of “mobile” ≠ context of “desktop”
❖ doesn’t respect tipical usage based on context
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
60. Photo: Michael Mandiberg
progressive enhancement
DESKTOP USE CASE
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
61. Photo: S. Diddy
progressive enhancement
MOBILE USE CASE
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
62. progressive enhancement
ISSUES RAISED on RWD
5. context of “mobile” ≠ context of “desktop”
❖ don’t respect usage patterns
SOLUTION: IF YOU REALLY need to, progressive enhance reacting to location,
not screen width, and adapt content based to proximity
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
63. RWD + progressive enhancement
So, silver bullet or fool’s gold?
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
64. RWD + progressive enhancement
Maybe people resize windows,
maybe they don’t.
The point is a responsive site
means they no longer NEED to.
Scott Jehl, Filament Group
Photo: David Calhoun
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
65. RWD + progressive enhancement
it’s a gREAT OPPORTUNITY not to miss
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
67. TESTING
DESKTOP
test on every possible browser you can install
USe offsite browser testing services1
use “responsiveness” testing services2
MOBILE
Nothing is like the real thing
Android simulator
ios simulator
opera mini simulator
1 CrossBrowserTesting (http://crossbrowsertesting.com/), Browsershots (http://browsershots.org/), Litmus
(http://litmus.com/), Browsercam (http://www.browsercam.com/), etc...
2 Resize My Browser (http://resizemybrowser.com/), ResponsivePx (http://responsivepx.com/), ScreenFly (http://
quirktools.com/screenfly/), Responsive Design Testing (http://mattkersley.com/responsive/)
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
69. a new approach
structured & prioritized
CONTENT
AND RELEVANT, POSSIBLY.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
70. a new approach RELEVANT CONTENT
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
71. a new approach relevant CONTENT
t
elevan
O
r
NTE NT
C
WTF?!
“MOBILE” “DESKTOP”
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
72. a new approach relevant CONTENT
UX
+
performances
“MOBILE” “DESKTOP”
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
73. a new approach relevant CONTENT
UX
+
performances
“MOBILE” “DESKTOP”
8 number of requests 208
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
74. a new approach relevant CONTENT
UX
+
performances
“MOBILE” “DESKTOP”
8 number of requests 208
30,2KB total page size 1.28Mb
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
75. a new approach relevant CONTENT
UX
+
performances
“MOBILE” “DESKTOP”
8 number of requests 208
30,2KB total page size 1.28Mb
1.82 PAGE LOAD TIME (seconds) 7.95
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
76. a new approach relevant CONTENT
xkcd.com/773
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
77. THANK YOU
@lucasalvini
lucaSALVINI SEP29th2011 BACKTOTHEFRONT