Πώς να ακολουθήσετε τη σωστή προσέγγιση στο Responsive Web Design

Έκανα μια δημοσκόπηση στο Twitter πριν από λίγο, και τα αποτελέσματα με εξέπληξαν.

Όχι μόνο περίμενα τα αποτελέσματα να είναι το αντίστροφο, σκέφτηκα ότι το πρώτο-κινητό θα έλαβε τουλάχιστον το 80% των ψήφων .

Η δημοσκόπηση στο Twitter δείχνει ότι το 61,5% των ανθρώπων γράφουν πρώτα στην επιφάνεια εργασίας, με 2.212 ψήφους

Στις απαντήσεις, ορισμένοι εξήγησαν γιατί γράφουν πρώτα στην επιφάνεια εργασίας. Τα γενικά θέματα αυτών των λόγων:

  • Αυτό είναι όλο που παρέχεται ο σχεδιαστής
  • Έτσι λειτούργησε η ομάδα τους
  • Έμαθαν το CSS να γράφει μόνο Desktop, οπότε αυτό έμοιαζε με τη φυσική εξέλιξη
  • Οι πελάτες θέλουν να δουν την έκδοση για υπολογιστές

Τι είναι πρώτα για κινητά

Το Mobile-first είναι όταν ξεκινάμε γράφοντας το CSS για κινητές συσκευές και μετά χρησιμοποιούμε ερωτήματα πολυμέσων για να προσθέσουμε στυλ για μεγαλύτερα μεγέθη οθόνης .

Σε γενικές γραμμές, αυτό σημαίνει ότι τα ερωτήματα πολυμέσων χρησιμοποιούν ένα min-width. Χρησιμοποιούμε ερωτήματα πολυμέσων για να προσθέσουμε ή να αντικαταστήσουμε στυλ για ένα καθορισμένο σημείο διακοπής και μεγαλύτερο, όπως αυτό το παράδειγμα:

.sales-points { padding: 3em 0; } @media (min-width: 600px) { .sales-points { display: flex; justify-content: space-between; } }

Σε αυτό το παράδειγμα, για μικρές οθόνες απλώς εφαρμόζουμε κάποια επένδυση. Υποθέτοντας ότι αυτή η ενότητα του ιστότοπου έχει παιδιά σε αυτήν, μετατρέπουμε αυτά τα παιδιά σε στήλες με ελάχιστο πλάτος 600px.

Έτσι, όταν η θύρα προβολής είναι 600pxή μεγαλύτερη, θα έχουμε στήλες. Ο υπόλοιπος χρόνος, τα πράγματα στοιβάζονται.

Όπως πιθανότατα μαντέψατε, μια πρώτη προσέγγιση στην επιφάνεια εργασίας είναι το αντίθετο . Το CSS μας είναι γραμμένο για μεγάλες οθόνες και στη συνέχεια χρησιμοποιούμε ερωτήματα πολυμέσων για να κάνουμε αλλαγές σε μικρότερα μεγέθη, γενικά χρησιμοποιώντας max-widthερωτήματα πολυμέσων.

Γιατί είναι πιο εύκολο για κινητά

Οι ιστότοποι αποκρίνονται φυσικά πριν καν γράψουμε μια μόνο γραμμή CSS .

Εάν καταργήσετε το CSS από οποιαδήποτε σελίδα στο Διαδίκτυο, ακόμη και σε κάποιον ιστότοπο που δημιουργήθηκε για ένα πολύ συγκεκριμένο μέγεθος οθόνης το 2001, έχετε πλέον έναν ανταποκριτικό ιστότοπο φιλικό προς κινητά!

Τα στυλ της επιφάνειας εργασίας τείνουν να είναι πιο περίπλοκα

Όταν δημιουργούμε στυλ για πρώτη φορά στην επιφάνεια εργασίας, προσθέτουμε πλάτη, στήλες και μετακινούμαστε. Προσθέτουμε την πολυπλοκότητα. Αυτό το κάνουμε για καλό λόγο, καθώς έχουμε περισσότερα ακίνητα για να συνεργαστούμε.

Όχι μόνο θέλουμε να το εκμεταλλευτούμε για να κάνουμε τα πράγματα να φαίνονται πιο ενδιαφέροντα, αλλά αν δεν κάνουμε τα πράγματα πιο περίπλοκα σε μεγαλύτερες οθόνες, τα πράγματα δεν θα φαίνονται πολύ καλά . Ακόμα κι αν έχετε έναν πολύ απλό ιστότοπο, δεν θέλετε να έχει κείμενο που εκτείνεται από τη μία πλευρά στην άλλη.

Κοιτάξτε πώς θα ήταν ένα άρθρο εδώ στο FCC News εάν το κείμενο πήγε από τη μία πλευρά στην άλλη.

Μπορούμε όλοι να συμφωνήσουμε ότι δεν θα διαβάσατε ποτέ κάτι τέτοιο, ναι; Πρέπει κυριολεκτικά να μετακινήσω το κεφάλι μου λίγο από αριστερά προς τα δεξιά για να διαβάσω μια πλήρη γραμμή στην οθόνη μου. Είναι τρομερό.

Οι διατάξεις για κινητά τείνουν να είναι πολύ απλές, καθιστώντας πολύ εύκολο να ξεκινήσετε από εκεί

Για όλα τα άτομα που μου απάντησαν λέγοντας ότι οι πελάτες τους προτιμούσαν να δουν την έκδοση για επιτραπέζιο υπολογιστή ή ότι τους δόθηκαν μόνο υπολογιστές από τους σχεδιαστές τους, θα έλεγα ότι είναι ακόμα πιο εύκολο να ξεκινήσετε πρώτα για κινητά.

Για πολλούς ιστότοπους, αφού ρυθμίσετε την τυπογραφία σας, είστε το 70% του τρόπου σας εκεί. Πράγματα όπως:

  • font-family
  • font-size
  • font-weight
  • margin (στα στοιχεία κειμένου σας)

Στη συνέχεια, μπορείτε να κάνετε πολύ βασικό στυλ διάταξης στα στοιχεία διάταξής σας, όπως:

  • padding
  • background-color
  • color
  • και ίσως κάποιες τροποποιήσεις με margin

Σε αυτό το στάδιο, τα πράγματα θα φαίνονται αρκετά καλά από την άποψη της διάταξης σε μικρές οθόνες . Αυτό σημαίνει ότι, χωρίς να γράψετε ένα ερώτημα πολυμέσων, έχετε έναν πλήρως λειτουργικό ιστότοπο σε κινητό.

Εάν αισθανόσασταν ιδιαίτερα τεμπέληδες ή είχατε έναν πολύ απλό ιστότοπο, θα μπορούσατε να κολλήσετε max-widthστο κοντέινερ σας και να τελειώσετε με το όλο πράγμα και να μην χρειάζεται καν να ανησυχείτε για ένα ερώτημα πολυμέσων!

Τις περισσότερες φορές, θέλουμε να ανεβάσουμε το παιχνίδι σε μεγαλύτερα μεγέθη οθόνης, και γι 'αυτό νιώθω ότι το κινητό είναι το πρώτο βήμα. Είναι η φυσική πρόοδος προς τα πάνω.

Σύγκριση πρώτα για κινητά με πρώτα για επιτραπέζιο υπολογιστή

Ακολουθεί ένα CodePen που έχει μια πολύ απλή διάταξη που συνδυάζεται χρησιμοποιώντας μια πρώτη-επιφάνεια εργασίας και μια προσέγγιση για κινητά.

Εάν ανοίξετε την πένα και παίζετε με το μέγεθος της θύρας προβολής, θα δείτε ότι το τελικό αποτέλεσμα είναι ακριβώς το ίδιο.

Αν όμως το τελικό αποτέλεσμα που χρησιμοποιεί οποιαδήποτε προσέγγιση είναι ακριβώς το ίδιο, γιατί έχει σημασία ποια προσέγγιση ακολουθείτε;

Η πρώτη επιφάνεια εργασίας μπορεί να οδηγήσει σε περιττό κώδικα

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

/* desktop-first */ .desktop-first .sales-points { display: flex; justify-content: space-between; } .desktop-first .sales-point { width: 30%; } @media (max-width: 600px) { .desktop-first .sales-points { display: block; } .desktop-first .sales-point { width: 100%; } }

Όπως μπορείτε να δείτε στο CodePen, λειτουργεί πολύ καλά, αλλά υπάρχει μια δέσμη κώδικα εδώ που είναι περιττή όταν χρησιμοποιούμε μια προσέγγιση για πρώτη φορά στην επιφάνεια εργασίας.

Παρατηρήστε πώς δηλώνουμε πρώτα ένα display: flexμόνο για να το επαναφέρετε στην προεπιλογή display: blockστο ερώτημα πολυμέσων. Επίσης, για τις στήλες μας, αλλάζουμε widthκαι, για άλλη μια φορά, επιστρέφουμε στην προεπιλογή αργότερα.

Η προσέγγιση για κινητά έχει πολύ λιγότερο περιττό κώδικα. Επειδή δεν υπήρχε στυλ του χρώματος του κειμένου ή του φόντου, δεν υπάρχει στυλ εκτός από αυτό που χρειάζομαι στα ερωτήματα πολυμέσων μου!

/* mobile-first */ @media (min-width: 600px) { .mobile-first .sales-points { display: flex; justify-content: space-between; } .mobile-first .sales-point { width: 30%; } }

Η επιστροφή στις προεπιλογές πρέπει να είναι κόκκινη σημαία

Συνειδητοποιώ ότι ορισμένα πράγματα είναι πιο περίπλοκα από αυτό (και θα φτάσουμε εκεί σύντομα), αλλά το μεγαλύτερο μέρος αυτού που ανησυχώ εδώ είναι από την άποψη της διάταξης.

For the layout I created above, I didn't write one line of code for the mobile-first approach. I just relied on how the document was flowing from the start. In the desktop-first approach, I have to tackle both because I need to reset things back to their default state.

The fact that I'm resetting things like display and width to their default state, to me, is a red flag. It means I'm writing something that could have been avoided. That means I'm wasting my time.

Some things aren't so simple

Some components look completely different at different screen sizes, such as navigation menus. Other times, you have styles on mobile that need to be overwritten for desktop that end up being redundant.

In the below video, I run into that exact issue where I needed to move an element using position: absolute for smaller screens. Rather than have to position it, then reset the position back to the default at larger screen sizes, it seemed like a logical choice for a max-width media query.

If you hit play on the video, it should start right where I tackle this issue if you'd like to see it in action (17:41 just in case it doesn't start at the right spot).

So sometimes there are exceptions, and there is nothing wrong with that. My point here isn't that we should be robots who do things one way. There are times when different approaches make sense, but I do like to believe having a general rule of thumb helps.

So next time you are designing a site, even if you only have a desktop mock-up to go by, try starting mobile first. It doesn't take any more work at all, and in the long run I bet it'll save you a ton of redundant code. It's pretty simple too!

  1. Start with the typography
  2. Add in colors and padding
  3. Put anything layout related into a min-width media query

When you're done with your layout, not only will you have knocked out that desktop version that your client is dying to see, but you'll be 90% of the way there in your mobile one as well, without having even really thought about it.

Do you struggle with making things responsive?

Making websites responsive is a topic that a lot of people tell me they struggle with. To help, I've created a free course called Conquering Responsive Layouts. It's put together as a 21-day challenge in which we'll cover a topic a week, with each one adding onto what we already learned.

I realize that we're all busy with kids, family, work, and more, so each day will only be 10-30 minutes worth of lessons, with 2-3 lessons a week. In between you'll have small challenges to complete, working your way up to being comfortable making responsive layouts.

The course is launching on the 13th of April and because it's a 21-day course, the doors close on that day. Click here to sign up to start conquering responsive layouts!

Εάν το διαβάζετε μετά το γεγονός, μπορείτε να πάτε και να εγγραφείτε για την επόμενη φορά που θα ξεκινήσει, αλλά δεν θα ανοίξει ξανά για μερικούς μήνες.