Σε αυτό το άρθρο μιλάμε για κάποια web design tip που μπορούμε να ακολουθούμε ώστε τα designs μας να είναι πιο καλά και φιλικά για τον χρήστη. Επίσης γίνεται αναφορά στο λεγόμενο «χρυσό κανόνα» του web design.

Σίγουρα η παραπάνω ερώτηση ακούγεται λίγο ρητορική αλλά, αλήθεια , έχετε αναρωτηθεί ποτέ τι είναι αυτό που διαχωρίζει τους καλούς designers από τους κακούς; Σίγουρα είναι πολλοί παράγοντες που το καθορίζουν αυτό και σίγουρα υπάρχει και η υποκειμενικότητα του ανθρώπου που επισκέπτεται την ιστοσελίδα όπως και η υποκειμενικότητα αυτού που δημιουργεί την ιστοσελίδα ακολουθώντας ή όχι κάποιο web design tip. Σε κάποιους αρέσει , σε άλλους όχι .

Υπάρχουν όμως και designs που είναι αντικειμενικά άσχημα ή κάποια άλλα που είναι αντικειμενικά όμορφα. Ακολουθήστε τους παρακάτω δύο συνδέσμους και σκεφτείτε ποια/ποιες είναι οι βασικές διαφορές στο design των σελίδων αυτών ώστε η στη μία να θεωρείται το design άσχημο και στη άλλη όμορφο.

Παρατηρείτε ότι στην πρώτη ιστοσελίδα το μάτι απλά ..χάνεται. Έντονα χρώματα και άτακτα -«πεταμένα» τα web elements πάνω στην οθόνη και μία essance από flash και αυτό ήταν. Καταστροφικό αποτέλεσμα σε θέμα design και σε χρηστικότητα. Είναι αδύνατον να καταλάβουμε τι πρέπει να πατήσουμε ώστε να χρησιμοποιήσουμε την ιστοσελίδα σωστά.

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

Μία απάντηση λοιπόν στην ερώτηση παραπάνω θα μπορούσε να είναι ότι «τέλειο» web design δεν υπάρχει αλλά το αποτελεσματικό web design είναι καθαρό-απλό και εύληπτο. Μπορεί κάποιος δηλαδή με το που το δει να καταλάβει πώς μπορεί να περιηγηθεί μέσα στην ιστοσελίδα καθώς και το πώς μπορεί να χρησιμοποιήσει την ιστοσελίδα αυτή.

Ο παραπάνω αναφερόμενος «χρυσός κανόνας του web design» είναι ουσιαστικά η γνωστή σε όλους μας «χρυσή τομή» που προέρχεται από τον Πυθαγόρα και συμβολίζεται με το «φ» προς τιμήν του γλύπτη Φειδία. Γιατί όμως κάνουμε αυτού του είδους την αναφορά εδώ;Τι δουλειά έχουν τα μαθηματικά με το web design; Όσο απίστευτο και αν φαίνεται ,ειδικά σε ένα αρχάριο, τα μαθηματικά με το web design έχουν μεγάλη σχέση.

Αυτό γιατί όλα τα web στοιχεία υπολογίζονται όχι μόνο από τις διαστάσεις τους αλλά και από τις αποστάσεις μεταξύ τους με μονάδα μέτρησης τα pixels, τα ems κλπ .Η εφαρμογή του παραπάνω χρυσού κανόνα στο web design μπορεί να αλλάξει πάρα πολύ όχι μόνο την εμφάνιση της ιστοσελίδας σας αλλά και την ευκολία στην κατανόηση και έλεγχο της από τους επισκέπτες της. Ας δούμε τι είναι ο χρυσός κανόνας στην πράξη.

Ο χρυσός  κανόνας είναι το νούμερο 1,618 . Πώς χρησιμοποιείται αυτό; Έστω ότι η ιστοσελίδα μας έχει πλάτος 900px. Σύμφωνα με το golden ration το πλάτος του περιεχομένου-πορτοκαλί- θα είναι 900/1,618 = 556px. Εάν η ιστοσελίδα έχει sidebar αυτή θα έχει πλάτος 900-556 = 344px. 

Έτσι ουσιαστικά λειτουργεί ο χρυσός κανόνας στο web design. Παρατηρείστε το εξής : 344px*1,618  = 556px! Αυτό σημαίνει ότι και η sidebar σε σχέση με το περιεχόμενο είναι σε αναλογία 556/1,618.

Βέβαια υπάρχουν και περιπτώσεις όπου ένα design είναι απόλυτα εύληπτο και χρηστικό χωρίς να ακολουθείται ο παραπάνω κανόνας κατά γράμμα.Απλά καλό είναι να τον ακολουθούμε γιατί είναι σημαντικό, να υπάρχει η σωστή αναλογία στο πλάτος των web elements από τα οποία δημιουργείται μία ιστοσελίδα.

Αφού είδαμε και τον χρυσό κανόνα ας δούμε μερικά web design tips για καλύτερο design και περισσότερους επισκέπτες!

Ένα από τα πιο σημαντικά πράγματα σε μία ιστοσελίδα είναι η  ευκολία με την οποία ο χρήστης μετακινείται μέσα σε αυτή. Η πλοήγηση του χρήστη σε μια ιστοσελίδα γίνεται με την βοήθεια ενός navigation menu. Ο designer πρέπει αν σχεδιάσει το navigation menu με τέτοιο τρόπο ώστε ο χρήστης με το που βλέπει την ιστοσελίδα να ξέρει ποιο είναι το επόμενο βήμα του. Σελίδες με μενού πλοήγησης τα οποία είναι περίπλοκα ή και ανύπαρκτα συνήθως δεν έχουν μεγάλο αριθμό επισκεπτών και ειδικότερα επισκεπτών που επιστρέφουν σε αυτές. Ένα navigation menu πρέπει :

    Βρίσκεται στο ίδιο σημείο σε κάθε σελίδα του website.
    Να έχει την ίδια εμφάνιση και σειρά των links σε όλες τις σελίδες του website.
    Να είναι οργανωμένα τα Links(σε περίπτωση που υπάρχουν υπομενού).
    Να είναι εύκολο να διαβαστεί και τα links να είναι γραμμένα κατανοητά.

Το παραπάνω web design tip είναι πραγματικά κρίσιμο για την επιτυχία η όχι μίας ιστοσελίδας. Οι γραμματοσειρές που χρησιμοποιούμε είναι ο καθρέπτης της ιστοσελίδας μας. Σκεφτείτε μία ιστοσελίδα με εκπληκτικό περιεχόμενο και πολύ άσχημη και δυσανάγνωστη γραμματοσειρά.. Είναι πρακτικά αδύνατο να έχει επιτυχία γιατί δεν είναι φιλική προς τον χρήστη.

 Οι χρήστες, μην ξεχνάτε ποτέ, θέλουν να διαβάζουν εύκολα ,χωρίς να κουράζονται. Αποφύγετε την χρήση μίας γραμματοσειράς που δεν διαβάζεται εύκολα μόνο και μόνο επειδή είναι ..ξεχωριστή. Παρακάτω δίνονται πηγές online για γραμματοσειρές. Μπορείτε να τις χρησιμοποιήσετε στην ιστοσελίδα σας και να ξεχωρίσετε!(Προσοχή στις άδειες-δεν είναι όλες οι γραμματοσειρές δωρεάν για κάθε είδους χρήση!)

-Myfonts web font directory- free fonts for websites.
-Google web fonts directory
-Χρησιμoποιήστε το font squirrel για να εφαρμόσετε το web design tip 2

Οι παραπάνω 3 πηγές είναι υπέρ αρκετές να βρείτε το font που σας αρέσει και θα κάνει την ιστοσελίδα σας να ξεχωρίζει. Σύντομα θα κάνουμε ένα tutorial για το πώς χρησιμοποιούμε τέτοιες γραμματοσειρές στα web project μας.

Μπορεί να σας αρέσουν τα φλούο χρώματα , τα πολύ έντονα και αρκετά ξεχωριστά αλλά όταν πλέον φτάνουμε στο web design καλό θα είναι να ακολουθήσουμε το web design tip και να δημιουργήσουμε το website που θέλουμε χρησιμοποιώντας χρώματα που δένουν μεταξύ τους. Να υπάρχουν αντιθέσεις  ,για παράδειγμα άσπρο background με μαύρα γράμματα . Να φροντίζουμε το background είτε είναι απλό χρώμα , είτε φωτογραφία, είτε pattern να είναι απαλά στο μάτι, να μην προκαλούν απόσπαση προσοχής.

Είμαστε σε μία εποχή όπου εκτός από τα pc και τα laptops υπάρχουν αναρίθμητοι χρήστες ιστοσελίδων που διαβάζουν και επισκέπτονται αυτές από το αγαπημένο τους κινητό ή tablet. Είναι επιτακτική ανάγκη λοιπόν να σχεδιάσετε την ιστοσελίδα με τέτοιο τρόπο ώστε να ικανοποιούνται όλοι οι χρήστες των συσκευών αυτών. Επίσης πολλές μελέτες και στατιστικές δείχνουν ότι πολλοί χρήστες πλέον χρησιμοποιούν οθόνες με ανάλυση παραπάνω από 800*600 που κάποτε ήταν standard. Αυτό που κάνει ένας web designer είναι ότι δημιουργεί την ιστοσελίδα του βασισμένη για παράδειγμα σε μία ανάλυση, την μικρότερη ας πούμε για pc την 800*600 και εν συνεχεία, δημιουργεί τις άλλες εκδόσεις του site σε αναλύσεις μεγαλύτερες από αυτή.

Όταν σχεδιάζουμε μια ιστοσελίδα, για παράδειγμα για διάφορες αναλύσεις, δουλεύουμε όχι με pixels η ems αλλά με ποσοστά!!! Αυτό το κάνουμε διότι αν σχεδιάσουμε τη βασική ανάλυση (800*600) και το περιεχόμενο είναι πχ 560px πλάτος ,σε μία μεγαλύτερη ανάλυση θα φαίνεται άσχημο. Αντιθέτως αν το περιεχόμενο είναι το 70% του container(δηλαδή του στοιχείου που το περιέχει στην ιστοσελίδα) τότε αυτόματα σε κάθε ανάλυση θα φαίνεται όμορφο.

Σημαντικό επίσης είναι να σκεφτόμαστε μήπως χρησιμοποιήσουμε μία liquid layout , η οποία θα αλλάζει ανάλογα με τις αναλύσεις. Θα δημιουργήσουμε πολύ σύντομα ένα tutorial για το πως μπορούμε να δημιουργήσουμε μία liquid layout.

Αυτό το web design tip είναι πολύ σημαντικό. Κακά τα ψέμματα, κανείς browser από από αυτούς που υπάρχουν δεν είναι τέλειος. Υπάρχουν διαφορές στον τρόπο που διαβάζουν τα css και πώς τα εμφανίζουν και έχει τύχει πολλές φορές να  δημιουργούμε μία ιστοσελίδα και ενώ δείχνει υπέροχη στον mozilla και στον chrome , «σπάει» η δομή της στον internet explorer. Είναι πολύ σημαντικό πριν μία σελίδα δημοσιευτεί online να τεστάρετε στους πλέον γνωστούς browsers , να βρίσκουμε τα λάθη και να τα διορθώνουμε.
Εργαλεία για browser compatibility check:

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

    http://browsershots.org/
    https://browserlab.adobe.com/en-us/index.html
    http://www.browsera.com/
    http://crossbrowsertesting.com/
    http://www.my-debugbar.com/wiki/IETester/HomePage

Το web design tip αυτό το αφήσαμε στο τέλος διότι, πολύ απλά είναι το σημαντικότερο.Προσοχή στο περιεχόμενο! Η ιστοσελίδα πρέπει να είναι γραμμένη με τον πλέον κατανοητό τρόπο. Ο χρήστης πρέπει να καταλαβαίνει 100% τι θέλει να πει ο ιδιοκτήτης της σελίδας. Πολύ σημαντική επίσης είναι η ορθογραφία.Ανορθόγραφες ιστοσελίδες χάνουν κόσμο δεν κερδίζουν. Επίσης το περιεχόμενο κάθε σελίδας που περιέχεται στην ιστοσελίδα μας πρέπει να είναι σχετικό με την σελίδα, όχι άσχετο. Δεν χρειάζεται να γίνεται υπερ- άναλυση-εκτός αν το προστάζουν οι συνθήκες.