Responsive Web Design: Media Queries
Με την εξάπλωση των smartphones και των κινητών με πρόσβαση στο internet, ο web designer έχει μπροστά του μια πρόκληση:
Να κάνει το website του να εμφανίζεται εξίσου καλά, είτε ο επισκέπτης το βλέπει από το smartphone του είτε από την 22 ιντσών οθόνη του υπολογιστή του!
Φυσικά η ιδέα δεν είναι νέα -κάντε μια αναζήτηση στο Google για “Responsive Web Design” ή “Adaptive Web Design”- αλλά η εφαρμογή της είναι όλο και περισσότερο επιτακτική στις μέρες μας.
Τι θα φτιάξουμε
Δείτε το τελικό demo εδώ: http://www.ituts.gr/tutorials/media_queries.html
Στο παρόν tutorial θα χρειαστούμε βασικές γνώσεις HTML5 και CSS. Ξεκινάμε;
Τα αρχεία μας
Στην αρχή θα φτιάξουμε ένα υποτυπώδες αρχείο HTML5 και θα το ονομάσουμε index.html, καθώς και ένα αρχείο CSS και θα το ονομάσουμε style.css, με περιεχόμενο βελτιστοποιημένο για 1024 x 768 ανάλυση οθόνης.
index.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ituts.gr CSS Media Queries</title> <meta name="apple-mobile-web-app-capable" content="yes" /> <link href="style.css" type="text/css" rel="stylesheet" media="screen" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> </head> <body> <div id="container"> <header> <h1><a href="#">ituts.gr Media Queries</a></h1> </header> <div id="content"> <article> <h2>Nice Tile Here</h2> <img src="http://www.ituts.gr/wp-content/uploads/2011/02/android-code-230x216.png" alt="Your Pretty Photo" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo aliquam arcu luctus consectetur. Nullam sed nisi sem, ac semper tortor. Mauris eu ornare nisi. Quisque commodo ornare erat, vel cursus dui lobortis id. Nullam ut enim sed libero mollis blandit. Nunc varius interdum ultricies. Sed gravida imperdiet ipsum quis tristique. Etiam id lacus sed sem accumsan blandit. Suspendisse sed ipsum id ipsum tempus facilisis. Aenean justo sem, accumsan non tempus nec, congue eu quam. Fusce gravida, leo sit amet vehicula fringilla, ante dui gravida risus, in aliquam orci mi sed odio. Mauris in nisi sed tellus gravida eleifend ut hendrerit risus. Quisque id lorem est.</p> <p>Integer faucibus, augue vitae vulputate sodales, tellus tellus vulputate tortor, in iaculis ipsum orci vitae libero. Vestibulum laoreet accumsan erat vel pretium. Ut turpis elit, ultricies id accumsan non, condimentum feugiat neque. Nam ut erat urna, a porta augue. Donec vel porttitor magna. Cras eget tortor eget ante malesuada sodales sed a leo. Fusce sit amet cursus sem. Nulla aliquet accumsan ante sit amet condimentum. Morbi varius porta sapien nec iaculis. In gravida velit at nulla imperdiet varius.</p> <p>Mauris consectetur tempus lorem id aliquet. Proin eu faucibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In magna ligula, ornare sed posuere faucibus, consequat ac lacus. Fusce sodales fermentum nibh, a imperdiet nisi bibendum eget. Donec gravida iaculis sapien eu consectetur. Curabitur id augue augue. Nam mauris urna, suscipit eget faucibus sit amet, mollis vitae felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris ipsum lectus, imperdiet id aliquam nec, vulputate vitae mauris. Integer gravida, neque eu placerat egestas, urna metus bibendum nisl, quis congue felis velit id diam. Quisque non tortor at turpis facilisis placerat quis sed felis. Ut eget ipsum dolor, id lacinia leo. Vivamus vitae blandit libero. Integer ultricies gravida leo quis lobortis.</p> </article> <article> <h2>Another Title</h2> <img src="http://www.ituts.gr/wp-content/uploads/2011/05/csharp-446x196.jpg" alt="Long Photo" /> <p>Aenean imperdiet condimentum pellentesque. Nulla facilisi. Sed sit amet enim vel libero aliquam auctor a eu nulla. Phasellus id leo vitae turpis pretium iaculis quis ac lacus. Vivamus cursus, neque quis laoreet tristique, tortor ligula tincidunt est, dictum cursus leo nisl vel sapien. Fusce adipiscing, felis non viverra ultrices, elit mauris ornare leo, vitae sodales elit tellus ac nisl. Suspendisse sodales, neque id accumsan consequat, massa sapien sodales ligula, vel aliquam lacus est non velit. Suspendisse vulputate eleifend erat, nec sollicitudin ligula pellentesque eget.</p> <p>Maecenas volutpat tortor sit amet ligula pellentesque vitae mattis risus placerat. Mauris id turpis sed purus fringilla venenatis. Suspendisse lacus erat, volutpat nec mattis malesuada, vulputate at nulla. Nullam ut mauris vel lorem venenatis blandit. Suspendisse potenti.</p> </article> </div> <footer>A media queries demo by <a href="http://www.ituts.gr/" title="Sotiris Kalathas">Sotiris Kalathas</a> for <a href="http://www.ituts.gr/" title="ituts.gr">ituts.gr</a></footer> </div> </body> </html>
style.css :
*{margin:0 auto;padding:0;border:none;list-style:none;vertical-align:baseline;text-decoration:none;outline:none;} html{overflow-y:scroll;-webkit-font-smoothing:antialiased;font-size:16px;} body{background:#fff;font-size:62.5%;font-family:Helvetica, Arial, "Lucida Grande", sans-serif;color:#111;} a:link, a:visited, a:active{color:#da1c5c;border-bottom:1px dotted #000;padding:2px;} a:hover{color:#fff;border:none;background:#333;} p{font-size:1.3em;margin:5px 5px 20px 5px;font-size:1.2em;} h1{font-size:2.6em;} h2{font-size:2.1em;} h1,h2{margin-left:10px;} img{float:left;margin:10px;} header,#content,article,footer{width:100%;display:block;overflow:auto;} #container{display:table;width:980px;background:#f0f0f0;border:1px #999 solid;} header{height:86px;background:#333 url(http://www.ituts.gr/wp-content/themes/ituts/custom/uploads/site_logo_20101211080251.jpg) no-repeat top left;} header h1{display:block;margin:10px auto 10px 275px;color:#fff;} article{float:left;clear:left;margin:10px auto;} footer{display:block;text-align:center;border-top:1px #999 dotted;}
Στην οθόνη μας θα δούμε κάτι τέτοιο:
Ο κανόνας του 62.5%
Δεν ξέρω κατά πόσο έχετε ξανακούσει για τα μεγέθη σε em αντί για px (pixels) και τον κανόνα του 62.5%, αλλά μπορείτε να ανατρέξετε εδώ: http://clagnut.com/blog/348/.
Χοντρικά θα σας πω οτι ορίζοντας στο CSS ότι:
body{font-size:62.5%;}
και εφ’όσον το default font-size των browsers είναι 16px, 62.5 * 16 = 10px, δηλαδή 1em = 10px. Αν για παράδειγμα θέλουμε η παράγραφος να έχει μέγεθος κειμένου 13px θα ορίσουμε:
p{font-size:1.3em;}
. Αυτό θα μας βοηθήσει στο να μεγαλώνουμε / μικραίνουμε τα κείμενα καλύτερα ανάλογα με το μέγεθος της οθόνης!
* hack: για να βεβαιωθούμε οτι το default μέγεθος του browser είναι 16px και δεν το έχει πειράξει ο χρήστης, ορίζουμε, όπως θα παρατηρήσατε στο styles.css:
html{font-size:16px;}
CSS Media Queries
Ας περάσουμε όμως στο “ζουμί” του tutorial… Τα CSS Media Queries είναι απλές “εντολές” CSS οι οποίες λένε στον browser να αλλάξει τις ιδιότητες των επιλεγμένων elements ανάλογα με το μέγεθος της οθόνης.
π.χ.
@media screen and (min-width:1200px){ html{font-size:18px;} #container{width:1080px;} }
Προσθέτοντας το παραπάνω κομμάτι κώδικα CSS στο τέλος του style.css λέμε στον browser οτι εάν το μέσο είναι οθόνη και η ανάλυση της οθόνης είναι τουλάχιστον 1200 εικονοστοιχεία σε πλάτος (δλδ από 1200px και επάνω) τότε το #container, δηλαδή το div που περικλείει τα πάντα μέσα στο body θα έχει πλάτος 1080px.
Αυτό που μόλις κάναμε είναι να εμφανίζουμε το website μας με μεγαλύτερο πλάτος και άρα φιλικότερο όταν ο χρήστης μεγάλες αναλύσεις οθόνης. Στις μεγαλύτερες οθόνες, όμως, τα μικρά γράμματα ίσως δεν είναι ευανάγνωστα. Στο παραπάνω media query θα προσθέσουμε τον αντίστοιχο κώδικα, και θα γίνει έτσι:
@media screen and (min-width:1200px){ html{font-size:19,2px;} #container{width:1080px;} }
Στην ουσία αλλάξαμε το μέγεθος του 1em από 10px σε 19,2 * 62,5% = 12px και άρα “μεγαλώσαμε” όλα τα κείμενα κατά το ίδιο ποσοστό. (Εάν δεν θέλετε να το κάνετε αυτό μαζικά, μπορείτε απλά να αλλάξετε ένα ένα τα μεγέθη των elements.)
Για τις μικρότερες διαστάσεις, π.χ. κινητά, iphone, ipad κλπ;
Smartphones
Όταν θέλουμε να συμπτύξουμε το website μας τα πράγματα γίνονται λίγο πιο περίπλοκα: Θα πρέπει να υπολογίσουμε επίσης και το πλάτος των εικόνων και να αλλάξουμε λίγο τον τρόπο που στοιχίζεται το περιεχόμενό μας. Χρήσιμος σύμμαχος θα είναι στη συνέχεια του tutorial ένας browser resizer όπως αυτός στη σελίδα http://resizemybrowser.com/
Για κινητά με μέγεθος οθόνης κάτω από 480px (συνήθεις αναλύσεις κινητών, πλάτος 240px, 320px ή 480px), θα χρησιμοποιήσουμε ένα media query σαν το παρακάτω:
@media screen and (max-width:480px){ html{font-size:12.8px;} #container{width:98%;} header{height:130px;background-position:top center;text-align:center;} header h1{margin:90px auto 10px auto;} p{clear:left;} img{max-width:298px;margin:10px auto;} } }
Εδώ μεγάλωσα λίγο το ύψος του header γιατί έβαλα τον τίτλο h1 κάτω από το λογότυπο (background), όπως επίσης με το
p{clear:left;}
λέω στην παράγραφο να στοιχίζεται αριστερά και εν τέλει κάτω από την εικόνα.
Μέγιστο πλάτος της εικόνας δίνω 298px, έτσι ώστε με ανάλυση 320px να μην ξεφεύγω σε πλάτος (1px border + 10px margin + 298px εικόνα + 10px margin + 1px border = 320px).
Νομίζω μπήκατε στο νόημα. Ομοίως για smartphones με πλάτος οθόνης πάνω από 480px και έως και 768px (π.χ. ipad) θα χρησιμοποιήσω κάτι αντίστοιχο, αλλάζοντας στην ουσία μόνο το μέγεθος της γραμματοσειράς και το πλάτος των εικόνων:
@media screen and (min-width:481px) and (max-width:768px){ html{font-size:14.4px;} #container{width:96%;} header{height:130px;background-position:top center;text-align:center;} header h1{margin:90px auto 10px auto;} img{max-width:458px;} } }
Τελικά
Μπορούμε να φτιάξουμε όσα media queries θέλουμε. Πάρτε μερικές ιδέες από τις προτεινόμενες αναλύσεις του http://resizemybrowser.com/ ή και του http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.
Aς δούμε λοιπόν πως διαμορφώθηκε το τελικό style.css και αμέσως μετά ένα οπτικό παράδειγμα του τι φτιάξαμε!
*{margin:0 auto;padding:0;border:none;list-style:none;vertical-align:baseline;text-decoration:none;outline:none;} html{overflow-y:scroll;-webkit-font-smoothing:antialiased;font-size:16px;} body{background:#fff;font-size:62.5%;font-family:Helvetica, Arial, "Lucida Grande", sans-serif;color:#111;} a:link, a:visited, a:active{color:#da1c5c;border-bottom:1px dotted #000;padding:2px;} a:hover{color:#fff;border:none;background:#333;} p{font-size:1.3em;margin:5px 5px 20px 5px;font-size:1.2em;} h1{font-size:2.6em;} h2{font-size:2.1em;} h1,h2{margin-left:10px;} img{float:left;max-width:958px;margin:10px;} header,#content,article,footer{width:100%;display:block;overflow:auto;} #container{display:table;width:980px;background:#f0f0f0;border:1px #999 solid;} header{height:86px;background:#333 url(http://www.ituts.gr/wp-content/themes/ituts/custom/uploads/site_logo_20101211080251.jpg) no-repeat top left;} header h1{display:block;margin:10px auto 10px 275px;color:#fff;} article{float:left;clear:left;margin:10px auto;} footer{display:block;text-align:center;border-top:1px #999 dotted;} @media screen and (min-width:1224px){ html{font-size:19.2px;} #container{width:1080px;} } @media screen and (min-width:769px) and (max-width:960px){ #container{width:96%;} header{height:140px;background-position:top center;text-align:center;} header h1{margin:90px auto 10px auto;} img{max-width:747px;} } @media screen and (min-width:481px) and (max-width:768px){ html{font-size:14.4px;} #container{width:96%;} header{height:130px;background-position:top center;text-align:center;} header h1{margin:90px auto 10px auto;} img{max-width:458px;} } @media screen and (max-width:480px){ html{font-size:12.8px;} #container{width:98%;} header{height:130px;background-position:top center;text-align:center;} header h1{margin:90px auto 10px auto;} p{clear:left;} img{max-width:298px;margin:10px auto;} }
Γίνετε επεξεργασία, Παρακαλώ περιμένετε...
Πολύ μεγάλη η εξέλιξη στην ευκολία με την οποία μπορεί ο designer να εξασφαλίσει ότι η ιστοσελίδα του να εμφανίζεται εξίσου καλά σε όλες τις συσκευές. Κάτι τέτοιο με html4 και css2 απαιτούσε έξτρα αρχεία css για κάθε περίπτωση ή javascript.Πολύ ωραίο το άρθρο σου Σωτήρη, πραγματικά δίνει λύσεις σε πολλά προβλήματα ως προς την διαφορετική εμφάνιση των ιστοσελίδων σε διαφορετικές συσκευές, ειδικά τώρα που τα tablets και τα smartphones κερδίζουν μερίδια αγοράς.Thank you for sharing!
Ωραίο άρθρο αλλά με μια σημαντική παράλειψη. Πολλά κινητά δε “καταλαβαίνουν” τα media queries για αυτό και θα πρέπει η αρχική σχεδίαση να αφορά στα κινητά και να φτιάχνουμε queries για τις μεγάλες αναλύσεις. Δηλαδή το ανάποδο από αυτό που περιγράφεις.
Έχω διαβάσει άρθρα και απόψεις επάνω σε αυτό που λες, δηλαδή να φτιάχνουμε websites με πλάτος 320px και τα CSS Media Queries να μεγαλώνουν το website ανάλογα με το μέγεθος της οθόνης.
Οι παλιές εκδόσεις των browsers, και ειδικά ο αγαπητός σε όλους Internet Explorer δεν υποστηρίζει media queries, οπότε, χωρίς τη χρήση JavaScript (π.χ. http://code.google.com/p/css3-mediaqueries-js/) ή κάποιου είδους hack θα έχουμε πρόβλημα.
Πολλοί browsers παλαιότερων κινητών δεν υποστηρίζουν καν html5.
Ίσως και να κουβαλάω κι εγώ όπως και πολλοί άλλοι που ασχολούνται με web design παιδικές ασθένειες (π.χ. το να είμαστε “δέσμιοι” να σχεδιάζουμε για IE6 800×600) και είμαι υπεραισιόδοξος στην σταδιακή επικράτηση των smartphones έναντι των απλών κινητών με πρόσβαση στο internet.
Ήθελα να κρατήσω το tutorial σε απλό και κατανοητό επίπεδο και εννοείται οτι ένα tutorial δεν είναι κανόνας, είναι μια πυξίδα και μόνο εμβαθύνοντας περεταίρω κανείς μπορεί να πει οτι καλύφθηκε.
Για την ιστορία, δοκίμασα τα media queries σε ένα Sony Ericcson J105i με WAP και το αποτέλεσμα ήταν ικανοποιητικό – τα media queries όντως δουλεύανε!
Ρίξτε μια ματιά σε αυτό: http://www.slideshare.net/livefront/responsive-design-7877412
Τι μου θύμισες! Η αλλαγή σε σχεδίαση 1024Χ768 (αντί του 800Χ600, για να μην πω 777 αν αφαιρέσεις την μπάρα), ήταν σαν επανάσταση. Δεν ήθελα να πιστέψω ότι οι οθόνες μεγάλωσαν.
Γειά σας!
Μιλάτε στο tutorial για Html5.
Εγω απο προγραμματισμό δεν γνωρίζω πάρα πολλά αλλα έχω ασχολιθεί με την απλή html. Στον κώδικα παραπάνω δεν μπορώ να διακρίνω πού διαφέρει απο την απλή html.
Για να ασχολιθώ με κάτι ανάλογο προτείνετε να μάθω html5;
@Alexandros: Τα media queries είναι στην ουσία CSS Media queries, οπότε έχουν να κάνουν με το CSS, όχι με την έκδοση της HTML.
Στον παραπάνω κώδικα, όπου χρησιμοποίησα HTML5, κάλλιστα θα μπορούσε κανείς να φτιάξει το index.html με HTML4.01, δηλαδή αντί για <header></header> να έχει <div class=”header”></div> αντί για <article></article> να έχει <div class=”article”></div>.
Όσο για τις διαφορές HTML5 με HTML4.01 μπορείτε να ρίξειτε μια ματιά εδώ: http://www.web-resources.eu/archives/html5-and-html4-tags