בניית אתרים רספונסיביים

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

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

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

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

אז איך אנחנו עובדים?

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

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

עוד מאפיינים של עבודת הפיתוח הרספונסיבי שלנו:

  • אנחנו כותבים קוד מוקפד ביותר, מהיר, מדויק ואיכותי, סמנטי, יעיל ונטול טבלאות (אנחנו כותבים קוד "ביד", כל שורה נבדקת, גם על ידי כלים אוטומטיים).
  • אנחנו גאים מאוד על עמידה קפדנית במיוחד בסטנדרטים של ארגון התקינה הבינלאומי (W3C). כל הדפים בכל אתר שאנחנו בונים עומדים ב-100% בבדיקות ואלידציה בשלב שבו האתר נמסר ללקוח. קראו עוד על הנושא בדף קידום במנועי חיפוש »
  • אנחנו לוקחים בחשבון שיקולי קידום אורגני בכל שלב של פיתוח האתר. כשהאתר עולה לאוויר לא צריך לעשות בו התאמות. הכל כבר מוכן ועובד ונגיש לכל מנועי החיפוש, וגוגל מתאהב באתר כבר בביקור הבא שלו. קראו עוד על הנושא בדף קידום במנועי חיפוש »
  • אנחנו מקפידים על הפרדה מלאה בין עיצוב לתוכן, מה שמאפשר מהירות גלישה טובה יותר, וביצוע שינויים עתידיים באתר במינימום של עבודה. זהו ערך חשוב בבניית אתרים מקצועיים (Separation of Presentation and Content). לקריאה נוספת »
  • כמעט ואף פעם לא נאמר למעצב את המילים "זה בלתי אפשרי". אם אין פתרון קיים להתנהגות מסויימת אותה האתר צריך לכלול - אנחנו נפתח אותה. אנחנו מאוד אוהבים לכתוב JavaScript.
  • כבר בזמן כתיבת הקוד הבסיסי אנחנו לוקחים בחשבון עמידה בחוק הנגישות. עבודה מוקפדת שכזאת מבטיחה שההנגשה של האתר תהיה אופטימאלית ותסייע לבעלי מוגבלויות להשתמש באתר בנוחות. קראו עוד על הנושא בדף נגישות אתרים »
  • אנחנו בודקים את האתרים שלנו על הגירסאות האחרונות של כל הדפדפנים הפופולאריים, וגם כאלה שפחות פופולאריים: כרום, פיירפוקס, ספארי, אופרה ואפילו אינטרנט אקספלורר (מגירסה 10 ומעלה). כמו כן האתרים שלנו נבדקים גם על סמארטפונים (אייפון ואנדרואיד) וטאבלטים שונים.
  • אנחנו מקדישים תשומת לב רבה לטיפול חכם ונכון בתמונות המועלות לאתר. באתרים רבים מוצגות תמונות בדיוק כפי שהועלו, לעיתים אלה קבצים של כמה מגהבייט, שלוקח להם שניות ארוכות להיטען. הבעיה הופכת לחמורה עוד יותר כאשר גולשים לאתר בסמארטפון, שבו מהירות הגלישה תמיד איטית יותר. באתרים שלנו התמונות עוברות טיפול והתאמה לצרכי האתר מיד עם העלאתן, תוך שמירה על איזון בין איכות התמונה לבין גודל הקובץ שלה. לעיתים ניצור שתי גירסאות של אותה התמונה, אחת המיועדת למסכים קטנים ואחת למסכים רגילים. זה מוסיף לנו עבודה מרובה, אבל מבטיח שהאתר שלכם יהיה מהיר ודינאמי.
  • נקודות שבירה - כמה שצריך: אתר רספונסיבי אמור להתאים את עצמו לרוחב המסך שעליו הוא מוצג, החל מרוחב של 320 פיקסלים (מסך של אייפון 4 וסמרטפונים קטנים אחרים), ועד לרוחב של 2000 פיקסלים ויותר (מסכי מחשב גדולים). רבים מבוני האתרים עדיין מתייחסים לשלושה מצבים רספונסיביים בלבד (המכונים גם נקודות שבירה): מצב מובייל (320 פיקסלים), מצב טאבלט (768 פיקסלים), ומצב דסקטופ (1024 פיקסלים ומעלה).
    הגישה הזאת היתה מקובלת עד לפני כמה שנים, משום שאלה היו המידות של המכשירים הקיימים בשוק, אבל מאז יצאו אין ספור דגמים חדשים של סמרטפונים וטאבלטים בגדלי מסך שונים ומשונים, וגם מסכי מחשב מפלצתיים בגודלם עם רזולוציה ענקית. אתרים שנבדקו רק בשלושת נקודות השבירה לא תמיד יתפקדו כהלכה על מכשירים בעלי מידות לא מקובלות. כך קורה שאתם גולשים בסמרטפון שלכם לאתר ומגלים תמונות שחורגות מהמסך, או חורים גדולים שברור שהם לא חלק מהעיצוב.
    האתרים שלנו נבדקים לכל רוחב הספקטרום, מ-320 פיקסלים ומעלה. אנחנו לא מפחדים להוסיף נקודות שבירה כשצריך, כדי להתאים את מראה האתר בצורה מושלמת לכל מסך שלא יהיה.

 

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