Front-end Web Developer

I am a Mid Front-end Web Developer and IT Trainer

Landing page

Categories
Δεξιότητες HTML, CSS
Εργαλείο Ανάπτυξης Sublime

Ανάπτυξη ενός απλού Landing page

Τι είναι Landing Page

Landing PageΟ όρος  Landing Page χρησιμοποιείται στο marketing για να δηλώσει μια ιστοσελίδα την οποία ο επισκέπτης του site μας βλέπει ως πρώτη σελίδα. Ποιο συγκεκριμένα, πρόκειται για μια ιστοσελίδα η οποία είναι έτσι φτιαγμένη ώστε να κεντρίσει το ενδιαφέρον του επισκέπτη. Σε αυτή την σελίδα ο επισκέπτης φτάνει μέσω των αποτελεσμάτων της αναζήτησης του στο internet. Σε αυτά, θα του κεντρίσει το ενδιαφέρον η σελίδα του site μας και θα κάνει το κλικ ώστε να την δει.  Ο σκοπός της δεν είναι απαραίτητα η πώληση. Μπορεί να είναι η ενημέρωση, ή κάποια προσφορά.

 

Πως αναπτύχθηκε

Η ιστοσελίδα αυτή κατασκευάστηκε με tableless design, δηλαδή χωρίς την χρήση του παλαιού τύπου σχεδιασμού με πίνακες. Αντί αυτού, χρησιμοποιήθηκαν div html tags. Η έμπνευση για την σελίδα αυτή ήρθε από ένα webinar το οποίο πραγματοποίησα πριν λίγο καιρό.

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

Η κεφαλίδα έχει μια εικόνα αχνή ως παρασκήνιο. Πάνω σε αυτή εμφανίζονται τίτλοι κεφαλίδων και απλού κειμένου. Το κυρίως σώμα αποτελείται από δύο κουτιά. Το αριστερό αναφέρει κάποιες πληροφορίες σε μορφή λίστας. Το δεξί κουτί είναι μία φόρμα επικοινωνίας. Mία φόρμα επικοινωνίας κατασκευαζόταν κάποτε με πίνακες. Η σύγχρονοι μέθοδοι ανάπτυξης επιτάσσουν την χρήση divs και εφαρμογή σε αυτά κανόνων CSS. Έτσι λοιπόν και αυτή η φόρμα εφαρμόστηκαν κανόνες CSS. Τέλος για υποσέλιδο μπήκαν το λογότυπο της εταιρίας και το copyright κείμενο.

 

Σχετικά με το responsive landing page

Μια responsive ιστοσελίδα έχει το χαρακτηριστικό ότι τα στοιχεία της από τα οποία αποτελείται προσαρμόζονται σε κάθε μέγεθος οθόνης. Η προσαρμογή αυτή έγκειται στα εξής:

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

Το responsive σε σε αυτή την σελίδα εφαρμόστηκε στα μήκη οθονών  500, 600 και 700 pixels. Όσο μικραίνει το μήκος, μικραίνει το μέγεθος των επικεφαλίδων στην κεφαλίδα της σελίδας. Τα δύο κουτιά, λίστα και φόρμα επικοινωνίας, πηγαίνουν το ένα κάτω από το άλλο έτσι ώστε να μην στριμώχνονται.

Μπορείτε να δείτε το Landing page εδώ.