טכנולוגיית פיתוח אתרים היא תהליך רב-גוני. אך עדיין, ניתן לחלק את כל שלביו לשני מרכיבים עיקריים – הפונקציונלי והקליפה החיצונית. או, כמקובל בקרב מנהלי אתרים, אחורי וחזית קצה, בהתאמה. אנשים שמזמינים את האתרים שלהם מאולפני פיתוח אתרים מאמינים לרוב בתמימות שכדאי להתמקד רק בפונקציונליות, וזו תהיה ההחלטה הנכונה. אבל זה נכון במקרים מאוד מאוד נדירים, בדרך כלל עבור פרויקטי סטארט-אפ בשלב בדיקות הבטא. אחרת, העיצוב הגרפי וממשק המשתמש פשוט נדרשים לעמוד בתקני פיתוח אתרים ולהיות נוחים.
אבן הפינה הראשונה שעומדת בפני מעצב הממשק, או המעצב, היא רוחב פריסת האתר. אחרי הכל, בשביל זה יש צורך לצייר ממשקים. באופן אינטואיטיבי גרידא, עולות שתי גישות - או ליצור פריסות נפרדות עבור כל רזולוציית מסך פופולרית, או ליצור גרסה אחת של האתר עבור כל התצוגות. ושתי האפשרויות יהיו שגויות, אבל קודם כל.
רוחב אתר סטנדרטי בפיקסליםעבור Runet
לפני הפיתוח של פריסה אדפטיבית, פיתוח אתר ברוחב של אלף פיקסלים היה תופעה המונית. הנתון הזה נבחר מסיבה אחת פשוטה - כדי שהאתר יתאים לכל מסך. ולזה יש היגיון משלו, אבל בואו נניח שלאדם עדיין יש לפחות צג HD על שולחן העבודה. במקרה זה, הפריסה שלך תיראה כמו רצועה קטנטנה באמצע המסך, שבה הכל דבוק יחד בערימה אחת, ובצדדים יש חלל עצום שלא מנוצל. כעת נניח שאדם ניגש לאתר שלך בטאבלט עם מסך רחב של 800 פיקסלים ו"הצג את האתר המלא" מסומן בהגדרות. במקרה זה, גם האתר שלך יוצג בצורה שגויה, מכיוון שהוא פשוט לא יתאים למסך.
משיקולים אלו, ניתן להסיק שרוחב קבוע לפריסה בהחלט לא מתאים לנו ועלינו לחפש דרך אחרת. בואו ננתח את הרעיון של פריסה נפרדת לכל רוחב מסך.
פריסות לכל אירוע
אם בחרת כאסטרטגיה ליצור פריסות לכל גדלי המסכים בשוק, אז האתר שלך יהיה הייחודי ביותר בכל האינטרנט. אחרי הכל, זה פשוט בלתי אפשרי היום לכסות את כל מגוון המכשירים, מנסה לכוונן עבור כל אפשרות. אבל אם אתה מתמקד ברזולוציות הפופולריות ביותר של מסכים ומסכי מכשירים, אז הרעיון לא רע. החיסרון היחיד שלו הוא עלויות כספיות. הרי כשמעצב ממשק, מעצב וקודן נאלצים לעשות את אותה עבודה 5 או 6 פעמים, הפרויקט יעלהגבוה באופן לא פרופורציונלי מהמחיר שתוקצב במקור.
לכן, רק אתרים של עמוד אחד יכולים להתהדר בשפע של גרסאות למסכים שונים, שמטרתם למכור מוצר אחד ולהקפיד לעשות זאת היטב. ובכן, אם אין לך אחת מהנחיתות האלה, אלא אתר מרובה עמודים, אז כדאי לך לחשוב יותר.
גדלי האתר הפופולריים ביותר
פשרה בין שני הקצוות היא עיבוד הפריסה לשלושה או ארבעה גדלי מסך. ביניהם, אחד חייב להיות פריסה עבור מכשירים ניידים. את השאר יש להתאים למסכים שולחניים קטנים, בינוניים וגדולים. איך בוחרים את רוחב האתר? להלן אנו מציגים את הנתונים הסטטיסטיים של שירות HotLog למאי 2017, אשר מראה לנו את התפלגות הפופולריות של רזולוציות מסך שונות של המכשיר, כמו גם את הדינמיקה של מחוון זה.
מהטבלה תוכלו לגלות כיצד לקבוע את גודל האתר שבו ברצונכם להשתמש. בנוסף, ניתן להסיק שהפורמט הנפוץ ביותר כיום הוא מסך של 1366 על 768 פיקסלים. מסכים כאלה מותקנים במחשבים ניידים תקציביים, כך שהפופולריות שלהם טבעית. הצג הפופולרי הבא הוא צג Full HD, שהוא תקן הזהב לסרטונים, משחקים, ולכן ליצירת פריסות אתרים. בהמשך הטבלה אנו רואים את הרזולוציה של מכשירים ניידים 360 על 640 פיקסלים, וכן אפשרויות שונות למסכים שולחניים וסלולריים לאחריה.
עיצוב פריסה
אזלאחר ניתוח הנתונים הסטטיסטיים, אנו יכולים להסיק שלרוחב האתר האופטימלי יש 4 וריאציות:
- גרסת מחשב נייד עם רוחב של 1366 פיקסלים.
- גרסת HD מלא.
- פריסה ברוחב של 800 פיקסלים לתצוגה על צגים שולחניים קטנים.
- גרסה לנייד של האתר - ברוחב 360 פיקסלים.
בוא נגיד שהחלטנו באיזה גודל להשתמש עבור המקור שנוצר עבור האתר. אבל פרויקט כזה עדיין יהיה יקר. אז בואו נסתכל על אפשרויות נוספות, הפעם ללא שימוש ברוחב קבוע.
הפיכת הפריסה לגמישה
ישנה גישה חלופית, כאשר כדאי להתאים רק לגודל המסך המינימלי, וגדלי האתר עצמם ייקבעו באחוזים. יחד עם זאת, ניתן להגדיר רכיבי ממשק כגון תפריטים, כפתורים ולוגו בערכים מוחלטים, תוך התמקדות בגודל המינימלי של רוחב המסך בפיקסלים. בלוקים עם תוכן, להיפך, יימתחו לפי האחוז שצוין מרוחב שטח המסך. גישה זו מאפשרת לך להפסיק לתפוס את גודל האתרים כמגבלה עבור המעצב ולנצח במיומנות את הניואנס הזה.
מהו יחס הזהב וכיצד ניתן להחיל אותו על פריסת דפי אינטרנט?
אפילו בתקופת הרנסנס, אדריכלים ואמנים רבים ניסו לתת ליצירות שלהם את הצורה והפרופורציה המושלמים. לקבלת תשובות לשאלות על ערכי פרופורציה כזו, הם פנו למלכת כל המדעים - מתמטיקה.
מאז ימי קדם, הומצא פרופורציה שהעין שלנו תופסת כטבעית והאלגנטית ביותר,כי הוא נמצא בכל מקום בטבע. מגלה הנוסחה ליחס כזה היה אדריכל יווני עתיק מוכשר בשם פידיאס. הוא חישב שאם החלק הגדול יותר של הפרופורציה קשור לקטן יותר כפי שהשלם קשור לגדול יותר, אז פרופורציה כזו תיראה הכי טוב. אבל זה המצב אם אתה רוצה לחלק את האובייקט בצורה א-סימטרית. פרופורציה זו כונתה מאוחר יותר חתך הזהב, שעדיין אינו מפריז בחשיבותו להיסטוריה העולמית של התרבות.
חזרה לעיצוב אתרים
זה פשוט מאוד - בעזרת יחס הזהב תוכלו לעצב דפים שיהיו כמה שיותר נעימים לעין האנושית. בחישוב לפי ההגדרה של נוסחת יחס הזהב, נקבל את המספר האי-רציונלי 1, 6180339887 …, אבל מטעמי נוחות, נוכל להשתמש בערך מעוגל של 1, 62. זה אומר שהבלוקים של העמוד שלנו צריכים להיות 62 % ו-38% מהכלל, לא משנה באיזה גודל המקור שנוצר עבור האתר שבו אתה משתמש. אתה יכול לראות דוגמה בתרשים זה:
השתמש בטכנולוגיות חדשות
טכנולוגיות פריסת אתרים מודרניות מאפשרות להעביר בצורה מדויקת את הרעיון של מתכנן ומעצב, כך שכעת אתה יכול להרשות לעצמך ליישם רעיונות נועזים יותר מאשר בשחר טכנולוגיות האינטרנט. אתה כבר לא צריך לחשוב טוב מה צריך להיות גודל האתר. עם הופעתם של דברים כמו פריסה אדפטיבית בלוק, טעינה דינמית של תוכן וגופנים, פיתוח אתרים הפך להרבה יותר נעים. אחרי הכל, הטכנולוגיות האלהפחות הגבלות, למרות שהן עדיין קיימות. אבל כידוע, בלי גבולות לא תהיה אמנות. אנו מציעים לך להשתמש בגישה עיצובית יצירתית אחת באמת - יחס הזהב. בעזרתו תוכלו למלא בצורה יעילה ויפה את סביבת העבודה, לא משנה אילו גדלי אתרים תגדירו בתבניות שלכם.
איך להגדיל את שטח העבודה של האתר
יש סיכוי טוב שלא יהיה לך מספיק מקום כדי להתאים את כל רכיבי ממשק המשתמש לפריסה קטנה. במקרה זה, תצטרך להתחיל לחשוב בצורה יצירתית או אפילו יותר יצירתי ממה שעשית קודם.
פינוי מקסימלי של מקום באתר על ידי הסתרת הניווט בתפריט המוקפץ. זה הגיוני להשתמש בגישה זו לא רק במכשירים ניידים, אלא גם במחשבים שולחניים. הרי המשתמש לא צריך להסתכל כל הזמן איזה כותרות יש באתר שלכם – הוא בא בשביל התוכן. ויש לכבד את רצונות המשתמש.
דוגמה לדרך טובה להסתיר את התפריט היא הפריסה הבאה (תמונה למטה).
בפינה העליונה של האזור האדום, ניתן לראות צלב, לחיצה עליו תסתיר את התפריט לתוך אייקון קטן, ותשאיר את המשתמש לבד עם תוכן האתר.
עם זאת, זה אופציונלי, אתה יכול לעזוב את הניווט, שתמיד יהיה באופק. אבל אתה יכול להפוך אותו לאלמנט עיצובי יפהפה, ולא רק רשימה של קישורים פופולריים באתר. השתמש בסמלים אינטואיטיביים בנוסף או אפילו במקום קישורי טקסט. זה אותו הדבריאפשר לאתר שלך לעשות שימוש יעיל יותר בשטח המסך במכשיר של המשתמש.
האתר הטוב ביותר הוא רספונסיבי
אם אינכם יודעים באיזו פריסה לבחור עבור האתר, אז הכל פשוט עבורכם. כדי לחסוך בעלויות הפיתוח ובו זמנית לא לאבד את הקהל שלך בגלל פריסה לקויה של מכשיר כלשהו, השתמש בעיצוב רספונסיבי.
עיצוב רספונסיבי הוא עיצוב שנראה טוב באותה מידה במכשירים שונים. גישה זו תאפשר לאתר שלכם להיות מובן ונוח גם במחשב נייד, אפילו בטאבלט, אפילו בסמארטפון. אפקט זה מושג על ידי שינוי אוטומטי של רוחב אזור העבודה של המסך. על ידי שימוש בגיליונות סגנונות רספונסיביים עבור האתר שלך, אתה מקבל את ההחלטה הטובה ביותר האפשרית.
מה ההבדל בין עיצוב רספונסיבי לגרסאות אתרים
העיצוב הרספונסיבי שונה מהגרסה הניידת של האתר בכך שבמקרה האחרון, המשתמש מקבל קוד HTML השונה מזה של שולחן העבודה. זהו חיסרון מבחינת אופטימיזציה של ביצועי השרת וכן אופטימיזציה למנועי חיפוש. בנוסף, קשה יותר לחשב סטטיסטיקות עבור גרסאות שונות של האתר. לגישה ההסתגלותית אין את החסרונות האלה.
היענות למכשירים שונים מושגת באמצעות פריסה עם אחוז מהרוחב שצוין או על ידי העברת בלוקים לשטח הפנוי (במישור האנכי בסמארטפון במקוםאופקי על שולחן העבודה), או יצירת פריסות בודדות עבור מסכים שונים.
למידע נוסף על עיצוב ופיתוח רספונסיבי במדריכי הלימוד שלנו.
