Atsaucīgais tīmeklis

1. Atsaucīgais tīmeklis Artūrs Sosins

2. Mobilo ierīču skaits pieaug

3. Paņemsim mazpazīstamu ciemu

4. Kur dzīvo parasti cilvēki

5. Strādā sēra raktuves

6. Un ir tikai mobilais

11. Tīmekļu lapas • Ir platformas neatkarīgas • Ir dzelžu neatkarīgas • Pazīstamas izstrādes tehnoloģija • Ar jaunām HTML 5 iespējam, tā ir lieliska platforma

12. Pats Darvins teica It is not the strongest of the species that survives, nor the most intelligent, but the one most responsive to change.

13. Responsiveweb • Jauna tīmekļa lapu izstrādes tendence • Atbalsts ekrāniem no 480x320 līdz 2560x1440 (WQHD standarts) • Fluiddesign • Sadale kollonās • MediaQueries • Mobile First

14. Fluiddesign

15. Sadale kolonās • Ekrāns ir sadalīts vairākās kolonās • Kolonām ir minimālais platums • Samazinoties ekrāna izmēra kolonas pārlec uz nākamo rindu • Piemērs

16. Kolonu sadales piemērs

17. Kolonu sadales piemērs

18. Kolonu sadales piemērs

19. MediaQueries • <linkrel="stylesheet” href="layout.css” media="screenand (min-width:400px)" /> • @media (min-width:400px) { }

20. MediaQueries atbalsts

21. Vai tomēr?

22. Mobile first • Standarta dizains - mobilajām ierīcēm • Ar MediaQuery – ielādējam dizainu pārējām ierīcēm • IE6, IE7 un IE8 rādīs mobilo versiju?

23. Respond.js

24. CrossbrowserMediaQueries

25. Daži piemēri

26. Daži piemēri

27. Daži piemēri

28. Daži piemēri

29. Daži piemēri

30. Nākamā problēma ir attēli • Mēs varētu ielādētu attēlus priekš PC un mainīt tiem izmēru klienta pusē izmantojot CSS • Bet tādā gadījumā mēs ielādējam pilno attēlu kurš sver daudz vairāk • Un šāda veida attēls var arī slikti izskatīties

32. Populārākie risinājums • Samazināt attēlu servera pusē vai nu dinamiski, vai glabājot dažādas attēla versijas • Izmantojot vektorgrafiku ko piedāvā SVG.

33. SVG + Raphael JS framework • Nav pikseļu • Var mainīt izmērus staipīties • Ļoti mazs faila izmērs • Raphael JS ietvars priekš atbalsta uz visām pārlūkprogrammām

34. Kāpēc visi nelieto SVG? // Creates canvas 320 × 200 at 10, 50 var paper = Raphael(10, 50, 320, 200); // Creates circle at x = 50, y = 40, with radius 10 var circle = paper.circle(50, 40, 10); // Sets the fill attribute of the circle to red (#f00) circle.attr("fill", "#f00"); // Sets the stroke attribute of the circle to white circle.attr("stroke", "#fff");

35. Responsive video • Kas tad notiek ar video? • Nevar samazināt servera pusē • Jāsaglabā proporcijas

36. Risinājums • Priekš HTML5 video: • width: 100%; • height: auto; • Priekš embeded video: • Fitvid.jsJquery spraudnis, embeded video izmēra mainīšanai

37. Datu tabulas • Var būt neierobežotā platumā • Jāattēlo dati tik pat viegli uztverami • Jāvar salīdzināt rindas savā starpā

38. Tabulas piemērs

39. Responsivetable

40. Skaitliskie dati

41. Grafiskais attēlojums

42. Kopsavilkums Samērā ātrs, lēts un viegls veids kā nodrošināt piekļuvi jūsu tīmekļa lapām no jebkuras platformas • Bet • Ir izņēmuma gadījumi • Ir daudz neatrisinātu problēmu • Nav piemēroto izstrādes rīku