מאפיין-עיצוב רספונסיבי כבר עשית?

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

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

מקור: Pingdom.com

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

מהו עיצוב רספונסיבי?

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

הנה דוגמא: כך נראה האתר goireland.com ברזולוציות שונות. שימו לב לשינויים בין הגרסאות.

מקור: MediaQueries

למה דווקא עיצוב רספונסיבי?

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

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

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

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

איך זה עובד?

כמו שכותב אית'ן מרקוט'ה במאמר שלו "Responsive web design", עיצוב רספונסיבי הוא לא טכנולוגיה מסוימת, אלא אוסף של טכניקות ורעיונות.

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

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

איך ניגשים לעיצוב אתר רספונסיבי?

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

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

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

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

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

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

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

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

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

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

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

כלי עזר

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

בשלב ההתחלתי

Responsive Web Design Sketch Sheets

כאן תוכלו להוריד דפי שרטוט ליצירת סקיצות לרזולוציות השונות

Style Tiles

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

יצירת גריד

ישנם לא מעט אתרים שמציעים תבניות מוכנות של גריד CSS המתאים למגוון מכשירים ורזולוציות שונות. הנה כמה מהם:

Less Framework

Foundation

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

Golden Grid System

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

דוגמאות ופטרנים

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

אימג'ים מגיבים

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

הנה סרטון המדגים איך זה עובד:

התאמת וידאו

לא רק תמונות, גם סרטונים המופיעים כיום בהרבה מאוד אתרים לא תמיד מגיבים היטב לשינוי גודל הדפדפן. לצורך כך, יצרו המפתחים Chris Coyier ו- Paravel את הפלאגין fitvids.js המאפשר לנגן הוידאו להשתנות בהתאם לגודל הדפדפן בעודו שומר על הפרופורציות.

התאמת טקסט

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

Fitext – פלאגין jQuery המתאים את הכותרות לרזולוציות שונות

ולבסוף – טסטינג

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

Responsinator

יציג לכם באותו העמוד את תצוגת האתר במסגרת מגוון מכשירים ניידים שונים, רק תכניסו את ה-URL.

ובכל זאת, כמה מכשולים בדרך

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

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

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

קצת השראה

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

Anderssonwise.com

Travel Oregon

Sweet Hat Club

Create

Cacaotour

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

מקורות וקריאה נוספת:

http://designwoop.com/2011/10/20-useful-tools-for-responsive-web-design/

http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design

http://adaptive-images.com/

http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/

http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

http://www.alistapart.com/articles/responsive-web-design/

http://designmodo.com/responsive-design-examples/

http://mediaqueri.es/

http://mattkersley.com/responsive/

http://dev.opera.com/articles/view/responsive-images-problem/