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

Η ίδια η HTML ήταν αρκετά βασική. Δεν φτάσαμε ούτε στα τραπέζια παρά λίγα χρόνια μετά την πρώτη μας πλοήγηση. Όταν κάναμε τελικά, δεν χρειάστηκε πολύς χρόνος οι άνθρωποι να αρχίσουν να σχεδιάζουν μαζί τους. Σίγουρα, είχαν σχεδιαστεί για πινακοποιημένα δεδομένα, αλλά οι κανόνες και τα πρότυπα γίνονται τρομερά σπασμένα, σωστά;

Μερικά χρόνια, τα διαφανή αρχεία .gif και τα PSD αργότερα, η συνήθης ρύθμιση του σχεδιασμού ιστοσελίδων έμοιαζε έτσι:

Ένας σχεδιαστής θα έκανε μια διεπαφή που κοίταξε αρκετά στο Photoshop. Μπορεί να χρησιμοποιηθεί. Από την άλλη πλευρά, ίσως το κείμενο πλοήγησης που αναμειγνύεται με το φόντο είναι πολύ καλό. Το σημαντικό ήταν ότι φαινόταν κάπως τρισδιάστατο με πολλές κλίσεις και σκιές.

Τότε κάποιος (ίσως ο σχεδιαστής, ίσως και ο φίλος του κωδικοποιητή) θα περικόψει αυτή τη βασική διασύνδεση, θα ξανακτιστεί όλα με τραπέζια και θα σιγουρευτεί ότι λειτούργησε τουλάχιστον στο IE6.

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

Με την πάροδο του χρόνου, άλλαξαμε από πίνακες σε CSS. Στη συνέχεια, πολλοί από εμάς άλλαξαμε από το κοροϊδεύοντας τα πάντα στο Photoshop για να σχεδιάσουμε ξανά στο πρόγραμμα περιήγησης. Ο κύκλος ήταν κλειστός. Το παλιό ήταν και πάλι καινούργιο. Ο IE6 μεταφέρθηκε στις πυρκαγιές του Mount Doom.

Καλές στιγμές.

Τα άλλα εργαλεία σχεδιασμού

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

Ήμουν παιδί. Δεν ήξερα τίποτα καλύτερο. Δεν ήξερα πώς λειτουργούσαν το HTML και το CSS. Επίσης, δεν ήξερα ότι:

Οτιδήποτε μπορεί να κάνει μια εφαρμογή σχεδιασμού ιστοσελίδων, ο κώδικας μπορεί να κάνει καλύτερα

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

Αυτές οι εφαρμογές έγραψαν τρομερό κώδικα

Δεν είναι μόνο ότι μπορείτε να κάνετε καλύτερες ιστοσελίδες μαθαίνοντας να γράφετε HTML και CSS. Αυτά τα παλιά προγράμματα, το FrontPage, το Dreamweaver, όλα αυτά, ήταν γνωστά για τη συγγραφή ιδιαίτερα τρομερό κώδικα. Ήταν φουσκωμένο, αργό, σχεδόν αδύνατο να έχει νόημα όταν μεταβείτε σε ένα πρόγραμμα επεξεργασίας κειμένου.

Ήταν δύσκολο

Ακόμη και η έκπτωση της υποκείμενης σήμανσης και styling, το λογισμικό ήταν τρομερό για χρήση, ειδικά αν δεν ξέρετε πώς λειτουργούν το HTML και το CSS. Ξέρετε πώς στις παλιές εκδόσεις του Word, τοποθετώντας άσχημα μια εικόνα στο έγγραφό σας, θα μπορούσε να βλάψει την τοποθέτηση όλων των άλλων στοιχείων;

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

Αλλά τότε βελτιώθηκαν

Όταν υπάρχουν εφαρμογές Μακώ , Webflow , Webydo , και άλλοι βγήκαν πρώτοι, ήμουν πολύ, πολύ επιφυλακτικός. Και γιατί δεν θα ήμουν; Ήμουν κάηκε πριν. Εκτός αυτού, είχα μόλις απομακρυνθεί από τη χρήση του Photoshop για όλα, και έμαθα πολλά σχεδιάζοντας στο πρόγραμμα περιήγησης.

Αλλά πρόσφατα, είχα λόγο να εξετάσω πιο προσεκτικά αυτές τις νέες εφαρμογές και να εξετάσω τις τοποθεσίες που έγιναν μαζί τους. Ενάντια σε όλες τις επιφυλάξεις μου, αλλάζω το μυαλό μου.

Ο κώδικας πήρε πολύ καλύτερα

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

Δεν είναι απόλυτα βελτιστοποιημένος κώδικας. Αλλά τότε, δεν χρειάζεται να είναι. Κανείς δεν πρόκειται να κατασκευάσει τη νέα Wikipedia με Macaw ή Webydo. Η αγορά για αυτές τις εφαρμογές αποτελείται από μικρές έως μεσαίες επιχειρήσεις που χρειάζονται απλώς έναν αξιοπρεπή ιστότοπο προώθησης.

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

Φέρνουν τον καμβά πίσω

Παίρνω έμπνευση από μια ποικιλία θέσεων, αλλά ένας καθαρός, κενός καμβάς είναι ένας από τους καλύτερους. Είναι τόσο φορτωμένο με δυνατότητες, με πιθανές λύσεις. Καθίζω, κοιτάζω και μετά αρχίζω να κάνω κλικ.

Ή τουλάχιστον, έτσι έκανα τα πράγματα ξανά όταν χλευάζω τα πάντα στο Photoshop. Ο σχεδιασμός ενός ιστότοπου με κώδικα καθιστά λίγο πιο δύσκολο να επαναληφθεί γρήγορα. Έχω μερικές φορές έναν δύσκολο χρόνο αφήνοντας να πάει κάτι που έβαλα μόλις μισή ώρα του CSS.

Η επανάληψη του Drag 'n' drop είναι απλώς ταχύτερη.

Είναι καλό για αρχάριους

Το Frontpage ξεκίνησε την καριέρα μου. Δεν θα είχα ξεκινήσει ποτέ στο σχεδιασμό ιστοσελίδων αν δεν είχα ένα (συγκριτικά) εύκολο GUI για να με ξεκινήσω. Θέλω να πω σίγουρα, για να αξιοποιήσετε στο έπακρο κάτι όπως το Webflow, πρέπει να γνωρίζετε ακόμα τα βασικά στοιχεία του HTML και του CSS, αλλά κάνουν ένα εξαιρετικό μέρος για να ξεκινήσετε να μαθαίνετε αυτά τα πράγματα.

Και αυτή η βιομηχανία χρειάζεται κάτι τέτοιο για την επόμενη γενιά αρχαρίων.

συμπέρασμα

Από πολλές απόψεις, είναι η ηλικία του δημιουργού της οπτικής τοποθεσίας. Newbies ειλικρινά δεν θέλουν να μάθουν Git, Gulp, NodeJS, ή ακόμα και να ανοίξει ένα τερματικό, πραγματικά. Θέλουν να βάλουν ένα μήνυμα στην ιστοσελίδα τους και να γίνουν με αυτό. Επιπλέον, λιγότεροι πελάτες βλέπουν το σημείο να πληρώνουν χίλια δολάρια ή περισσότερα για έναν απλό ιστότοπο προώθησης.

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

Και αυτό είναι εντάξει από μένα.

Προτεινόμενη εικόνα, εργαλείο σχεδιασμού ιστοσελίδων μέσω Shutterstock.