פוסט אורח – אייפון ועיצוב אתרים מאת GalBS

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

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

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

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

עקרונות עיצוב אתרים מותאמים אייפון

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

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

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

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

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

5. ביי ביי פלאש – כבר שמנו לב עד עכשיו שמיום ליום הפלאש נעלם מתחום עיצוב האתרים בגלל סיבות שונות. אז עכשיו סופית אפשר להוציא אותו מהלקסיקון מכיוון שנכון לעכשיו דפדפני סלולר לא קוראים פלאש. אם בכל זאת נרצה אנימציה בעיצוב – נוכל להשתמש בפורמט GIF  הידידותי מאד או לחילופין לשלב HTML5+JS  ליודעי קוד שבנינו שניהם בכל מקרה יעשו עבודה טובה מבחינת קידום אתרים.

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

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

גל, מעצב גרפי
www.galbs.com

9 תגובות

• 
  דפנה אלון 27 במאי 2011 בשעה 4:13

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

  הגב
• 
  avi cohen 27 במאי 2011 בשעה 15:58

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

  הגב
• בלוגיק – נבחרי השבוע מהבלוגספירה הישראלית [27-05-11] | Newsgeek 27 במאי 2011 בשעה 19:17

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

  הגב
• 
  רון שטרית 28 במאי 2011 בשעה 20:41

  אחלה פוסט תודה רבה לאבי ולגל בן שטרית

  הגב
• 
  יפה שמעוני 29 במאי 2011 בשעה 6:02

  אשמח לשמוע פרטים…

  הגב
  • 
    avi cohen 29 במאי 2011 בשעה 8:20

    בוקר טוב יפה,
    לא הבנתי מה כוונתך?

    הגב
• 
  גלעד ג. 2 ביוני 2011 בשעה 22:04

  אהלן, מאוד שמחתי לקרוא ויש לי כמה שאלות:
  1.יש אפשרות שהאתר יזהה אם אני גולש דרך מכשיר נייד או מחשב? -ואז לעצב אתר שמתאים למכשיר.
  2. ניתן לבנות אתר שמזהה מחוות (Gesture)?
  תודה.

  הגב
  • 
    avi cohen 4 ביוני 2011 בשעה 20:52

    היי גלעד,
    לשאלותייך,
    לשאלה הראשונה, ניתן לזהות מאיזה מכשיר הגולש מגיע, במידה ואתה צריך את זה בPHP אז אתה יכול להוריד סקריפט מוכן לזה מכאן: http://www.stevedawson.com/visitorstats.php או לחילופין לקרוא על הקלאס uagent_info בלינק הבא: http://www.hand-interactive.com/resources/detect-mobile-php.htm

    בנוגע לשאלה השנייה לא הבנתי למה התכוונת.

    שבוע טוב

    הגב
• 
  Belle 12 ביוני 2011 בשעה 3:03

  That's way more clever than I was expeticng. Thanks!

  הגב