ג'ומלה מותאם למוביילנושא התאמת אתרים לסלולר כבר הפך לדבר שבשגרה. צורך הכרחי כמעט בכל אתר חדש שמעלים לאוויר ובכל אתר קיים שניתן לגשת אליו ממסכי מחשב בלבד.

היום, אתר לא צריך להיראות טוב רק במסכי מחשב, אלא גם בטאבלטים ובסמארפונים. אתר הינו רספונסיבי אם ביכולתו "להסתגל" לרזולוציות המסך של המשתמש.

בקצרה - עיצוב רספונסיבי (או בעברית, עיצוב "מגיב") הינו עיצוב המשתנה באופן מיידי בהתאם לרזולוציות מסך שונות, כך שלא משנה מהיכן גולש המשתמש, הוא תמיד יוכל לראות את האתר כמו שצריך, בגודל כתב קריא, ללא צורך בהגדלת / הקטנת המסך או בגלילה ימינה ושמאלה.

חשוב לציין - ניתן להפוך כל אתר לרספונסיבי, יש צורך להפריד בין המערכת עליה נבנה האתר - ג'ומלה, לבין הטמפלייט שאנו יוצרים בעצמנו ואותו אנו רוצים להתאים לתצוגה סלולרית. אין קשר ביניהם!

ישנן תבניות רבות שכבר מגיעות רספונסיביות, ובמיוחד תבניות לג'ומלה 3, שם הרספונסיביות שולטת בתבניות המובנות גם באתר וגם במערכת הניהול.

במידה והאתר שלכם אינו רספונסיבי, אסביר לכם במדריך זה כיצד ניתן להפוך אותו לרספונסיבי בשלושה צעדים קלים ופשוטים. 

1. פריסת התצוגה (The Layout)

כאשר בונים מאפס אתר רספונסיבי, או כאשר הופכים אתר קיים לרספונסיבי, הדבר הראשון שיש להתייחס אליו הוא פריסת התצוגה, ה- Layout. כאשר אני בונה אתר רספונסיבי, אני תמיד מתחילה בליצור פריסה שאינה רספונסיבית, כלומר, פריסה בגודל קבוע (למשל דיב קונטיינר ברוחב 1100px). כאשר אני מרוצה מהגרסה הלא-רספונסיבית, אני מוסיפה Media Queries ושינויים קלים בקוד, על מנת להפוך את הקוד לרספונסיבי. בצורה כזו קל הרבה יותר להתרכז במשימה אחת בכל פעם.

כאשר אני מסיימת עם הגרסה הלא-רספונסיבית של האתר, הדבר הראשון שיש לעשות הוא להדביק את הקוד הבא בתוך תגית ה- Head בקובץ ה- index.php של התבנית שלך. הקוד הזה יאפס את הצפייה בכל המסכים ליחס צפייה של 1:1 ויסיר את פונקציות ברירת המחדל של דפדפנים במכשירי הסלולר אשר מציגים את האתר בגודל מלא ומאפשרים לגולש להגדיל ולהקטין את המסך על מנת לקרוא את התוכן.

 

הצג/הסתר קוד html5

הצג מקור
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<meta name="HandheldFriendly" content="true">

זה הזמן להכניס קצת Media Queries. על-פי האתר של W3C, Media Query מכילה סוג מדיה (Media Type) וביטויים נוספים הבודקים תנאים המתקיימים ברכיבי מדיה שונים. באמצעות שימוש ב- Media Queries, תצוגות יכולות להיות מותאמות לטווח ספציפי של מכשירים, ללא צורך בשינוי התוכן עצמו. במילים אחרות, Media Queries מאפשרות לאתר שלך להיראות טוב במגוון רחב של תצוגות, החל מסמארטפונים וכלה במסכים גדולים.

Media Queries תלויות בפריסת התצוגה של האתר שלך, כך שקשה לי לספק קוד מוכן שתוכלו להשתמש בו, הקוד המצויין בהמשך המדריך הוא התחלה טובה עבור רוב האתרים.

 

בדוגמא שלנו, main# זהו איזור התוכן, ו- sidebar# הינו התפריט הצדדי.

כאשר אנו מסתכלים על הקוד, תראו שהגדרתי שני גדלים: לראשון יש רוחב מקסימאלי של 1060px, שזהו רוחב אופטימלי עבור רוב מכשירי הטאבלטים בתצוגה אופקית (Landscape View).

הדיב main# תופס כ- 67% מהדיב המכיל שלו (container#) וה- sidebar# תופס כ- 30% ועוד כ- 3% של שוליים שמאליים.

הגודל השני מיועד למכשירי טאבלט בתצוגה אנכית (Portrait View) ולמסכים קטנים יותר. בגלל שלסמארטפונים יש מסכים קטנים ביותר, החלטתי לתת לדיב main# רוחב של 100%. לדיב sidebar# גם נתתי רוחב של 100%, והוא יוצג מתחת לדיב main#, ללא שוליים שמאליים.

כפי שאמרתי, אתם בוודאי תצטרכו לשנות טיפה את הקוד על מנת להתאים אותו לדרישות הספציפיות של האתר שלכם. הדביקו קוד זה לקובץ ה- template.css שבתבנית שלכם.

 הצג/הסתר קוד css

הצג מקור
/* Tablet Landscape */
 
@media screen and (max-width: 1060px) {
 
    #main { width:67%; }
 
    #sidebar { width:30%; margin-left:3%;} 
 
}
 
/* Tabled Portrait */
 
@media screen and (max-width: 768px) {
 
    #main { width:100%; }
 
    #sidebar { width:100%; margin:0; }
 
}

לאחר שביצעתם זאת, ניתן לבדוק כיצד עובדת התצוגה הרספונסיבית באתר שלכם. ניתן להשתמש בכלי הזה של Matt Kersley.

 

2. אמצעי תקשורת (Medias)

פריסת תצוגה רספונסיבית הינה הצעד הראשון לאתר אינטרנט רספונסיבי. כעת, בואו נתמקד בחלק חשוב מאוד באתר המודרני: אמצעי תקשורת, כמו תמונות או סרטוני וידאו.

קוד ה CSS המצויין בהמשך יבטיח שאף אחת מהתמונות באתר שלכם לא יהיו גדולות יותר מפריט האב המכיל אותן. זה פשוט ביותר ועובד עבור רוב האתרים. אנא שימו לב שההגדרה של max-width אינה עובדת בדפדפנים ישנים, כמו אקספלורר 6. על מנת שיעבוד, הקוד הזה חייב להיכנס לתוך קובץ ה CSS שלכם, במקרה שלנו – template.css:

הצג/הסתר קוד css

הצג מקור
img { max-width: 100%; }

למרות שהטכניקה שצויינה למעלה היא יעילה ביותר, לפעמים יהיה צורך להשיג שליטה רחבה יותר על תמונות ולהציג תמונות שונות בהתאם לרזולוציית התצוגה של המשתמש.

זו טכניקה שנוצרה ע"י Nicolas Gallagher. בואו נתחיל עם ה- HTML:

הצג/הסתר קוד html5

הצג מקור
<img src="image.jpg"
 
     data-src-600px="image-600px.jpg"
 
     data-src-800px="image-800px.jpg"
 
     alt="">
 

כפי שאתם רואים, השתמשנו במאפיין ה- data-* על מנת לאחסן נתיבים של תמונות חליפיות. כעת, בואו נשתמש בכוח המלא של CSS3 כדי להחליף את התמונה שהוגדרה כברירת המחדל, באחת התמונות שהוגדרה שלמעלה, במידה והתנאי של min-device-width מתקיים:

הצג/הסתר קוד css

הצג מקור
@media (min-device-width:600px) {
 
    img[data-src-600px] {
 
        content: attr(data-src-600px, url);
 
    }
 
}
 
@media (min-device-width:800px) {
 
    img[data-src-800px] {
 
        content: attr(data-src-800px, url);
 
    } 
 
 

כלומר, כאשר רזולוציית המסך של המשתמש היא מעל 600px, תוצג התמונה image-600px.jpg במקום התמונה הדיפולטיבית, כאשר רזולוציית המסך של המשתמש היא מעל 800px תוצג התמונה image-800px.jpg במקום התמונה הדיפולטיבית.

מרשים לא? כעת בואו נתמקד בחלק חשוב נוסף באמצעי התקשורת של אתרים היום, סרטוני וידאו.

ברוב האתרים היום, אנחנו משתמשים בכלים צד ג' של אתרים כמו יוטיוב או וימאו. החלטתי להתמקד בשיטה האלסטית של Nick La, טכניקה זו מאפשרת להפוך סרטוני וידאו מוטמעים לרספונסיביים.

קוד ה- HTML:

הצג/הסתר קוד html5

הצג מקור
 
 
<div class="video-container">
 
        <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
 
</div>
 
 
 

וכעת, קוד ה- CSS:

הצג/הסתר קוד css

הצג מקור
 
 
.video-container {
 
        position: relative;
 
        padding-bottom: 56.25%;
 
        padding-top: 30px;
 
        height: 0;
 
        overflow: hidden;
 
} 
 
.video-container iframe, 
 
.video-container object, 
 
.video-container embed {
 
        position: absolute;
 
        top: 0;
 
        left: 0;
 
        width: 100%;
 
        height: 100%;
 
}
 

כלומר, עלינו להקיף את הסרטון המוטמע בתגית iframe בדיב מכיל כלשהו ולתת לו את ההגדרות שנתנו בדוגמא לדיב video-container.

לאחר שהכנסת את הקוד הזה לאתר שלך, סרטוני הוידאו המוטמעים באתר שלך, הם כעת רספונסיביים.

 

3. טיפוגרפיה (Typography)

הצעד האחרון במדריך זה הוא חשוב במיוחד, אך לפעמים הוא נדחק לפינה על-ידי מתכנתים כאשר זה מגיע לאתרים רספונסיביים: טיפוגרפיה.

עד עכשיו, רוב המתכנתים (כולל אני!) השתמשו בפיקסלים על-מנת להגדיר גודל כתב. בעוד שימוש בפיקסלים הוא בסדר כאשר האתר הוא בגודל קבוע (fixed), אתר רספונסיבי מחייב שימוש בגופן רספונסיבי. גודל גופן רספונסיבי חייב להיות משוייך לרוחב פריט האב המכיל אותו, כך שהוא יוכל להשתנות בהתאם לרזולוציית התצוגה של המשתמש.

המפרט של CSS3 כולל יחידת מידה חדשה הנקראת rems. הן עובדות באופן כמעט זהה ליחידת המידה em, אך הן יחסיות לתגית ה- HTML, כך שקל הרבה יותר להשתמש בהן, מאשר ems.

כאשר יחידות ה rems יחסיות לתגית ה- HTML, אל תשכחו לאפס את גודל הגופן לתגית ה- HTML:

הצג/הסתר קוד css

הצג מקור
html { font-size:100%; }

לאחר שעשיתם זאת, באפשרותכם להגדיר גדלים שונים של גופנים כפי שכתוב בקוד הבא:

הצג/הסתר קוד css

הצג מקור
@media (min-width: 640px) {
 
         body {font-size:1rem;}
 
 }
 
@media (min-width:960px) {
 
         body {font-size:1.2rem;}
 
 }
 
@media (min-width:1100px) {
 
         body {font-size:1.5rem;}
 
 }

שימו לב, שיחידות ה- rem אינן נתמכות בדפדפנים ישנים, אז אל תשכחו לשים אפשרויות נוספות שכן נתמכות שם, כמו em או אחוזים.

 

כמה טיפים, לסיכום

  • כמעט כל אתר שאינו רספונסיבי אפשר להפוך לרספונסיבי עם קצת הבנה והשקעה.
  • תוציאו מהלקסיקון שלכם את המילים פיקסלים וטבלאות.
  • תנסו להימנע מלהכניס הגדרות CSS בתוך הקוד, במיוחד הגדרות רוחב וגובה לתמונות. עורכי תוכן רבים מכניסים לקוד באופן אוטומטי רוחב וגודל לתמונות. תוודאו שהם לא מכניסים את זה לקוד, ואם כן, תמחקו את ההגדרות האלה - הם ישבשו לכם את התצוגה הרספונסיבית של התמונות.
  • אל תשכחו את ההגדרה  {;img { max-width: 100% , היא תפתור לכם הרבה בעיות....
  • השתמשו כמה שיותר בהגדרות של אחוזים, em, או rem במקום בפיקסלים, כולל בהגדרות רוחב וגובה של דיבים, ואפילו הגדרות שוליים (padding, margin).

הרעיון הבסיסי אומר, שכל הגדרת CSS שקיימת אצלכם באתר, ניתן לדרוס על-ידי שימוש ב- Media Queries. במדריך הזה ניתנו דוגמאות להגדרות CSS מסויימות (אך כלליות) אך כמובן שניתן לדרוס כל הגדרה הקיימת באתר. פשוט תבחרו את הרזולוציה אליה אתם מתייחסים והכניסו לתוכה את הגדרות ה- CSS החדשות.

לכתבה המקורית באנגלית

תגובות   

0 #2 דויד 2014-03-18 02:32
שלום
האתר שלי בנוי מקבצי php ללא מערכת ניהול
ואני מתחזק ומתכנת אותו
האם ניתן להפוך אותו למותאם מובייל כפי שמוסבר כאן בצורה פשוטה יחסית?
בברכה
דויד
-3 #1 מיקי 2014-03-12 08:05
מצויין

עליך להירשם כדי להוסיף תגובות

חופית

אתר המחבר/ת: http://HDdesign.co.il