Welcome!
What are we going to talk about?
-
Since 2010, we've entered into a new phase in web design and development.
The Responsive idea was conceived to solve a problem.
Technology always evolves, trends always change. Now websites grow in their ambition and complexity,
we are not longer building pages, we are building dynamic and interactive Responsive web applications.
-
We are going to share advanced and emerging techniques for improving Responsive applications.
Focusing on "The Good Parts", avoiding the classic pitfalls, with the emphasis on latest trends and revealing what RWD really can do for you.
Simply put: Responsive Web Design is:
- Flexible, grid-based layout
- Flexible media: images; and
video;
- @media queries
RWD is just the beginning.
"The Good Parts" are on top of it:
- Mobile First
- Progressive Enhancement
- Automatic Tests
"Responsive Web Design is one of the most important technologies to appear in recent years.
But using RWD badly may be worse than not offering it at all", Craig Buckler
a better RWD definition
Responsive Web Design is the practice of creating reliable future friendly websites; that fluidly respond
to deliver the right user experience for the right environment at the right time.
Case study: RWD video
"Plan for the fact that whatever you implement will be deprecated", @grigs
Case study: Performance
- Mobile First development and Mobile First Design
- Treat Performance As Design
- Focus only the most important data
- Progressive Enhancement:
"As web creators we need to see performance as design", @elementByIdea
Case study: Testing Tools
- Browser based Testing Tools
- Brand Simulators: iOS, Android, Blackberry, etc.
- Testing performance
-
Remote debugging:
Android.
iOS.
- Real devices testing
- Automated Test:
"Mobile devices require software development teams to focus on only the most important data and actions in an application.", Luke Wroblewski
Case study: Measure units and pixel perfect on Responsive
"The Post-PSD Era", @brad_frost
Case study: CSS3 hot topics
Case study: HTML5 hot topics
"SVG is not meant to be used for pixel manipulation", net.tutsplus.com
Case study: HTML5 hot topics
"Mobile is a user state, not a device", @Cennydd
Case study: Using icon webfonts instead of images
Diversity is not a bug, it's an opportunity', @stephanierieger
RWD is not effortless, but it's worth it.
It's requires a lot of effort to create a Future-friendly Web.
Being a Responsive Developer is like surfing in an ocean of technologies and living in a culture of innovation,
feeling like we are not just developers;
"We are artists of the code"
Gratitude!
Questions?
- Further questions:
- My other presentations:
- Special Thanks to: