Αναμείνατε ολίγον τι
Web Devel

AMP: πόσο responsive είναι;

AMP: πόσο responsive είναι;

Την προηγούμενη φορά μιλήσαμε για το τι είναι το AMP, ποιος είναι ο σκοπός του και κάποια βασικά χαρακτηριστικά για την δημιουργία τέτοιων σελίδων. Παρακάτω θα δούμε κάποιες από τις διαφορές μεταξύ των Accelerated Mobile Pages και του Responsive Web Design και πως μπορούμε να τα κάνουμε να συνυπάρχουν.

Οι διαφορές

Είτε μιλάμε για AMP είτε για Responsive Design, σίγουρα το αποτέλεσμα θα έχει μια αξόλογη εμφάνιση στις φορητές συσκευές. Όμως έχουν τελείως διαφορετικούς στόχους:

  • Το Responsive Web Design προσπαθεί να οργανώσει και να σχεδιάσει ένα webiste έτσι ώστε να εμφανίζεται σωστά σε οποιαδήποτε συσκευή, είτε είναι σταθερός υπολογιστής -laptop, είτε tablet, είτε τηλέφωνο. Εστιάζει στην ευελιξία.
  • Το AMP Project είναι ένα web framework που δημιουργήθηκε ώστε να μεταφέρει γρήγορα το περιεχόμενο στους χρήστεςμε φορητές συσκευές. έχει στόχο την ταχύτητα.
  • Το AMP μπορεί να δουλέψει πάνω σε μία ήδη υπάρχουσα ιστοσελίδα. Για να αποκτήσει μία ιστοσελίδα responsive design απαιτείτε τουλάχιστον μερικός ανασχεδιασμός, αν όχι ολικός.
  • Προς το παρόν το AMP λειτουργεί μόνο για στατικό περιεχόμενο.Το Responsive Design δεν έχει κάποιο περιορισμό, δουλεύει για οποιαδήποτε ιστοσελίδα. currently only works with static content, RWD can be used for any website.

Ο άτυπος κανόνας είναι ότι το AMP χεισιμοποιείται για άρθρα, για δημοσιεύσεις σε blog, για σελίδες με πληροφορίες και ανάλογο περιεχόμενο, και το RWD είναι καλύτερο για φόρμες και custom εφαρμογές.

Κάνοντας τις Accelerated Mobile Pages να γίνου περισσότερο Responsive

Αν και ο σκοπός των AMP είναι να φορτώνουν σε ελάχιστο χρόνο, δεν μας εμποδίζει τίποτα από το χρησιμοποιήσουμε RWD τεχνικές.

Κάτι που γίνεται και αρκετά εύκολο αφού το πρότυπο AMP υποστηρίζει τέτοιο σχεδιασμό:

  1. Μπορούμε να συνεχίσουμε να χρησιμοποιούμε τα ίδια CSS @media queries όπως στις κανονικές σελίδες. You can continue to use the same CSS @media queries as in your regular web pages.
  2. Για τον καλύτερο έλεγχο πανω σε ένα AMP element, μπορούμε να ορίσουμε το media attribute πάνω στο element. Αυτό είναι αρκετά χρήσιμο όταν πρέπει να εμφανιστεί ή κρυφτεί κάποιο στοιχείο σύμφωνα με το media query. For finer control over an AMP element, you can specify the media attribute on the element. This is particularly useful when you need to either show or hide an element based on a media query.
  3. το πρότυπο AMP προσφέρει built-in responsive components για να δημιουργήσει κανείς την ιστοσελίδα του. to include in your web pages.

Τι είναι το layout Attribute

Ο σχεδιασμός των AMP είναι σχετικά ίδιος με τις απλές σελίδες HTML: και στις δύο περιπτώσεις η υπόθεση είναι το CSS. Αν και τα AMP περιορίζουν την χρήση του CSS είτε για λόγους χρηστικότητας είτε για λόγους επιδόσεων, ενώ επεκτείνει τις δυνατότητες για responsive design, με την προσθήκη των placeholders και των fallbacks, του srcset και του layout attribute για να μπορούμε να ελέγχουμε καλύτερα το πως εμφανίζονται τα διάφορα elements.

Αντί να προσθέσουμε μέσα σε ένα stylesheet το responsive styling, μια καλύτερη προσέγγιση για τα AMPs είναι να εφαρμόσουμε το εκάστοτε styling πάνω στο element. Τα AMP elements με την χρήση του layout attribute, έχουμε πιο εύκολο έλεγχο του κάθε element για το πως θα εμφανιστεί στην οθόνη.

Ας δούμε το πως μπορεί να εφαρμοστεί πάνω σε ένα div element:

Πρώτα παρατηρούμε ότι υπάρχει το layout=»responsive» attribute. Υπάρχουν αρκετά layout types, αλλά πιο συχνά χρησιμοποιείται το «responsive». Όταν σε ένα element δώσουμε μία τιμή για τα height, width και έχουμε ορίσει το layout ως responsive, τότε υπολογίζεται η αναλογία (aspect ratio) από το height και το width, και αντίστοιχα καθορίζει την κλίμακα (responsive scale) του κουτιού που το περιέχεται (containing box) ώστε να έρχεται σε αναλογία με το width του πατρικού element.

Από τα χαρακτηριστικά που πρέπει να προσέξουμε περισσότερο στον παραπάνω κώδικα είναι το amp-fit-textcomponent. Τα AMPs θα προσπαθίσουν να βρουν την καλύτερο δυνατό μέγεθος για την γραμματοσειρά (font size) για να εφαρμόζει σωστά στον προκαθορισμένο χώρο, με όλο το περιεχόμενο που βρίσκεται μέσα στο amp-fit-text element. Εάν το περιεχόμενο του amp-fit-text κάνει overflow στον χώρο του element ακόμα και με το μικρότερο μέγεθος γραμματοσειράς, το περιεχόμενο που κάνει overflow θα αποκοπεί και να παραμείνει κρυφό. Οι browsers που χρησιμοποιούν WebKit και Blink θα εμφανίσουν τις τρεις τελείες (ellipsis) σε αυτή την περίπτωση.

Μπορούμε να καθορίσουμε τις αρχικές διαστάσεις του div μέσω CSS ως εξής:

Και θα φαίνεται κάπως έτσι:

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.

Στο παρασκήνιο συμβαίνουν αρκετά πράγματα. Προσθέτονται custom classes, ένα i-amphtml-sizer element, και ένα κρυφό αντίγραφο του amp-fit-text αυτού που βάλαμε εμείς.

 

Για την αποφυγή προβλημάτων, τα elements που έχουν το πρόθεμα i-amp- δημιουργούνται από τον μηχανισμό των AMPs και δεν είναι καθόλου καλό να τα πειράξει κανείς.

Ας δούμε όμως και πως λειτουργεί όταν αλλάζει το μέγεθος του div και πως επηρεάζει όσα περιέχει. Ας αλλάξουμε τις διαστάσεις του σε 480×320. Όπως βλέπουμε το μέγεθος της γραμματοσειράς μεγαλώνει για να γεμίσει τον διαθέσιμο χώρο:

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.

Αν μικρύνουμε όμως το div σε 180×320 , τότε θα προσωμοιώσουμε την κάθετη χρήση ενός τηλεφώνου (vertical phone viewport):

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.

Η γραμματοσειρά γίνεται πιο μικρή ώστε να εφαρμόζει στο μέγεθος του div.

Αυτό που είδαμε σε όλα τα παραπάνω είναι ότι ενώ σε κάθε περίπτωση μπορούμε να έχουν responsive design, είτε σε AMP είτε σε μια απλή HTML σελίδα, αλλά θέλει κάποια προσοχή όταν το κάνουμε στο πρώτο. Αντί να προσθέτουμε media queries, είναι καλύτερα να κάνουμε τις αλλαγές σε επίπεδο element, έχοντας θέσει layout=»responsive» ανάμεσα στα tags.

και μερικά λόγια σχετικά με το θέμα μας από την παρουσίαση των δημιουργών:

Πηγές

Μοιραστείτε το άρθρο

The following two tabs change content below.
agathan

agathan

Αποφοίτησα απο το τμήμα Εφαρμοσμένων Μαθηματικών του Πανεπιστημίου Κρήτης. Κάτα την διάρκεια εργάστηκα στην τεχνική υποστήριξη του τμήματος. Ακολούθησε το μεταπτυχιακό μου, Msc In Applied Mathematics at University Of Delaware. Ύστερα δούλεψα για μερικά χρόνια σαν web developer (CMS and what not) και SEO/Adwords engineer.
Και τώρα είμαστε στο GeekD, μια λέξη που περιγράφει όλα τα παραπάνω.

"All we have to decide is what to do with the time that is given us."
-Gandalf The Grey, JRR Tolkien

Αφήστε ένα σχόλιο

Επιλογές της ομάδας
Νέα εντυπωσιακά ευρήματα από το ναυάγιο των Αντικυθήρων
Μελέτη σε αρχαίο κείμενο αποκαλύπτει νέα στοιχεία για την προέλευση του μηδενός
Τα 10++ καλύτερα plugins αναζήτησης του Wordpress για το 2017
Ο «ανθρώπινος υπολογιστής» Katherine Johnson, τιμάται από τη NASA για το σπουδαίο έργο της στις διαστημικές αποστολές
Έξι επιστήμονες της NASA πέρασαν έναν χρόνο «αρειανής ζωής» στη Γη
tablet - smartphone
Flash player and Html 5 logos
cassini grand finale video still Science Breakthrough
Catan in Virtual Reaiity
Close

Συνεχίζοντας να χρησιμοποιείτε την ιστοσελίδα, συμφωνείτε με τη χρήση των cookies. Περισσότερες πληροφορίες.

Οι ρυθμίσεις των cookies σε αυτή την ιστοσελίδα έχουν οριστεί σε "αποδοχή cookies" για να σας δώσουμε την καλύτερη δυνατή εμπειρία περιήγησης. Εάν συνεχίσετε να χρησιμοποιείτε αυτή την ιστοσελίδα χωρίς να αλλάξετε τις ρυθμίσεις των cookies σας ή κάνετε κλικ στο κουμπί "Κλείσιμο" παρακάτω τότε συναινείτε σε αυτό.

Κλείσιμο