Phones, laptops, game consoles, TVs, and even smartwatches - what do they have in common? Internet access and their own web browsers. On one hand it’s a blessing, having immediate access to information, but on the other hand, the number of available combinations of screens and their parameters is simply overwhelming. During this presentation, I will try to explain some of the current problems faced not only designers and developers but by regular people browsing the web. As a bonus, I would like to share his vision regarding possible development directions thanks to upcoming innovations in media types.

1. State of Responsive Web
Design in 2019 and Beyond
by: Kamil Biedrzycki

2. $ whoami
• Software Engineer @ AirHelp
• Pilot of Rio Team (New Markets!)
• At AirHelp Aug 2016 - Jun 2017 and since Jan 2019
• @KBiedrzycki
• kbiedrzycki

3. Agenda
- What the heck is RWD?
- But it’s just fluid design, right?
- Why should we care?
- What can we do?
- Happy future or dev nightmare?
Let the story begin

4. The very beginning

5. Audi.de page in 2002 - small screen (640x480)

6. Audi.de page in 2002 - medium screen (800x600)

7. Audi.de page in 2002 - large screen (1024x768)

8. Ethan Marcotte

9. 😱😱😱

10. Responsive web design is the
technique of building web pages that
render well on a variety of devices.

12. Say hi to fluid grids and @media queries

13. Why is it not just fluid design?

14. Why is it not just fluid design?

16. Content runs the show now,
and the show must go on!

17. But is it only a
matter of screen
size now?
● Aspect ratio
● Screen pixel density
● Screen orientation
● Screen type
● Input type
● Proximity

18. Internet also matters

19. CPU (and RAM) also matters

20. CPU (and RAM) also matters

21. User preferences also matters

22. Accessibility and RWD

23. “Accessibility is talking about
providing an equal opportunity for all
the users including people with
disability.”
http://www.sumandamera.com/responsive-web-designrwd-and-its-accessibility-part1/

24. The Straw Test

28. “I can always tell where the link is”

32. We have a chance
to educate people
as well

33. RWD is not a trend anymore.
It's a set of good practices that help
us to understand people better and
let them feel more comfortable.

34. Okay, it’s a lot.
Do we have to do all of these?

36. Identify and understand
your audience

37. Device type stats at app.airhelp.com (data from GA)

38. 😱😱😱
Screen resolution stats at app.airhelp.com (data from GA)
mobile
desktop

39. Identify and understand
your problems

40. "That’s too far!"

41. "Oh man, there's so much to tap!"

42. Measuring level of responsiveness

43. Future of RWD

44. Stretchable surfaces,
AKA: Guys, we’re leaving 2D

45. Foldable phones

46. The perfect couple:
Complementary devices

47. Computer and Phone

48. Console and Gamepad

49. Goggles and Wands

50. Goggles and Wands

51. https://cockpit-react-360.netlify.com

52. Drink Responsibly

53. Drink Responsibly
Think Responsively!

54. Thank you for your
attention! 🏁