בלוג גלור דיזיין
עיצוב ובניית אתרים

עיצוב אתרים מובהק

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

ייעול בסיס הנתונים

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

אינפוגרפיקה מסוגננת

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

עיצוב אתרים וקיפולי נייר

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

שימוש בספרייטים לשיפור מהירות האתר

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

צמצום הקריאות לשרת והשפעתו על מהירות הטעינה

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

מהירות טעינת האתר והשפעתה על הדירוג

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

כן רבותי, גם כאן פארטו עובד פול טיים…

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

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

עיצוב אתרים מוזר

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

JQUERY ו-AJAX

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

עוד קליפ של CSS 3 ו-HTML5

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