Κάνοντας ένα site mobile friendly

[philos]

Ετοιμάζω το responsive style ενός site και θέλω τις συμβουλές σας.

Πρόκειται για ένα site με σταθερό πλάτος 1000px στο περιεχόμενο, συνεπώς φαίνεται πολύ καλά σε οθόνες με πλάτος ανάλυσης 1024px και άνω.

 

Οι ερωτήσεις μου:

1. Έχω βάλει  μέχρι στιγμής μόνο το εξής media query CSS:

@media (max-width: 1000px) { 
 /* */ 
}

Και σκέφτομαι να μην βάλω άλλο. Δηλαδή αν το width είναι κάτω από 1000px, να υπάρχει μόνο μια εκδοχή ως φιλική σε χαμηλές αναλύσεις. Τι λέτε;

Ποιο είναι το ελάχιστο πλάτος σε px που θα πρέπει να έχω υπόψιν μου κατά το build αυτής της μιας εκδοχής; Δηλαδή σε τι pixels να βασιστώ ώστε να είμαι βέβαιος ότι θα φαίνεται καλά; Να πούμε 320px;

Πάνω σε αυτό, αν δεν προτείνεται μόνο το παραπάνω media query, τι άλλες αναλύσεις πλάτους να βάλω ως βασικές;

 

2. Τι κριτήρια κοιτάει η Google για να κρίνει το site ως mobile friendly; Παίζει αν υπάρχει μόνο το παραπάνω media query, να μη θεωρηθεί το site mobile friendly;

 

3. Όταν το responsive style είναι έτοιμο, πρέπει να κάνω κάτι στη search console ή άλλο εργαλείο της google ώστε να την ενημερώσω ότι το site είναι πλέον mobile friendly;

 

4. Πρέπει να προσέξω κάτι άλλο κατά την ανάπτυξη του στυλ; (βασικά το στυλ είναι κάτι που υπάρχει, κι εγώ απλά κόβω και ράβω με CSS για να φαίνεται καλά σε χαμηλές αναλύσεις)

 

Όποιος έχει υπόψιν του απάντηση σε μια τουλάχιστον ερώτηση από τις παραπάνω θα με βοηθούσε πολύ. Δεν έχω ξανά ασχοληθεί με responsive styling.

 

 

Επεξ/σία 11 Μαρτίου 2018 από philos

[The King]

Ακόμα και ο πιο έμπειρος χάνεται χωρίς να πιαστεί αρχικά από κάποιους οδηγούς ως μπούσουλα για τα πιο standard breakpoints που αφορούν σε media queries αντίστοιχων αναλύσεων οθονών, orientations και συσκευών.

1. http://stephen.io/mediaqueries/
2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
3. https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

Επιπλέον για να διαβάσεις γενικότερα

1. https://wpbuffs.com/responsive-media-queries/
2. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Εργαλεία

1. https://mydevice.io/
2. http://quirktools.com/screenfly/
3. https://www.browserstack.com/responsive (το καλύτερο, δοκιμάζεις σε εικονικά boxes, έχει δωρεάν περίοδο χρήσης)

Η Google το βλέπει μόνη της, δε χρειάζεται να την ενημερώσεις, καλό είναι φυσικά να pushάρεις μέσω Google Webmasters Tools το επόμενο fetch όταν θα είναι έτοιμο το mobile.

Για το πόσο θεωρείται mobile friendly το website σου για τη Google το ελέγχεις στο https://search.google.com/test/mobile-friendly και περαιτέρω ανάλυση για το website σου καθολικά παίρνεις από το https://developers.google.com/speed/pagespeed/insights/

Επεξ/σία 11 Μαρτίου 2018 από The King

[ajaxmonkey4hire]

κατά την γνώμη μου:

1200

1024

768

640

320

είναι κάπως πολλά άλλα πολλές είναι και οι διαστάσεις στης οθόνες.

[XPHSTOS_]

Όταν κάνεις target συγκεκριμένες διαστάσεις και παίζεις με αυτές λέγετε Adaptive Layout.
Δηλαδή κάνεις target συγκεκριμένες συσκευές και διαστάσεις και αν κάτι "σπάει" στα ενδιάμεσα δεν σε ενδιαφέρει γιατί απλά το πιο πιθανό είναι να μην υπάρχει συσκευή με αυτή την διάσταση.
Αν σε ενδιαφέρει αυτό, δες τα links που σου πρότειναν και δες ποιες είναι οι πιο δημοφιλές διαστάσεις βάσει των συσκευών που κυκλοφορούν.

Ακόμη πιο σωστό είναι να τσεκάρεις μέσω analytics tools τι συσκευές χρησιμοποιούν οι χρήστες του site σου και αν πρέπει να χάσεις χρόνο για να τους καλύψεις όλους.

Αν πάλι σε ενδιαφέρει να παίζει τέλεια σε ότι ανάλυση μπορεί να υπάρξει, τότε θέλεις Fluid Layout.
Το fluid όπως μαρτυρά και όνομα του παίζει άψογα παντού... πως το επιτυγχάνεις αυτό?
Ανοίγεις τα developer tools και στο responsive mode χειροκίνητα μικραίνεις και μεγαλώνεις την σελίδα μέχρι να πετύχεις μια αστοχία στο design.
Γράφεις το query και συνεχίζεις... "rinse & repeat"..

Είναι πολύ πιο χρονοβόρο, το πιο πιθανό είναι να καταλήξεις με μεγαλύτερο css file αλλά ακόμη και αν υπάρχει ένας ανώμαλος που θέλει να έχει σε ένα παράθυρο 546x368 τον browser του, το site σου θα παίζει σωστά!
Αν αξίζει να το κάνεις, κάντο... αν πληρώνει ο πελάτης δηλαδή.

Η google αυτό που κοιτάει στο mobile κυρίως είναι η ταχύτητα.
Δεν μπορεί να ξέρει το layout σου και πως εσύ το θέλεις, στιλιστικά, δεν την νοιάζει κιόλας την νοιάζει όμως να δει κάποια meta tags στο head τα οποία δηλώνουν ότι το site είναι mobile friendly καθώς και να διαβάσει το "@media" στα css σου.
Από κει και πέρα, αν φορτώνεις εικόνες που είναι μόνο για mobile, αν έχεις κάνει minify τα css σου και τα scripts σου , αν έχεις caching κλπ. τότε θα είσαι μια χαρά.

[philos]

Το θέμα ξέρετε ποιο είναι;

Ότι αν βάλω media query για max-width 320px κι ένα για 640px, κάποιος που μπαίνει με smartphone 360px width, θα βλέπει την 640px εκδοχή, πράγμα που δεν είναι χρηστικό. Οπότε πως το αντιμετωπίζουμε αυτό;

 

Το λέω με αφορμή ότι εργάζομαι κάνοντας προς το παρόν τις δοκιμές μου με την developer console του Chrome και βλέπω πχ πως θα φαίνεται σε standard 320px αλλά διαπιστώνω ότι υπάρχει και πολλές άλλες ενδιάμεσες αναλύσεις, πχ Lumia 950 (360px), Nexus X5 (412px), iPhone 7 (375px) κτλ.

Οπότε ποια η διαχωριστική γραμμή; Να υποθέτω την ορίζω εγώ κατά το design της σελίδας; Κάτι standard, έστω για τα ενδιάμεσα υπάρχει;

Επεξ/σία 17 Μαρτίου 2018 από philos

[The King]

@philos

Δουλεύεις με conditions.

Τα logical operators είναι: and, not, only, or (με κόμμα) ενώ μπορείς να κάνεις όσα combinations θες στο ίδιο media query. Δες περισσότερα στο https://css-tricks.com/logic-in-media-queries/

 

Στο ερώτημα σου για τα ενδιάμεσα μεγέθη:

@media only screen and (min-width: 321px) and (max-width: 639px) {
     .myClass1 {
         font-weight: bold;
        /* και τα λοιπά */
    }
     .myClass2 {
        /* και τα λοιπά */
    }
}

Επίσης μπορείς να παίξεις με pixel ratio (ειδικά για iOS συσκευές, θέλει προσοχή όμως)

@media screen and (-webkit-min-device-pixel-ratio: 2) { ...  }

με aspect ratio

@media (aspect-ratio: 1/1) { ... }

με resolutions

@media (resolution: 150dpi) { ... }

και orientations

@media screen and (orientation: landscape) { ...  }

 

Δες όλα τα Media Features στο https://developer.mozilla.org/en-US/docs/Web/CSS/@media

 

.

Επεξ/σία 17 Μαρτίου 2018 από The King

[beefmazi]

19 ώρες πριν, philos είπε

Το θέμα ξέρετε ποιο είναι;

Ότι αν βάλω media query για max-width 320px κι ένα για 640px, κάποιος που μπαίνει με smartphone 360px width, θα βλέπει την 640px εκδοχή, πράγμα που δεν είναι χρηστικό. Οπότε πως το αντιμετωπίζουμε αυτό;

Το λέω με αφορμή ότι εργάζομαι κάνοντας προς το παρόν τις δοκιμές μου με την developer console του Chrome και βλέπω πχ πως θα φαίνεται σε standard 320px αλλά διαπιστώνω ότι υπάρχει και πολλές άλλες ενδιάμεσες αναλύσεις, πχ Lumia 950 (360px), Nexus X5 (412px), iPhone 7 (375px) κτλ.

Οπότε ποια η διαχωριστική γραμμή; Να υποθέτω την ορίζω εγώ κατά το design της σελίδας; Κάτι standard, έστω για τα ενδιάμεσα υπάρχει;

Γενικά θα πρέπει  τις οθόνες κάτω απο 768px να τις θεωρείς οθόνες κινητού και θα πρέπει να έχουν την ίδια αντιμετώπιση.

Αν εφάρμοζεις σωστά πρακτικές responsive design δεν θα χρειαστεί να μπείς σε αυτή  την διαδικασία άσε που δεν το βλέπεις κάθολου συχνά να εφαρμόζεται στην βιομηχανία δηλαδή για 40px και 100px ας πούμε διαφορά να αλλάξεις κάτι. 

Με αυτά τα breakpoints δουλεύω τόσο καιρό και με έχουν βγάλει ασπροπρόσωπο. Είναι πάνω κάτω αυτά που χρησιμοποιεί η κοινότητα βασικά.

max-width: 767px //mobile layout

min-width: 768px  //tablet layout

min-width: 992px //desktop layout / 1024px  σε κάποια frameworks (δεν έχει ιδιαίτερη σημασία)

min-width: 1200px // widescreen desktops / +- 20px σε κάποια frameworks (δεν έχει ιδιαίτερη σημασία)

min-width: 1400px // full hd προαιρετικό

Άποψή μου πάντα.

Επεξ/σία 17 Μαρτίου 2018 από beefmazi

[ajaxmonkey4hire]

Στις 3/16/2018 στις 5:50 ΜΜ, philos είπε

Το θέμα ξέρετε ποιο είναι;

Ότι αν βάλω media query για max-width 320px κι ένα για 640px, κάποιος που μπαίνει με smartphone 360px width, θα βλέπει την 640px εκδοχή, πράγμα που δεν είναι χρηστικό. Οπότε πως το αντιμετωπίζουμε αυτό;

Το λέω με αφορμή ότι εργάζομαι κάνοντας προς το παρόν τις δοκιμές μου με την developer console του Chrome και βλέπω πχ πως θα φαίνεται σε standard 320px αλλά διαπιστώνω ότι υπάρχει και πολλές άλλες ενδιάμεσες αναλύσεις, πχ Lumia 950 (360px), Nexus X5 (412px), iPhone 7 (375px) κτλ.

Οπότε ποια η διαχωριστική γραμμή; Να υποθέτω την ορίζω εγώ κατά το design της σελίδας; Κάτι standard, έστω για τα ενδιάμεσα υπάρχει;

Είναι πράγματι πονοκέφαλος να βρεις το optimum. Και εγώ πειραματίζομαι για την καινούργια μου σίτε χωρίς να έχω καταλήξει σε κάτι το ικανοποιητικό.

Το τελευταίο πείραμα είναι με tiled views για το catalog system.

http://104.236.83.163/tiles.html

[philos]

Λοιπόν, τελικά έκανα το εξής: σύμφωνα με το design της σελίδας, έβαλα δικά μου media queries, ελαφρώς προσεγγίσιμα με τα standards (320 - 640 - 768 και 1024).

 

Δύο θεματάκια έχω:

1. Χρησιμοποίησα το εργαλείο της Google https://search.google.com/test/mobile-friendly

Το βγάζει mobie friendly, όμως μου βγάζει ένα σωρό πόρους ότι δεν κατάφερε το εργαλείο να τους φορτώσει (μεταξύ αυτών και το βασικό CSS file που κάνει responsive τη σελίδα), ενώ στη πραγματικότητα μια χαρά φορτώνουν, είτε αν επισκευθείς το link είτε φυσικά επισκέπτοντας τη σελίδα (αυτό έχει ως αποτέλεσμα και στο preview του εργαλείου να μη φαίνεται καλά η σελίδα). Τι μπορεί να φταίει;

 

2. Κάτι άλλο που παρατήρησα: η σελίδα από πάντα φορτώνει σφαίρα στο desktop, ενώ από κινητά αργεί. Αργεί ακόμα κι αν ρυθμίσω τον Chrome σε responsive mode, ενώ αν περιηγούμαι στο site σε μη responsive mode, πάει γρήγορα. Καμιά ιδέα;

 

 

Επεξ/σία 18 Μαρτίου 2018 από philos

[ajaxmonkey4hire]

Τι μέγεθος έχει το css; Έχεις πολλές φώτο, fonts, scripts;

Πως φορτώνεις την σελίδα στο κινητό; Wifi, Lte, 4g, 3g....;

Τι bandwidth έχεις;

Πήγες στο Pagespeed insights https://developers.google.com/speed/pagespeed/insights/;

σου δίνει κάποιες προτάσεις για optimization;

Επεξ/σία 18 Μαρτίου 2018 από ajaxmonkey4hire

[philos]

Η σελίδα φορτώνει κανονικά σε κινητό με 4G ή Wifi. Απλά στο εργαλείο τεσταρίσματος της Google για mobile friendly, δεν φαίνεται σωστά γιατί πολλούς βασικούς πόρους CSS και JavaScript τους βγάζει ότι δεν φορτώνουν.

 

Έτρεξα το pagespeed insights, thanks!

Λοιπόν, τους πόρους CSS και JavaScript που εμφανίζουν πρόβλημα στο εργαλείο mobile friendly check τους βγάζει και στο pagespeeed insights και προτείνει να τους βελτιώσω, αλλά σαν τι μπορώ να κάνω;

Να πω ότι έβαλα τα διάσπαρτα CSS και JavaScript αρχεία να φορτώνουν μέσω του Minify, αλλά και αυτά μου τα βγάζουν τα εργαλεία της Google ως ότι θέλουν βελτιστοποίηση. Καμιά ιδέα;

Μήπως να πάρω το αποτέλεσμα του minify και να το βάλω σε ένα template της vBulletin σε <script> </script> και <style></style>?

Να πω ότι το σύνολο των javascript files (περιλαμβάνεται και jquery και jquery ui) είναι 680kb (edit: λάθος, τώρα το βλέπω 994kb) ως minified, που το κατέβασα στο PC!

Επεξ/σία 18 Μαρτίου 2018 από philos

[ajaxmonkey4hire]

11 λεπτά πριν, philos είπε

Η σελίδα φορτώνει κανονικά σε κινητό με 4G ή Wifi. Απλά στο εργαλείο τεσταρίσματος της Google για mobile friendly, δεν φαίνεται σωστά γιατί πολλούς βασικούς πόρους CSS και JavaScript τους βγάζει ότι δεν φορτώνουν.

Έτρεξα το pagespeed insights, thanks!

Λοιπόν, τους πόρους CSS και JavaScript που εμφανίζουν πρόβλημα στο εργαλείο mobile friendly check τους βγάζει και στο pagespeeed insights και προτείνει να τους βελτιώσω, αλλά σαν τι μπορώ να κάνω;

Να πω ότι έβαλα τα διάσπαρτα CSS και JavaScript αρχεία να φορτώνουν μέσω του Minify, αλλά και αυτά μου τα βγάζουν τα εργαλεία της Google ως ότι θέλουν βελτιστοποίηση. Καμιά ιδέα;

κανε minify όλα τα css, js (https://www.minifier.org/)

συνδύασε τα css και στον βαθμό που γίνετε και τα js σε ένα αρχείο.

Ενεργοποίησε gunzip delivery στο server σου

Ενεργοποίησε client side caching για css, js, png, jpg

Κανε μια optimization στης φώτο. (http://optimizilla.com/, https://tinypng.com/, ...)

Αν τραβάς fonts (google, awesome...) να τα βάλεις στο τέλος από το body και βάλε sans serif σαν fallback.

 

Επεξ/σία 18 Μαρτίου 2018 από ajaxmonkey4hire