This document discusses responsive web design and tools for testing responsive websites. It introduces responsive design principles like fluid grids, flexible images, and media queries. It also provides code examples for building responsive layouts using relative units like ems and percentages instead of pixels. Testing tools like mobitest.akamai.com are mentioned. The overall topic is techniques for crafting websites that provide optimal viewing across various devices.

1. Komfort
we wszechobecnym Internecie
Mateusz Miracki

2. 2000

7. <table>
<table>
<tr>
<td>hello</td>
<td>from</td>
</tr>
<tr>
<td>HTML</td>
<td>table</td>
</tr>
</table>

8. Evolution?

9. AJAX!
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// do sth with xmlhttp.responseText;
}
}
xmlhttp.open("GET", "http://example.com/ajax", true);
xmlhttp.send();

17. The State of the Internet

20. Options?

21. ignore

22. mobile website

23. application

24. RWD

25. Responsive web design
is a web design approach aimed at crafting sites to provide an
optimal viewing experience—easy reading and navigation
with a minimum of resizing, panning, and scrolling—across a
wide range of devices (from desktop computer monitors to
mobile phones).

27. Responsive web design
fluid grid
flexible images
media queries

28. RWD - grid
no pixels
target ÷ context = result
em
%

29. RWD - images
img, object { max-width: 100%; }
overflow:hidden
best quality

30. RWD - media queries
@media screen and (min-width:500px) { }

31. RWD
<meta name="viewport" content="width=device-width">

32. Tools?

34. mobitest.akamai.com

35. THE END