תוֹכֶן
נראה שכולם מדברים על עיצוב אתרים רספונסיבי בימינו, ומסיבה טובה; מכיוון שמספר המכשירים התומכים באינטרנט ממשיך לגדול - כל אחד עם יכולות ותכונות שונות - זה כבר לא הגיוני לבנות אתרים ברוחב קבוע.
האמת, זה מעולם לא היה. עם זאת, עד כה נחשב לשיטה הטובה ביותר לתכנן חוויות שהניחו מספר הנחות, בין אם מדובר ברזולוציית המסך, רוחב הפס או שיטת הקלט. אם אי פעם תכננת אתר רחב 960 פיקסלים, רק כדי להציג אותו ברשת הספר של המסך הקטן של חבר (וכן, אני כותב מניסיון כואב כאן), תבין מדוע זו לא הייתה גישה חכמה במיוחד. עכשיו, עם סמארטפונים וטאבלטים שנזרקים לתערובת, ברור שהשיטות המסורתיות שלנו כבר לא מתאימות למטרה.
למרבה המזל, הופעתן של שאילתות תקשורת CSS והכרה הולכת וגוברת שהאינטרנט הוא מדיום בפני עצמו, פירושו שאנחנו מתחילים לאמץ את האופי האמיתי של הפלטפורמה, תוך קבלה שהאוניברסליות שלה היא חוזק ולא חולשה.
במהלך חמשת הימים הבאים אדריך אותך בטכניקה שמזהה עובדה זו: עיצוב אתרים רספונסיבי. פותח על ידי איתן מרקוט, זה משלב פריסות קולחות, תמונות גמישות ושאילתות מדיה כדי לעזור לנו לבנות אתרים שמתאימים בחן לכל סביבה שהם נתקלים בה.
אדגים גישה זו על ידי מראה לך כיצד לבנות גלריית מדיה פשוטה. בדוגמאות שלי, אני אצור אתר קטן לתיעוד נסיעה חדשה שעשיתי ברחבי ארצות הברית, אך אל תהסס להתאים אישית את הקוד והעיצוב בהתאם לצרכים שלך.
מעצבים עבור הלא נודע
חלק ניכר מהדרכה זו יתרכז סביב היבט הפיתוח של עיצוב רספונסיבי. אך לפני שנעמוד בקוד כלשהו, בואו נקדיש רגע לחשוב כיצד אנו יכולים לעצב אתר שיכול להיות בעל יכולות אינסוף פריסות.
עכשיו, יש לי מזל שאני יכול לעצב ממשקים ו לפתח את קוד ה- frontend שהופך אותם לאמיתיים. זו לא מיומנות ייחודית כמובן - אם אתה עובד בשביל עצמך אז אתה כנראה אותו הדבר. אך בהחלט יתרון להבין כיצד תוכן יכול להסתגל ולזרום מחדש בעת יצירת עיצובים קולחים.
אני עובד גם כחלק מצוות גדול יותר שבו התפקיד שלי מתמחה יותר. בסביבה כזו, המעצב החזותי יכול להתמקד אך ורק בתרגום מסגרות קווית למחשבים אטרקטיביים ומרתקים (חתומים, מושלמים לפיקסלים). וזה לא יוצא דופן שמפתחים ממוקמים בנפרד, ומתרגמים פריסות אלה לסימון רזה ויעיל ו- CSS.
עם זאת, תהליכי עבודה ליניאריים ומופרדים כאלה מתפרקים במהירות ברגע שנתחיל להעריך כיצד יתאימו עיצובים לסביבות שונות. ככל כלי או טכנולוגיה חדשים, עלינו לשקול גם דרכי עבודה שיתופיות וזריזות יותר. רבות מהבעיות המסובכות ביותר בהן נתקלים בעת תכנון אתרים רספונסיביים ניתנות לפתרון באמצעות שיחה, ניסויים ואיטרציה.
גישה פרגמטית לעיצוב
זה לא אומר שאין מעצבים לחשוב כיצד עיצוב יכול לעבוד מחוץ לגבולות מכשיר מסוים.
ב- Clearleft אנו יוזמים עיצוב חזותי מנקודת המבט של שולחן העבודה. ראשית אנו מגדירים שפה עיצובית כוללת ואסתטיקה חזותית, ולעתים קרובות מבססים חקירות ראשוניות סביב פיסת תוכן מרכזית. לדוגמא, אם אנו מעצבים אתר אוכל, נתחיל מדף מתכונים; לאתר חדשות, דף סיפור.
לא רק שזה דף חשוב באתר, אלא שהוא כנראה כולל מספיק תוכן מובנה כדי שנוכל לבנות לוח טיפוגרפי. נחשוב גם על האופן שבו הפריסה עשויה להסתגל - גם אם זה רק במוחנו בשלב זה.
אחת הדרכים שימושיות לבחון את העיצוב היא לקחת דף כזה ולהתאים אותו למסך צר יותר (~ 320 פיקסלים). סביר להניח שתגלה שיש צורך לחשוב מחדש על כמה היבטים של העיצוב כדי שיעבדו ברוחב זה. הנה כמה דוגמאות:
- טיפוגרפיה: כותרות גדולות יכולות לעבוד היטב בפריסות רחבות יותר, אך במסכים קטנים יותר הן יכולות לתפוס מקום אנכי רב ולכן דורשות גלילה נוספת. ככל שאורכי הקו משתנים, כדאי לשקול גם גבהי קו וטיפולים טיפוגרפיים אחרים.
- קישורים: איך העיצוב שלך יעבוד במכשירי מסך מגע? אמנם אין לנו עדיין דרך קלה לזהות אותם (כלומר עלינו לקחת בחשבון בכל היבטי העיצוב שלנו), אך עיצוב למסך צר יותר יכול לתת לנו אפשרות לחשוב על אזורי יעד עבור קישורים ואלמנטים אינטראקטיביים אחרים. . הנחיות ה- iOS ממליצות כי אלה יהיו לפחות 44 פיקסלים / נקודות מרובעים, וזה נתון טוב לכוון אליו.
- ניווט: זה כנראה יהיה המרכיב הכי מביך בכל עיצוב רספונסיבי, במיוחד אם באתר שלך יש קטעים רבים והיררכיה עמוקה. בראד פרוסט כתב סיכום של כמה גישות שונות לניווט שנחשבות כעת.
- תוכן מיותר: האם לא נדרש תוכן כלשהו? האם צריך להציג תוכן אחר רק בתרחישים מסוימים? אני לא תומך בהסתרת תוכן על סמך המכשיר שמשתמש משתמש בו במקרה, אבל טכניקות כמו טעינה מותנית (שנבחן בהמשך השבוע) יכולות לעזור לנו להגיש דפים קטנים יותר אשר טוענים תוכן משלים רק כנדרש.
תכנון שתי פריסות מנוגדות מחזק את הרעיון כי עיצוב יסתגל, תוך גיהוץ של פוטות פוטנציאליות בשלב מוקדם. אמנם זה נשמע כמו הכפלת עבודה, אך זכור כי איננו מעצבים כל עמוד בדיוק מושלם לפיקסלים. במקום זאת, אנו מתמקדים בבניית שפה עיצובית ניתנת להרחבה - שאלה שתתפתח כאשר אנו מתחילים ליישם אותה בקוד, ושאלה שמתבססת סביב מודולים ורכיבים בודדים.
הופך לפריסה אגנוסטית
באופן לא מפתיע, עבור תעשייה שטיפלה היסטורית באינטרנט כמו בדפוס, פריסות ברוחב קבוע חלחלו לרבים מהמוצרים שאנו מייצרים. כאשר אנו מתחילים לעצב מדיום הניתן להתאמה, נשקלות גישות חדשות המאפשרות לנו לפתור בעיות ולתקשר רעיונות תוך הכרה באופי הזורם של המדיום. הנה כמה מהמועדפים שלי:
- דיאגרמות תיאור העמוד: בעוד שמסגרות קווית יכולות לרוב לרמוז פריסה (ובכך להניח סוג מסוים של התקן), דיאגרמות תיאור העמודים מסירות הנחה זו ובמקום זאת מתארות את הרכיבים הבודדים, המסודרים במסמך מבחינת עדיפות.
- אריחי סגנון: כאשר אנו מתקשרים רעיונות עיצוביים עם לקוחות, אנו יכולים למצוא את עצמנו מציגים 'ציורי אתרים'. אם לא נזהר, הלקוחות יבקשו בצדק לראות מושגים המדגימים כיצד ייראה עיצוב גם במכשירים אחרים. זה יכול להכריח אותנו למצב לא בר קיימא של הפקת מספר עמודים למספר מכשירים. סמנתה וורן חשבה על הבעיה הזו והציגה אריחי סגנון. אלה יושבים איפשהו בין לוח מצב רוח (אך פחות מעורפל) לבין קומפוזיציות ממומשות לחלוטין (אך פחות מדויקות), ועוזרים לנו לתקשר טיפוגרפיה, סגנונות כפתורים וטיפולי ראש. הם גם מעודדים רמת דיון בוגרת יותר עם לקוחותינו.
- משחק עיצוב לגייס: תרגיל זה יכול לעבוד ממש טוב במהלך סדנאות עיצוב שיתופיות. בתרגיל זה כולם רושמים על פוסט-איט הערות את האלמנטים שעשויים להופיע בעמוד מסוים. אלה נאחזים בקיר לפי סדר החשיבות, כאילו הם מופיעים בקווי טלפון בטלפון נייד. הדיון שהתקבל עשוי לייצר מסקנות מפתיעות. לדוגמא, ייתכן שתבין שניווט אינו המרכיב החשוב ביותר בדף. זה יכול להמשיך לעיצוב, שם קישור לדלג בראש הדף מקשר לניווט בכותרת התחתונה.
יש עדיין מקום לכלים שאנחנו כבר משתמשים בהם כמובן, אך בעת תכנון אתר במונחים רחבים, עלינו לזכור כי פריסה כבר אינה ידועה.
קידוד בהדרגה
למרבה המזל, אנחנו לא צריכים לדאוג לעיצוב החזותי בדוגמה שאנחנו עובדים עליה שכן העבודה הקשה נעשתה עבורנו! במקום זאת, אנו יכולים להתרכז בקידוד העיצוב שלנו לאתר עם תגובה מלאה.
דבר נוסף לפני שנתחיל. חשוב לזכור עיקרון מכונן של המדיום איתו אנו עובדים: אוניברסליות. פירוש הדבר לא רק לבנות למכשירים המופעלים ברשת של ימינו, אלא להבטיח תאימות גם לאלה של אתמול ומחר. ג'ון אולסופ תיאר מדוע עיקרון זה חשוב בתפקידו 6 מיליארד הבא:
"ששת המיליארד הבאים האלה הם ילדים בהודו הכפרית, באפריקה, בסין, שם הגישה לשלטון ורשתות עשויה להיות לסירוגין. זה מישהו בסומטרה בתיבת ווינטל בת עשור. זה אנשים שמדברים מאות שפות שונות, עם עשרות שונות. מערכות כתיבה. זה האנשים שהם הראשונים במשפחתם שמסוגלים לקרוא ולכתוב. זה 20 אחוז מהאנשים ברחבי העולם שלא יכולים לקרוא או לכתוב. ובכל זאת.’
אנו יכולים להתחקות אחר הבנתנו באינטרנט על ידי התבוננות באופנות השונות (למחסור במילה טובה יותר) שתפסו את המקצוע שלנו: סטנדרטים ברשת, נגישות, JavaScript לא פולשני ... כולם וריאציות באותו נושא: שיפור פרוגרסיבי. הדבר נכון גם לגבי עיצוב אתרים רספונסיבי. לבנות א בֶּאֱמֶת אתר רספונסיבי הוא לבנות אתר שאינו רק תואם לאחור, אלא גם ידידותי לעתיד.
צולל לסימון
אוקיי, די עם ההקדמה, הגיע הזמן לפתוח עורך טקסטים.המעצב שלנו סיפק לנו עיצוב מונחה שולחן עבודה, והיה אדיב לספק דוגמאות כיצד הדבר עשוי להופיע גם בתצוגה צרה יותר.
זה אולי מפתה לקודד אותם בנפרד, אבל אני הולך להציע גישה אחרת. על ידי הצבת המרכיבים הנפרדים - או הדפוסים - המרכיבים את העיצוב בדף אחד, אנו יכולים ליצור תיק תבניות. זה מאפשר לנו לפתח רכיבים מחוץ לגבולות כל פריסת עמוד, וייתן לנו משהו להתייחס אליו אחר כך לכל בדיקת רגרסיה. בואו נראה את הסימון הראשוני בכמה מכשירים שונים:
צפו בתיק הדפוסים המסומן שלנו
ובכן, ארורה - כבר יש לנו אתר רספונסיבי! התוכן שלנו מסתגל לגבולות כל מכשיר, בין אם מדובר באייפד חדש ומהודר או בטלפון עם תכונות מושלכות. זה אפילו עובד בדפדפן טקסט בלבד כמו Lynx.
בזכות העקרונות הבסיסיים של האוניברסליות, האינטרנט כן מגיב כברירת מחדל. זה נהדר, אבל זה גם אומר שכל מה שאנחנו עושים לקוד מעתה עשוי לפגוע ביכולת ההסתגלות הטבעית הזו.
מָחָר: נדרוך בזהירות ונתחיל ליישם את ההיבט הראשון של עיצוב רספונסיבי: טיפוגרפיה ורשתות נוזלים.
