Ποιο είναι το βέλτιστο πλάτος ιστοσελίδας;

Designing a web site and setting the web page width to an optimal width is a conversation worth having. Many of you noticed that I recently changed the width of my blog's design. I pushed the page width out to 1048 pixels. Some of you may disagree with the move – but I wanted to share some stats and reasons on why I pushed the theme width so wide.

Ωστόσο, τα 1048 pixel δεν ήταν τυχαίος αριθμός.

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

  • Αλλαγή πλάτους YoutubeYoutube offers larger embed sizes now. If you click the small gear on the sidebar of the Youtube video page, you're offered options for larger sizes as well as the theme. Since higher definition videos are becoming common place on Youtube, I wanted to incorporate those videos into my blog and display them with as much detail as I could (without consuming the entire page width).
  • Η τυπική διαφήμιση έχει πλάτος 125, 250 και 300 pixel. 300 pixel φαίνεται να εμφανίζονται όλο και περισσότερο στους ιστότοπους εσόδων από διαφημίσεις και ήθελα να τα ενσωματώσω τακτοποιημένα στην πλαϊνή γραμμή μου.

And of course, there's some padding to the left and right of the page, the content, and the sidebar… so the magic number was 1048 pixels for my theme:

Βέλτιστο πλάτος τοποθεσίας Web

Έλεγξα τα στατιστικά στοιχεία του αναγνώστη μου;

Ναι φυσικά! Εάν η πλειονότητα των επισκεπτών μου έτρεχε οθόνες χαμηλότερης ανάλυσης, σίγουρα θα είχα δεύτερη σκέψη σχετικά με την επέκταση της σελίδας μου. Πλάτος και ΠοσοστόAfter outputting the screen resolutions from my Analytics package (In Google it's Visitors > Browser Capabilities > Screen Resolutions), I built an Excel spreadsheet of the results and parsed out the width from the resolution field.

Η Google παρέχει ανάλυση ως 1600 × 1200, οπότε πρέπει να πάρετε τα πάντα από τα αριστερά του "x", πολλαπλασιάστε το με 1 για να το κάνετε ένα αριθμητικό αποτέλεσμα, ώστε να μπορείτε να ταξινομήσετε φθίνουσα, μετά να κάνετε SUMIF και να δείτε πόσες επισκέψεις είναι μεγαλύτερο ή μικρότερο από το πλάτος σχεδίασης που βλέπετε.

= ΑΡΙΣΤΕΡΑ (A2, FIND ("x", A2,1) -1) * 1

Did I abandon the 22% of readers who are running a smaller resolution? Of course not! The nice thing about a layout with your content left and your sidebar right is that you can ensure that your content is still within the width of the majority of browsers. In this case, 99% of my readers are running greater than 640 pixels wide, so I'm good! I don't want them to totally miss the sidebar, but that's secondary to the content.

9 Σχόλια

  1. 1

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

    • 2

      Μου αρέσουν πολύ οι υβριδικές διατάξεις, ο Μπομπ - αλλά δυστυχώς δεν παίζουν καλά μερικές φορές με το πραγματικό περιεχόμενο. Ίσως είμαι τεμπέλης, αλλά είναι πιο εύκολο για μένα να γνωρίζω ότι το μέγιστο και το ελάχιστο είναι 640 εικονοστοιχεία στον ιστότοπό μου. Το τέντωμα είναι δύσκολο να συλληφθεί όταν γράφω τις δημοσιεύσεις.

      Απλώς μια προσωπική προτίμηση υποθέτω!

  2. 3

    Ουσιαστικά, συμφωνώ με το συμπέρασμά σας, αλλά εάν χρησιμοποιώ ρύθμιση σταθερού πλάτους, περιορίζω το πλάτος στα 960 εικονοστοιχεία.

    Κάποιος πρέπει να λαμβάνει υπόψη κάθετες γραμμές κύλισης και άλλες γραμμές συντόμευσης του προγράμματος περιήγησης που καταλαμβάνουν επιπλέον πλάτος. Διατηρώντας εντός 960 pixel, είναι βέβαιο ότι δεν υπάρχει κύλιση από αριστερά προς τα δεξιά σε ανάλυση οθόνης πλάτους 1024 pixel.

    Άντι Έμπον

  3. 4
  4. 5

    πολύ παράξενο. Στο Firefox, ο ιστότοπός σας έχει μια γραμμή κύλισης οριζόντια στα 1048 και δεν έχει καθαρή εμφάνιση μέχρι να φτάσετε στο 1090.

    Σας ευχαριστούμε για τα υπέροχα στατιστικά στοιχεία από τις αναλύσεις της Google

  5. 6

    Δεδομένου ότι έχετε το δικό σας σε 1048px, ο ιστότοπός σας προκαλεί οριζόντιες γραμμές κύλισης σε μια οθόνη 1024. Νομίζω ότι θα ήταν καλύτερο να αφαιρέσετε 100px από το πλάτος (και την επένδυση) της πλαϊνής γραμμής και της περιοχής περιεχομένου σας, ώστε να ταιριάζει σε 728 × 1024. Αυτή είναι η καλύτερη πρακτική σήμερα.

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

  6. 7
  7. 8

    Ανόητο
    Δεν χρησιμοποιούν όλοι τα παράθυρα σε πλήρη οθόνη - στην πραγματικότητα, θα στοιχηματίσω ότι λίγοι το κάνουν. 

    Έχω το ιστολόγιό σας σε 80% windo… και αυτό είναι, μια οριζόντια γραμμή κύλισης

    Και τι είναι εκτός οθόνης ... ας δούμε ... τίποτα.

    Έτσι, η γραμμή κύλισης είναι άσκοπη.

    Ένας εύκολος τρόπος για να χάσετε αναγνώστες !!

    • 9

      Το περιεχόμενο βρίσκεται στο κέντρο της σελίδας @ heenan73: disqus, παρέχοντας στον αναγνώστη ακριβώς αυτό που χρειάζονται. Εάν χάνω αναγνώστες επειδή μπορούν και οι δύο να δουν το περιεχόμενο ΚΑΙ να βλέπουν μια οριζόντια γραμμή κύλισης ... δεν είμαι σίγουρος ότι ήταν οι αναγνώστες που ψάχνω. Υπάρχει σίγουρα κάτι μοναδικό στο περιεχόμενό μας που το ωθεί στα 1217 εικονοστοιχεία, οπότε πρόκειται να το εντοπίσω και να το διορθώσω. Αυτή η ανάρτηση γράφτηκε στην πραγματικότητα για ένα προηγούμενο θέμα. Ευχαριστώ που το γνωρίσατε!

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.