עיצוב בדפדפן

תוֹכֶן

• יתרונות לעיצוב עם קוד
• נתונים ראשונים
• טוב נייד בחינם
• מציאת שפה משותפת
• למד מהר יותר
• איטרציה מהירה
• זמן מהיר יותר להפעלה
• מדוע HTML5?
• מאפיין הנתונים הקסום
• CSS3 - זה הפוטושופ החדש
• סאס + מצפן: טעים קסום
• jQuery: אה, כן אתה יכול
• מסגרות
• מחשבות אחרונות

מאמר זה הופיע לראשונה בגיליון 235 של המגזין .net - המגזין הנמכר ביותר בעולם עבור מעצבי אתרים ומפתחים.

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

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

HTML5 ו- CSS3 מקלים על מעבר יותר של תהליך העיצוב במעלה הזרם - הרחק מפוטושופ ועוד לעבר עיצוב חי ונושם. כלים כמו Foundation, Bootstrap ו- jQuery הופכים את מעבר התהליך העיצובי שלך לקוד לנגיש יותר.

יתרונות לעיצוב עם קוד

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

נתונים ראשונים

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

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

טוב נייד בחינם

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

קלט סוג = "דוא"ל"> סוג קלט = "טל"> סוג קלט = "url"> סוג קלט = "תאריך"> סוג קלט = "תאריך-זמן">

מה שמדהים באמת בסוגי הקלט הנוספים והייחודיים האלה הוא שדפדפנים ניידים ב- iOS ו- Android מזהים אותם ומחליפים אוטומטית מקלדת מודעת הקשר - ללא צורך בתוספי jQuery או פריצות מיוחדות. אה, ואם הדפדפן שלך לא יודע מה קלט סוג = "דוא"ל"> הוא, אז זה פשוט ברירת מחדל להזנת טקסט.

מציאת שפה משותפת

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

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

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

למד מהר יותר

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

איטרציה מהירה

מתי בפעם האחרונה תכנן עיצוב סופי שנשלח לייצור בדיוק את ה- Photoshop שלך? כמעט אף פעם. עם עיצוב מוצרים דיגיטליים, השינוי קורה כל הזמן. יתר על כן, שינויים כגון הגדלת גודל הכותרות שלך מ 22pt ל 24pt על פני כמה עשרות מסכים יכולים להימשך שעות בפוטושופ. אובייקטים חכמים מעניקים לך רמה מסוימת של עיצוב מונחה עצמים בפוטושופ. למרבה הצער, רוב המעצבים החזותיים שאני מכיר אינם משתמשים באובייקטים חכמים מספיק. עם CSS, מכיוון שהוא מעודד גישה שיטתית יותר לעיצוב, שינויים טיפוגרפיים אורכים דקות במקום שעות.

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

זמן מהיר יותר להפעלה

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

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

מדוע HTML5?

HTML5 קל יותר מגרסאות קודמות של HTML. קח למשל את הצהרת סוג המסמך. בגרסאות קודמות של HTML, ה- DOCTYPE נראה משהו כזה:

! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">

והיו שש גרסאות שונות. למרבה המזל ה- HTML5 DOCTYPE נראה ככה:

! DOCTYPE HTML>

ברצינות. זהו זה. פשוט מזעזע.

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

div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>

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

כותרת עליונה> nav> / nav> / header> מאמר> הצידה> / הצידה> / מאמר> תחתונה> / תחתונה>

תסתכל על זה. משהו הגיוני.

מאפיין הנתונים הקסום

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

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

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

קלט סוג = "כפתור" data-id = "facebook" dataregion = "main" data-event = "register"> input input = "button" data-id = "twitter" dataregion = "main" data-event = "register "> סוג קלט =" כפתור "data-id =" linkedin "dataregion =" main "data-event =" register ">

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

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

CSS3 - זה הפוטושופ החדש

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

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

ראשית, בואו נעשה כמה התאמות לברירת המחדל כפתור> ו קלט סוג = "הגש"> אלמנטים. בהנחה שאתה משתמש באחד מאיפוס ה- CSS הסטנדרטי, רק נוסיף מעט גודל ונשימה.

/ * כפתורי כפתורים, שלחצניהם יש את הכפתורים. =========================================== * * / כפתור, קלט [type = "submit"] {גובה: 2.7em; ריפוד: .4em .7em; קו גובה: 1.9; }

Protip: כפתורים ותשומות שהם הגשות יכולים להיות מסובכים לעצב מחדש. מצאתי על ידי התאמת גובה הקו ל 1.6 ומעלה, אתה יכול להימנע מהפריצה של צורך בחלוקה או תוחלת תוספת בתוך כפתור> תָג.

כעת 'תיקנו' את נושא הכפתורים שלנו, נוכל ליצור .btn בכיתה כדי לתת לנו כפתור נקי ויפה עם פינות מעוגלות, שיפוע ליניארי, קו מתאר ומראה הכיתוב הזה.

.btn {display: inline-block; גבול: 1px מוצק # d4d4cc; -מוז-גבול-רדיוס: 4 פיקסלים; -Webkit-border-radius: 4px; גבול-רדיוס: 4 פיקסלים; ריפוד: .4em .7em; רקע: # edeff2; רקע: -webkit-gradient (לינארי, 0% 0%, 0% 100%, מ (#fefefe), עצירת צבע (0.55, # edeff2), ל- (# e4e6e9)); רקע: -moz-linear-gradient (החלק העליון במרכז, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; תיבת צל: rgba (160,172,187, .7) 0 0 .2em 0; צבע: # 6c7786; גודל גופן: 1.1em; טקסט-צל: #fefefe 1px 0 1px; קו גובה: 1.375em; סמן: מצביע; }

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

.btn: רחף, .btn: פוקוס {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; תיבת צל: # 129ceb 0 0 2px; רקע: # e6e9eb; רקע: -webkit-gradient (לינארי, 0% 0%, 0% 100%, מ (# f7f7f7), עצירת צבע (0.55, # f6f6f7), ל- (# e6e9eb)); רקע: -moz-lineargradient (מרכז עליון, # f7f7f7, # f6f6f7 55%, # e6e9eb); צבע: # 45484b; טקסט-צל: rgb (255,255,255) 1px 1px 0; גבול צבע: # c9c9c0; }

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

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

סאס + מצפן: טעים קסום

אתה יכול להפסיק לקוות למהדורת החד קרן CSS4. זה כאן וזה נקרא Sass + Compass. סאס מייצג גליונות סגנונות מדהימים מבחינה תחבירית: אתה יורש את כל היתרונות המסורתיים של CSS3 בתוספת שמחות של משתנים, מיקסינים, מאריכים ודברים אחרים.

לאחרונה שיניתי מחדש קובץ CSS בן 5,000 שורות שהיו לו יותר מ -30 וריאציות באותו גוון כחול. עם סאס החלפתי את כל הווריאציות בקוד זה:

צבע: $ כחול;

על ידי הגדרה $ כחול ב שלי _variables.scss אני יכול ליצור צבע ברירת מחדל שכל קובץ CSS או SCSS יכול להפנות אליו. כל מי שכותב CSS יכול להשתמש $ כחול ולא צריך לדאוג לשימוש בטפטפת, למצוא קוד hex, או צבע RGB, RGBA או HSL.

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

@ כלול רקע (שיפוע לינארי (# b1cfdc, # 7a9cac));

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

@ כולל רקע (שיפוע לינארי (כהה ($ litegray, 2%), כהה ($ off-white, 5%)));

זה ייצור שיפוע ליניארי עם כהה של 2% $ אפור-לייט ו -5% כהה צבע קרם. קול! אינך זקוק אפילו לקודי HEX או RGB.

jQuery: אה, כן אתה יכול

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

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

// - גילוי מתקדם - // $ ('. מספר חדש'). לחץ (פונקציה () {$ ('. Alt-number'). FadeIn ('מהיר');});

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

מסגרות

שתיים מהמסגרות החזקות ביותר כיום הן Foundation ו- Bootstrap. עכשיו, לפני שתבטל את מסגרות CSS, תן לי לשאול אותך משהו. האם אתה משתמש ב- jQuery? רובי ריילס? ג'נגו? כל המסגרות.

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

הבדל מרכזי אחד בין השניים: Bootstrap מבוסס על מערכת LESS לעיבוד מקדים של CSS ואילו Foundation מבוססת על Sass. אני מעדיף את סאס על פחות בגלל יכולותיו הנוספות, אך גם סאס וגם פחות מועכים CSS מסורתי לרסיסים.

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

מחשבות אחרונות

רוצה שליטה רבה יותר כיצד סוף סוף העיצוב שלך יוצא? העבר תהליכים נוספים במעלה הזרם לקוד. HTML5 סוף סוף מביא קצת תחושה ל- DOM. סלסול טוב לשטויות DOCTYPEs ו divitis. CSS3 הוא הפוטושופ החדש: שיפועים ליניאריים, גבול רדיוס וצלליות קופסא FTW! ועם כלים כמו Bootstrap, Foundation, Sass ו- jQuery, העברת העיצוב במעלה הזרם לקוד מעולם לא הייתה קלה יותר.

גלה 55 דוגמאות מדהימות ל- HTML5 ב- Creative Bloq.