Πως να φτιάξετε το πρώτο σας responsive theme !

responsive-theme

Το responsive design έχει γίνει ένα must στην σημερινή εποχή. Κάθε μέρα μας παρουσιάζονται νέα smarthphones και tablets και γι αυτό σήμερα οι ιστοσελίδες μας θα πρέπει να είναι responsive. Σε αυτό το tutorial θα καλύψουμε τα βασικά για την δημιουργία ενός responsive theme και θα καταλάβετε πως δουλεύει η όλη διαδικασία. Site με responsive design είναι το http://www.lilas-aromatery.gr και το http://www.kalaitzis-meat.gr .

Η μόδα αλλάζει συνεχώς γι αυτό και όλο και περισσότεροι μεταφέρονται από τα απλά sites στα responsive. Στην εικόνα παρακάτω μπορείτε να δείτε πως μοιάζει ένα theme στις διάφορες συσκευές.

responsive-theme

Τι είναι τα responsive themes και γιατί είναι σημαντικά?

Η μόδα για την χρησιμοποίηση του responsive design μεγαλώνει τρομερά και γιατί όχι μάλιστα?  H μεγάλη χρησιμοποίηση των smartphones και των tablet pcs έκαναν το responsive design σημαντικό. Αλλά τι είναι τα responsive themes ; Responsive theme είναι η προσέγγιση κατά την οποία ένα website παίρνει το σχήμα του και τις διαστάσεις του ανάλογα με την συσκευή την οποία προβάλετε. Ένα responsive theme είναι βελτιστοποιημένο είτε για ένα smartphone , tablet pc ή έναν pc.  Οι developers την τελευταία περίοδο προσπαθούν να  κάνουν resposive themes τα οποία θα κάνουν ένα site ευανάγνωστο και θα φορτώνει πιο γρήγορα! Σε αυτή την προσπάθεια βοηθούν τα css3 queries που θα κάνουν το μαγικό και θα δώσουν optimized pages!

Βασικές Προδιαγραφές

Γλώσσες που θα χρησημοποιηθούν :  HTML, CSS 3
Διάρκεια Project:  20min – 1 hour
Δυσκολία : μέτρια
Για να καταφέρουμε οτιδήποτε το πιο σημαντικό είναι η προετοιμασία. Δεν είναι τόσο δύσκολο  , το μόνο που χρειάζεται είναι μια προσέγγιση για το τι θέλουμε να πετύχουμε και βασική γνώση για το πως λειτουργούν τα responsive themes. Για να είμαστε πιο ακριβείς  θα πρέπει να έχετε μια καλή γνώση για το πως να δημιουργήσουμε και πως λειτουργούν τα wordpress themes.

Δημιουργία του Child Theme πρώτα από όλα !

 Είναι καλό να φτιάξουμε ένα child theme πρώτα , αν και δεν είναι ο μόνος τρόπος αλλά είναι ο προτεινόμενος. Γι αυτούς που δεν ξέρουν τι είναι ένα child theme πρέπει να δείτε αυτό WordPress reference.

Πως να φτιάξετε ένα child theme!

Πρώτο Βήμα:

Φτιάξτε ένα άλλο φάκελο ονομάζοντας το με την μορφή mythemechild μέσα στο wp-content/themes .Υποθέτουμε οτι το όνομα του theme σας είναι της μορφής myparenttheme. Προσοχή το όνομα του του φακέλου του childtheme μπορεί να είναι οποιοδήποτε. Πάντως καλό θα είναι να έχει κάποια σχέση το όνομα του child theme με το όνομα του parent theme για λόγους κατανόησης από κάποιον τρίτο.

Δεύτερο Βήμα:

Εάν διαβάσατε τον οδηγό που σας δώσαμε το link παραπάνω θα καταλάβατε ότι είναι υποχρεωτική η δημιουργία του αρχείου style.css για τα  child themes. Στο φάκελο του child theme μπορείτε να έχετε επίσης αρχεία όπως το functions.php ή και άλλα template files .

Τρίτο Βήμα:

Η παρακάτω περιγραφή είναι πολύ σημαντική για την λειτουργία του child theme . Τα πεδία theme name και template είναι υποχρεωτικά για την σωστή λειτουργία του child theme . Δείτε παρακάτω ένα screenshot

1
2
3
4
5
6
7
8
9
/*
Theme Name: myParentTheme Child
Theme URI: http://abc.com/
Description: Child theme for the My parent theme
Author: Your name here
Author URI: http://abc.com/authorname/
Template: myparenttheme
Version: 0.1.0
*/

Αναλυτικότερα :

  • Theme Name. (required) Όνομα του child theme.
  • Theme URI. (optional) Child theme website.
  • Description. (optional) Περιγραφή του child theme!
  • Author URI. (optional) Ιστοσελίδα του δημιουργού.
  • Author. (optional) Όνομα δημιουργού .
  • Template. (requireddirectory Όνομα του parent template Προσοχή γιατί είναι case sensitive.
  • Version. (optional) Child theme version.

Τελικό Βήμα:

Τώρα μπορούμε να εισάγουμε το style του parent theme στο child theme . Έπειτα φυσικά μπορούμε να αλλάξουμε τα styles με κώδικα παρακάτω από την γραμμή που παρουσιάζουμε παρακάτω για να εισάγουμε το style.css του parent theme.
1
@import url("../myparenttheme/style.css");

Τελικός κώδικας :

Εάν συνδυάσουμε όλα όσα είπαμε έχουμε το ακόλουθο αποτέλεσμα

1
2
3
4
5
6
7
8
9
10
11
12
/*

Theme Name: myParentTheme Child
Theme URI: http://abc.com/
Description: Child theme for the My parent theme
Author: Your name here
Author URI: http://abc.com/authorname/
Template: myparenttheme
Version: 0.1.0
*/

@import url("../myparenttheme/style.css");

Κάπως έτσι δημιουργείτε ένα child theme τώρα το μόνο που έχουμε να κάνουμε είναι να το ενεργοποιήσουμε όπως όλα τα themes.

CSS3 Media Queries

Τα CSS3  φέρνουν πολλές και εξαιρετικές δυνατότητες και εύκολα και γρήγορα οι designers και οι developers μπορούν να κάνουν φανταστικά πράγματα! Προσοχή με τον ie8 επιφυλάσσει πάντα δυσάρεστες εκπλήξεις. Οι παρακάτω πληροφορίες είναι πολύ χρήσιμες για αποφυγή προβλημάτων:

  1. Πάρτε το  width και height του τρέχοντος παραθύρου.
  2. Τσεκάρετε αν το τηλέφωνο είναι portrait ή landscape.
  3. Πάρτε την ανάλυση της συσκευής  width και height.
Το πως λειτουργούν τα media queries θα τα καλύψουμε σε άλλο άρθρο.

Screen Sizes που μας ενδιαφέρουν στο παρόν tutorial

Το να προσδιορίσουμε τις διαστάσεις και τις αναλύσεις που θέλουμε να ανταποκρίνεται το site μας είναι πολύ σημαντικό. Παρακάτω βλέπουμε κάποιες διαστάσεις :

  1. Smart Phones – μικρότερο από 480px (Considering Google Nexus S and ASUS Galaxy 7 also)
  2. Tablets – 481px με 1280px (Motorola Xoom with max 1280 resolution)
  3. Desktops – 1281 px  και παραπάνω
Παρακάτω βρίσκονται queries που θα κάνουνε το wordpress responsive. Προσοχή στη σύνταξη τα queries είναι εύκολα αλλά μπορεί να υπάρξουν tricks.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media screen and (max-width:480px) {
/* Making the headings red for smartphone users */
h1 {
color: red;
}
}
@media screen and (min-width:481px) and (max-width:1280px) {
/* Making the headings Black targeting PC Users */
h1 {
color:green;
}
}
@media screen and (min-width:1281px) {
/* Making the headings red for smartphone users */
h1 {
color: black;
}
}

Testing

Είναι πολύ σημαντικό να τεστάρουμε το αποτέλεσμα που παράγουμε. Γι αυτούς που έχουνε tablet και smartphones το testing είναι εύκολο. Για τους άλλους εμείς θα προτείνουμε το ScreenFly .

Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions copy

 

Προβλήματα πού πρέπει να έχετε στο νου σας

Είναι σημαντικό να είστε προετοιμασμένοι για προβλήματα που μπορεί να αντιμετωπίσετε. Παρακάτω παρουσιάζουμε κάποια :

1- Sidebar και Widgets

Αυτά μπορεί να γίνουν εξαιρετικά ενοχλητικά για κάποιον που τώρα μαθαίνει. Συνήθως οι sidebars και τα widgets είναι aligned και έχουν floats. Όλα αυτά μπορούν να προκαλέσουν προβλήματα!

2- Navigation Menus

Η περιήγηση και τα menu πρέπει να γίνετε όχι με τον τρόπο που φαίνεται στα desktop pcs αλλά ίσως με κάποιον άλλο τρόπο όπως αυτός που παρουσιάζετε παρακάτω. Όσο πιο σύνθετο μενού τόσο πιο πολλά styles πρέπει να χρησιμοποιήσουμε για το μενού της ιστοσελίδας μας.

Smashinghub.com iphone4 view

Επίλογος

Το responsive design είναι το μέλλον . Στη web-mate πιστεύουμε οτι χωρίς αυτό στο μέλλον δεν θα κατασκευάζονται websites καθώς τα tablets και τα smartphones είναι ήδη μέσα στην ζωή μας.

Πηγή :  Codrops

Δημοσιεύθηκε στις Οκτώβριος 21, 2012 in programming

Μοιραστείτε το άρθρο

About the Author

Back to Top