כך תתאימו את הבלוג שלכם לתצוגת מובייל ב- 10 דקות

17 במאי 2012

2 comments

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

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

לפני ביצוע ההתאמות הבלוג של גדי נראה כך:

תצוגת מובייל לבלוג Responsive UI Design

ובתצוגות מובייל:

תצוגת מובייל לבלוג Responsive UI Design

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

הדבר הראשון שנעשה הוא להכנס לממשק הניהול של הבלוג, ותחת איזור ה- Global Settings נבחר באפשרות Title, Description and News.

תצוגת מובייל לבלוג Responsive UI Design

במסך ה- Title, Description and News, נאתר את שדה ה- Raw Header, ובו נזין את קוד ה- HTML הבא המגדיר לדפדפנים סלולריים לא לכווץ את התצוגה, אלא להשתמש בגודל הטבעי של הדפדפן.

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

תצוגת מובייל לבלוג Responsive UI Design

לסיום, נלחץ על Save.

כעת, בדפדפן סלולרי יראה הבלוג כך:

תצוגת מובייל לבלוג Responsive UI Design

מה קרה כאן? האייפון מציג רק 320 פיקסלים מתוך רוחב הבלוג, ללא כיווץ התצוגה. לכן אנחנו רואים חלק קטן מתוך הבלוג.

כעת, נכנס לאיזור הגדרות התצוגה של הבלוג (ממשק הניהול –> Change how my blog looks) ונבחר בטאב ששמו Custom Styles.

תצוגת מובייל לבלוג Responsive UI Design

בשדה CSS Overrides, נוכל לשים חוקי CSS שמאפשרים לנו לבצע התאמות לתצוגת הבלוג.

הדרך הקצרה

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

@media all and (max-width: 850px) {

#leftmenu {
float: none;
width:auto;
}

#leftmenu #QuickLinks {
display:none;
}

#leftmenu #TagSideBar{
display:none;
}

#leftmenu #NewsSidebar{
display:none;
}

#leftmenu #NavSideBar{
display:none;
}

#leftmenu #ArchiveSideBar{
display:none;
}

#leftmenu #RecentPosts{
display:none;
}

#leftmenu > h3, #leftmenu > ul{
display:none;
}

#masthead
{
background-image: none;
width: auto;
height: auto;
}

#nav
{
width:auto;
padding: 0;
}

#content
{
padding-top: 6px;
width: auto;
}

#main
{
width: auto;
padding-right: 5px;
padding-left: 5px;
}

#userArea {
visibility:hidden;
margin-top: 0px;
padding-right:0px;
display: none;
}

#title {
height:auto;
top: 5px;
left:auto;
width:auto;
margin: 10px;
text-align: center;
}

#title h1{
font-size: 2em;
}

#title div{
font-size: 1.5em;
}
}

הדרך הארוכה – להבין צעד לעד

במידה והלכתם על הדרך הארוחכה יותר והשדה CSS Overrides שלכם עדיין ריק – אליכם לדעת: את כל החוקים שנזין, נזין בתוך הבלוק הבא:

@media all and (max-width: 850px) {

}

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

@media all and (max-width: 850px) {

#masthead {
background-image: none;
}

}

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

תצוגת מובייל לבלוג Responsive UI Design

אם נסתכל בכלי הפיתוח של הדפדפן על המבנה של תבנית ה- Paper Clip, ועל האלמנטים הראשיים ב- Layout שלה, נראה שהיא מחולקת ל- 3 איזורים מרכזיים (מסומנים באדום):

  • masthead – האיזור העליון, הכולל את כותרת הבלוג והתמונה הראשית
  • nav – איזור הניווט הראשי
  • content – איזור תוכן הבלוג. איזור זה מחולק גם הוא ל- 3 חלקים פנימיים (מסומנים בכחול):
    • leftmenu – תפריט הצד המכיל את הפוסטים האחרונים, רשימת התגיות ועוד
    • main – איזור תוכן הפוסטים
    • footer – החלק התחתון של הבלוג.

ככה זה נראה באופן ויזואלי:

תצוגת מובייל לבלוג Responsive UI Design

הפעולה הראשונה שנבצע תהיה להעביר את איזור הניווט הצדדי (leftmenu) להופיע מעל איזור תוכן הבלוג כדי להתמודד עם רוחב צר של דפדפנים סלולרים.

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

בסה”כ, הקוד הנדרש להתאמת הסרגל הצדדי יהיה:

@media all and (max-width: 850px) {

#leftmenu {
float: none;
width:auto;
}

#leftmenu #QuickLinks {
display:none;
}

#leftmenu #TagSideBar{
display:none;
}

#leftmenu #NewsSidebar{
display:none;
}

#leftmenu #NavSideBar{
display:none;
}

#leftmenu #ArchiveSideBar{
display:none;
}

#leftmenu > h3, #leftmenu > ul{
display:none;
}
}

לאחר שנוסיף את החוקים האלה ונשמור את השינויים, יראה הבלוג באופן הבא כאשר רוחב הדפדפן יהיה קטן מ- 850:

תצוגת מובייל לבלוג Responsive UI Design

המעוניינים לוותר על רשימת הפוסטים האחרונים יכולים להוסיף גם את החוק הבא:

#leftmenu #RecentPosts{
display:none;
}

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

#masthead {
background-image: none;
width: auto;
height: auto;
}

#nav {
width:auto;
padding: 0;
}

#content {
padding-top: 6px;
width: auto;
}

#main {
width: auto;
padding-right: 5px;
padding-left: 5px;
}

כעת, יראה תוכן הבלוג באופן הבא:

תצוגת מובייל לבלוג Responsive UI Design

אין ספק שתוכן הבלוג מסודר, איך ניתן לראות 2 דברים שעלינו לסדר:

1. כותרת הבלוג נעלמה (כיוון שהיא ממוקמת באופן אבסולוטי ולא מתאימה לשינויי רזולוציה)

2. איזור החיפוש והאפשרות להתחבר למערכת לא מעניינת אותנו.

כדי לפתור בעיות אלו, נוסיף את חוקי ה- CSS הבאים:

#userArea {
visibility:hidden;
margin-top: 0px;
padding-right:0px;
display: none;
}

#title {
height:auto;
top: 5px;
left:auto;
width:auto;
margin: 10px;
text-align: center;
}

#title h1{
font-size: 2em;
}

#title div{
font-size: 1.5em;
}

חוקים אלו מסתירים את איזור החיפוש לחלוטין + ממרכזים ומגדילים את כותרת הבלוג.

clip_image001[12]

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

תהנו!

Add comment
facebook linkedin twitter email

2 comments

  1. Ori Husyt19 במאי 2012 ב 12:19

    גיא, אתה מספר 1
    תודה!
    אורי הוסיט

  2. Yaniv Totshvili19 במאי 2012 ב 23:10

    תודה רבה מספר 1 ושבוע טוב
    יניב טוטשוילי

Comments are closed.