תוֹכֶן
- כלים להתחלה
- 01. גיליונות סקיצה של עיצוב אתרים רספונסיבי
- 02. סקיצת עיצוב רספונסיבית
- 03. מסגרות קווית תגובה
- 04. דפוסי פריסה מרובת מכשירים
- 05. אריחי סגנון
- כלים לרשת גמישה / נוזלית
- 06. מערכת רשת הזהב
- 07. Foldy960
- 08. SimpleGrid
- 09. רשת CSS 1140px
- 10. מערכת רשת CSS עמודתית
- 11. מערכת רשת סמנטית
- 12. עצבני
- 13. גרידפאק
- 14. רשת רשת
- 15. רשת פוטושופ טובה יותר ל- RWD
- 16. רשתות נוזלים
- 17. מחשבון רספונסיבי
- כלים לתמונות רספונסיביות (וטקסט)
- 18. תמונות רספונסיביות
- 19. תמונות אדפטיביות
- 20. Sencha.io Src (Tinysrc לשעבר)
- 21. FitText
- 22. slabText
- כלים לשאילתות מדיה
- 23. Respond.js
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26. קטגוריזר
- עיצוב רספונסיבי (ונייד)
- 27. 320 ומעלה
- 28. ללא רשת
- 29. שלד
- 30. Bootstrap
- תוספים, שימים ומילוי פוליס
- 31. תוסף רספונסיבי
- 32. להפיל
- 33. טבלת מדיה
- "בדיקה, בדיקה: 1-2-3 ..."
- 34. resizeMyBrowser
- 35. תגובה
- 36. בדיקת עיצוב רספונסיבי
- 37. הרסבונסינאטור
- 38. תגובה
- 39. Screenqueri.es
- 40. אפטוס
- 41. חוברת לעיצוב רספונסיבי
- 42. חוברת למבחן עיצוב רספונסיבי
- 43. Screenfly
- 44. מחוון שאילתת מדיה
- 45. שים
- 46. דרייב-אין
- 47. Adobe Shadow
- 48. אמולטור נייד של אופרה + ניפוי באגים מרחוק
- השראה נוספת
- 49. MediaQueri.es
- 50. @RWD
- אהבתי את זה? תקרא את זה!
כפי שהוצג / נטבע על ידי איתן מרקוט במאמרו "עיצוב אתרים רספונסיבי", כמו גם בספרו הנמכר ביותר, צריך שלושה אלמנטים כדי להפוך את האתר למגיב:
- רשת גמישה / נוזלית
- תמונות רספונסיביות
- שאילתות מדיה
יש עוד המון מאמרים נהדרים המכסים מניעים, מושגים וטכניקות הנוגעים לעיצוב אתרים רספונסיבי, לכן נשמור על המוקד של מאמר זה בכמה כלים מובילים שיעזרו לך להגיב באחריות.
כלים להתחלה
לפני שתתחיל בבניית האתר שלך, עדיף לשרטט כיצד האלמנטים בדף יסתגלו כך שיתאימו לגדלי הדפדפן השונים של המכשירים השונים עליהם יראו, ולהימנע מהניתוק שמגיע לרוב מחשיבה בעיקר על את עיצוב שולחן העבודה ואת שאר האיטרציות הרספונסיביות כמחשבה אחרונה (ראו במיוחד את הערת סטפני (סאליבן) רוויס).
01. גיליונות סקיצה של עיצוב אתרים רספונסיבי
קבוצה זו של גליונות רישום רספונסיביים, מאת ג'רמי פ 'אלפורד, מהווה נקודת התחלה מצוינת להתחיל במיפוי כיצד חלקי העמודים ישתנו ברזולוציות שונות.
02. סקיצת עיצוב רספונסיבית
אם אתה מעדיף לשמור את כל הסקיצות שלך במקום אחד, ייתכן שתרצה לשקול את הספר המחובר לתיל זה של 50 גליונות רישום מגיבים של חברת App Sketchbook.
03. מסגרות קווית תגובה
אחד הקשיים בבניית אתרים רספונסיביים הוא שימוש במסגרות קוויות כדי להראות כיצד יעבוד העיצוב הרספונסיבי. ג'יימס מלרס של אדובי הרכיב את הכלי הניסיוני הזה כדי להראות עד כמה מסגרת תילוט מגיב של פריסות מורכבות יכולה לעבוד.
04. דפוסי פריסה מרובת מכשירים
כשמתכננים עיצוב רספונסיבי, כדאי לראות כיצד אנשים אחרים ניגשו אליו לפניך, כך שדפוסי הפריסה מרובת המכשירים של לוק ורובלבסקי, המפרט דפוסים פופולריים עם קישורים לדוגמאות, הם מקום נהדר להתחיל בו.
05. אריחי סגנון
אריחי הסגנון של סמנתה וורן מציעים טכניקה חדשה לעיצוב בעידן המגיב; במקום מדגמים עיצוביים ברוחב קבוע, מדובר בדוגמיות דוגמה או לוחות רוח שמציגים את הגישה העיצובית הכללית מבלי להיכנס לפרטים מפורטים.
כלים לרשת גמישה / נוזלית
כאמור קודם, הרכיב הראשון הדרוש לתכנון רספונסיבי הוא רשת גמישה / נוזלית.הדברים הבאים כבר בנויים מראש: אתה רק צריך להוריד אותם ותעבור במהירות לאתר רספונסיבי יותר.
06. מערכת רשת הזהב
ג'וני קורפי, שפיתח גם את Less Framework, הוציא לאחרונה גרסה חדשה זו של מערכת רשת אמינה לעיצוב רספונסיבי. מערכת "רשת הגולדן" נראית "מתקפלת" מכיוון שהיא מתאימה בקלות בין 16, לשמונה, לארבע עמודות, וכוללת גם כיסוי דפדפן קטן החושף את הרשת בדפים שלך לבדיקה.
07. Foldy960
הג'נטים המוכשרים של Paravel, Inc פרסמו את רשת 960.gs שהשתנה בה הם משתמשים כבסיס לפרויקטים הרספונסיביים שלהם.
08. SimpleGrid
SimpleGrid, מאת קונור מירהד, נבנה עם אפייה בתגובתיות, כך שקל להפעיל את פרויקט האתר הרספונסיבי שלך.
09. רשת CSS 1140px
מערכת רשת מעולה נוספת היא 1140 פיקסלים CSS Grid של מעצב מלבורן אנדי טיילור, שעובר מרזולוציית שולחן עבודה רחבה למובייל.
10. מערכת רשת CSS עמודתית
מערכת הרשת הטורנית, שנוצרה על ידי מנהל הקריאייטיב Pulp + Pixels, ניק גורסליין, מבוססת על מערכת הרשת 1140 פיקסלים, אך עם כמה דברים טובים נוספים כגון ערכת עיצוב עם גיליונות רישומים ותבניות העברה מחדש, וכן סגנונות ניפוי באגים.
11. מערכת רשת סמנטית
הרחבות CSS מעובדות מראש כמו Sass ו- LESS הופכות פופולריות יותר ויותר, ומערכת הרשת הסמנטית של טיילר טייט משתמשת בהן להשפעה מקסימאלית במערכת רשת זו שלטענתה איננה משתמשת במחלקות או אלמנטים מיותרים. קרא עוד בכתובת coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.
12. עצבני
כמו מערכת הרשת הסמנטית SUSY של Oddbird יצר מערכת רשת שאינה משתמשת בסימון נוסף או בכיתות מיוחדות, אך SUSY מכוונת רק למשתמשים של סאס (והסיומת שלה, מצפן).
13. גרידפאק
Gridpak, של חברת Erskine Design, הוא אחד מחולרי הרשת המגיבים החדשים ביותר בסביבה. זה מאפשר לך להגדיר את העמודות והמרזבים שלך במספר נקודות הפסקה, ואז להוציא קבצי CSS, JavaScript ו- PNG כך שכל הצוות שלך עובד מאותה נקודת התחלה.
14. רשת רשת
עדיין יש אווירה קלה של מסתורין מעל גריסטט, שכן בזמן שאני כותב זאת, זה עדיין לא שוחרר. אך הכלי של מארק בולטון דיזיין מבטיח מערכות רשת מותאמות אישית ולא מרשמות ודרך לשמור ולנהל את רשתותיך באופן מקוון.
15. רשת פוטושופ טובה יותר ל- RWD
אליוט ג'יי מניות מציע לנטוש את תקן הרשת בפועל של 960 פיקסלים ולעבוד מבסיס של 1000 פיקסלים במקום, וכך יהיה קל יותר לעבוד עם כל חישובי האחוזים. אם אתה מסכים, הוא יצר PSD שתוכל להתחיל לעבוד איתו.
16. רשתות נוזלים
אם העיצוב שלך מאוד מתמחה ואתה צריך ליצור רשת משלך בהתאמה אישית, אתה יכול לעשות זאת באמצעות מחשבון רשת הזרימה המועמד של המועמד החדש.
17. מחשבון רספונסיבי
מחשבון פיקסלים לאחוזים נוסף, אך זה של סטו רובסון הולך צעד רחוק יותר מאחרים על ידי יצירת כל כללי ה- CSS עבורך, כלומר אתה יכול פשוט להעתיק ולהדביק אותם בגליונות הסגנון שלך.
כלים לתמונות רספונסיביות (וטקסט)
מרכיב מכריע נוסף בעיצוב אתרים רספונסיבי הוא תמונות נזילות. בעוד שהטכניקה להשגת תמונות נוזליות היא פשוטה, נראה כי מיטוב הביצועים ועומס העמודים עבור מכשירים שונים הם אחד האתגרים הגדולים ביותר בעיצוב אתרים רספונסיבי. להלן כמה משאבים להתייחסות לנושא.
18. תמונות רספונסיביות
קבוצת נימה תכננה דרך לשלוח תמונה בגודל מתאים בהתבסס על רזולוציית המסך. ניסוי זה בתמונות ראשונות בסלולר שמתרחבות בתגובה ובאחריות, קורא שיהיה צורך להפנות שתי תמונות בגדלים שונים.
19. תמונות אדפטיביות
מאט ווילקוקס לקח השראה מכלי Responsive Images ליצירת תמונות Adaptive, המשתמשות ב- PHP ובקצת JavaScript כדי להגיש תמונות מתאימות למכשיר המשתמש מבלי לדרוש סימון נוסף.
20. Sencha.io Src (Tinysrc לשעבר)
Sencha מספק שירות ענן השולח גרסאות אופטימיזציה של תמונות מתארחות בגודל המכשיר המבקש. כדי לברר כיצד להשתמש בו, עיין ב- docs.sencha.com/io/src/.
21. FitText
עוד פנינה מבית Paravel, Inc היא FitText.js, תוסף jQuery כדי להפוך את סוג הכותרת לכותרת בתגובה לעיצוב ולמכשיר. לפרטים ראו trentwalton.com/2011/05/10/fit-to-scale/.
22. slabText
בהשראת FitText ואלגוריתם SlabType, ה- slabText של בריאן מקאליסטר הוא תוסף jQuery שמייצר בלוקים מודגשים של טקסט שמשתנים באופן גודל בתגובה תוך שמירה על רוחב מוגדר.
כלים לשאילתות מדיה
כעת, כשיש לך מושג כיצד הפריסה שלך תשתנה למכשירים שונים, רשת נוזלית ותמונות נזילות, אתה זקוק לשאילתות מדיה כדי להעביר את רכיבי הדף למצב של תגובה.
23. Respond.js
הנושא היחיד עם עיצוב רספונסיבי הוא שדפדפנים שלא יכולים לקרוא שאילתות מדיה נשארים מאחור. יתכן שזו אינה בעיה עם קהל היעד שלך, אך עדיין נוהג להכיל משתמשים בדפדפנים ישנים יותר. Respond.js, מאת סקוט ג'הל, תומך רק במאפיינים ברוחב מינימלי ורוחב מקסימלי.
למידע נוסף, ראה filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.
24. CSS3-Mediaqueries.js
CSS3-Mediaqueries.js, מאת Wouter van der Graaf, מאפשר לגרסאות ישנות יותר של IE ודפדפנים אחרים לבדוק וליישם ביעילות כל מיני שאילתות מדיה.
25. Adapt.js
נתן סמית ', מחבר מערכת הרשת המקורית 960.gs, כתב את Adapt.js, סקריפט שמזהה ממדי דפדפן ומגיש רק את גליונות הסגנון הנדרשים - כמו שאילתות מדיה אך ללא שאילתות מדיה, כלומר זה עובד גם בדפדפנים ישנים יותר.
26. קטגוריזר
זהו זיהוי מכשירים שניגש מזווית הפוכה - סקריפט Categorizr של ברט ינקורד מניח שהתקנים ניידים אלא אם כן זוהו אחרת כשולחן עבודה או טאבלט, מה שמאפשר לך להגיש משאבים לדפדפנים בצורה אוהדת.
עיצוב רספונסיבי (ונייד)
ברוח זרימת עבודה רספונסיבית יעילה, צלחות הדוד מקלות על תהליך העברת העיצובים לדפדפן במוקדם יותר מאשר במאוחר. מרבית צלחות הדודים הללו משלבות את מיטב הכלים שהוזכרו לעיל לחבילה אחת מסודרת: רשת גמישה המשופרת עם סקריפטים, תוך יישום הפילוסופיות הניידות הראשונות של התוכן.
27. 320 ומעלה
320 ומעלה של אנדי קלארק הוא פלטה ראשונה בסלולרית המשתלבת עם כלים רבים אחרים לעיצוב אתרים, כגון LESS ו- Bootstrap (ראה # 30). זו דרך קלה וזריזה להעלות את האתר במהירות. בדוק גם את הראיון שלנו עם אנדי, בו הוא מספר לנו עוד על הגרסה החדשה.
28. ללא רשת
Gridless הוא תנור HTML5 ו- CSS3 שיכול לשמש בסיס לעיצובים הרספונסיביים שלך, עם דגש על טיפוגרפיה ותאימות אפויה בין דפדפנים.
29. שלד
בניגוד לשתי הצלחות הקודמות, שנקודת ההתחלה שלהן היא ברזולוציה הקטנה ביותר, ערכת הפיתוח של השלד, שנוצרה על ידי דייב גאמאצ'ה, מבוססת על מערכת הרשת של 960.gs ומתמעטת לניידים. שלד גם מתגאה במסגרת סגנון נהדרת עבור מפתחים לבנות סגנונות על גבי.
30. Bootstrap
נבנה על ידי טוויטר וכעת מקור פתוח, Bootstrap הוא מסגרת וסדרה של רכיבים לקבלת אתר מקוון במהירות, ונכון לגרסה שתיים כל חלקי הליבה שלו פועלים בתגובה.
תוספים, שימים ומילוי פוליס
למרות שדפדפנים ותוכנות מודרניים נוטים להיות מיועדים לתגובה, לפעמים עלינו להשתמש בכלים נוספים בכדי לספק חוויה עקבית.
31. תוסף רספונסיבי
מריוס לובלינסקי כתב תוסף וורדפרס שמבטיח להפוך כל נושא WP הנוכחי לנושא רספונסיבי. איך זה עובד אני עדיין לא יודע מכיוון שהוא לא פורסם בזמן כתיבת שורות אלה, אך אם זה יעמוד בהבטחתו הוא אמור להועיל מאוד.
32. להפיל
טיפול בהצפת תוכן עובד היטב בדפדפני שולחן העבודה, אך דפדפנים ניידים ישנים מטפלים בו באופן לא עקבי. מילוי המפיל של קבוצת Filament החרוצה מוסיף השפלה חיננית עקבית בכל המכשירים, ומוודא שכל המשתמשים בסלולר יקבלו את החוויה הטובה ביותר האפשרית.
33. טבלת מדיה
תוסף jQuery של מרקו פגארו, MediaTable, עובד עם Respond.js כדי לעזור לכם לעקוף את הבעיה כיצד להציג טבלאות נתונים גדולות בהתקני מסך קטן, יצירת עמודות רספונסיביות והוספת החלפת הצגה / הסתרה במקום המתאים.
"בדיקה, בדיקה: 1-2-3 ..."
היבט נוסף של זרימת העבודה הרספונסיבית הוא להכיר את מכשירי היעד והרזולוציות שלך ואז לבדוק אותם.
34. resizeMyBrowser
ל- resizeMyBrowser, מאת מפתח החזית, צ'ן לואו, יש כמה ממדים מוגדרים מראש עבור חלון הדפדפן שלך לבדיקת דפים שתוכננו בצורה רספונסיבית או ליצור הגדרה מוגדרת מראש אם אינך מוצא את המתאים לצרכים שלך.
35. תגובה
בדומה ל- resizeMyBrowser, responsivepx, שנבנה על ידי רמי שארפ, טוען את הדפים שלך בחלון שבו אתה יכול לבדוק את הרוחב והגובה כדי לקבוע עד כמה שאילתות המדיה שלך יורים והיכן נקודות הפסיקה בתכנון.
36. בדיקת עיצוב רספונסיבי
כלי שימושי להפליא של המעצב והמפתח מאט קרסלי: פשוט הזן את כתובת האתר של האתר הרספונסיבי שלך בבדיקת עיצוב רספונסיבי כדי לראות כיצד הוא מעבד בגדלי דפדפן שונים.
37. הרסבונסינאטור
הזן כתובת URL וה- Responsinator יראה לך כיצד הוא מוצג בגדלי התקנים נפוצים רבים - ביעילות רובוטית חסרת רחמים. תאמה פוגסלי ואנדי הובי אחראים לזה.
38. תגובה
אמולטור מכשירים נוסף בדף, Responsive.is, מאפשר לך להקליד כתובת URL ואז לשנות את גודל האתר במהירות בין מגוון קביעות מוגדרות מראש. זה נוצר על ידי הצוות שמאחורי אפליקציית Typecast הקרובה.
39. Screenqueri.es
כלי אחד נוסף לממדי דפדפן, אך Screenqueri.es ממנדאר שירק מבדיל את עצמו בכך שהוא כולל קבוצה נרחבת של קביעות מוגדרות מראש לטלפונים ניידים וטאבלטים, כמו גם רשת וסרגלים שהופכים את המדידה הקלה להרבה יותר קלה.
40. אפטוס
אפליקציה נוספת לבדיקת אתרים במספר גדלים מוגדרים, אך Aptus הוא מקורי. זה זמין דרך חנות היישומים של Mac, והיותו מקורי מביא תכונות נוספות כגון צילומי מסך קלים ותמיכה במצב לא מקוון.
41. חוברת לעיצוב רספונסיבי
ויקטור קולון הכין חוברת סימניות פשוטה מאוד אך יעילה; כשאתה מפעיל אותו בכל דף אינטרנט זה מוסיף סרגל כלים המאפשר לך לעבור בין ארבעה ממדי מסך נפוצים כדי שתוכל לראות כיצד האתר שלך מתבצע בגדלים שונים.
42. חוברת למבחן עיצוב רספונסיבי
סימנייה זו של בנג'מין קינן מאפשרת התאמה אישית רבה יותר בכך שהיא מאפשרת לך להגדיר את גדלי המכשירים שלך, וכמה או מעטים שתרצה. כשהוא מופעל הוא מציג את האתר בכל הגדלים שנבחרו, זה לצד זה להשוואה קלה.
43. Screenfly
Screenfly, על ידי QuirkTools, מאפשר לך לבדוק אתר ברזולוציות שונות בשולחן העבודה, הטאבלט, הנייד והטלוויזיה. בדיקות שולחן העבודה מוגבלות כרגע ל- Safari, בעוד שלטאבלט והנייד יש אפשרויות נוספות למכשירים ודפדפנים. הטלוויזיה מוגבלת לאופרה.
44. מחוון שאילתת מדיה
יוהאן ברוק מציע דרך CSS טהורה לבדוק מתי מופעלת על ידי הדפדפן שאילתת מדיה. מחוון שאילתת מדיה הוא כלי טוב נוסף לבדיקה ומשחק עם נקודות שבירה בעיצוב.
45. שים
אחד הכלים המשמשים בעיצוב מחדש של בוסטון גלוב, נער הפוסטר של תנועת ה- RWD, Shim הוא אפליקציית Node.js המפעילה דף אינטרנט על פני מספר מכשירים באותה רשת Wifi, מה שהופך את הבדיקה בין מכשירים להרבה יותר קלה. .
46. דרייב-אין
אם אין לך שרת Node.js להפעלת Shim, Scott Jehl יצר גרסה פשוטה יותר בשם Drive-In שעובדת באופן זהה באופן זהה, אך משתמשת בקובץ PHP, Apache וקובץ .htaccess.
47. Adobe Shadow
אדובי ממשיכה לדחוף לטכנולוגיות האינטרנט בעזרת כלי ניפוי ניפוי מרחוק זה. התקן את Shadow ואת סיומת Chrome ב- Mac או Windows, בתוספת לקוח Shadow ב- Android או iPhone, ותוכל לשתף דפי אינטרנט בין מכשירים רבים ושונים.
48. אמולטור נייד של אופרה + ניפוי באגים מרחוק
דרך קלה יותר לניפוי באגים בדפים ניידים היא להתקין את האופרה ואת האמולטור הנייד של אופרה ולחבר בין השניים לאפשרות ניפוי-ניתוק מרחוק שלהם. פשוט ומהיר להתקנה, ויש לו יתרון נוסף של בדיקות ביותר מ- WebKit.
השראה נוספת
רוצה לקבל מושג כיצד אחרים מגיבים את העיצובים שלהם?
49. MediaQueri.es
אם לא ראית את זה כבר, באתר Mediaqueri.es יש מספר הולך וגדל של אתרים שעברו לצד המגיב.
50. @RWD
איתן מרקוט מנהל חשבון טוויטר המביא את החדשות האחרונות, הכלים והוויטרינות מעולם ה- RWD.
דניס ג'ייקובס מעריצה את היותה דוברת, סופרת, מאמנת עיצוב אתרים ומטיפת יצירתיות, ואילו פיטר גסטון הוא מחבר הספר "ספר ה- CSS3" ומפתח אתרים ותיק העוסק בבלוגים ב- Broken Links.
אהבתי את זה? תקרא את זה!
- טיפים למקצוענים לבניית אתר סלולרי
- טכניקות CSS ו- JavaScript מובילות
- כיצד לבנות אפליקציה
- גופני האינטרנט החינמיים הטובים ביותר עבור מעצבים
- גלה מה הבא למציאות רבודה
- הורד מרקמים בחינם: ברזולוציה גבוהה ומוכן לשימוש עכשיו
