single page website2

Single Page Website

דור ברונפן

אלינה גרשון

מאיה סינאיוק

עמוד אחד.

גלילה פנימית.

חוויה ויזואלית אינטואיטיבית.

כל הקוד נטען בפעם הראשונה .

אין טעינה מחדש במהלך הגלישה.

?מה זה

.קל לניווט הודות לעיצוב הפשוט וכפתורי הניווט הברורים√

. מעביר את מסר העמוד בצורה ברורה√

.איכות על פני כמות –עיצוב √

.קל יותר לתיחזוק√

.מכיוון שאין טעינה מחדש, ניצול נמוך של רוחב הפס√

יתרונות

.כל התכנים נמצאים בעמוד הראשי√

קל יותר למנוע החיפוש לסרוק את –אין דפים פנימיים √

.האתר

פחות אחוזי נטישה הודות לכך שהגולש רואה את כל התוכן √

.בכניסה הראשונה

SEOיתרונות

xכי אין חלוקה לעמודים, דאטה לכל חלק באתר-אין מטה .

xאין קישורים פנימיים בין דפי האתרים .

x מאיט את הטעינה הראשונית וגם את –יותר " כבד"העמוד

. סריקת מנועי החיפוש

SEOחסרונות

דגשים ליצירת אתר

מיקוד

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

עיצוב הדף כך שידגיש את הנקודה המרכזית

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

הבהרת הניווט

המשתמש חייב לדעת כי הוא , במצב בו יש קישור חיצוני

יש להשתמש באייקונים מיוחדים בכדי . יופנה לאתר אחר . להבהיר שמדובר בקישור חיצוני

להתפרע עם העיצוב

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

לקודד

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

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

דוגמאות קוד

גלילה אופקית

scroll.zip-rtl-http://ataze.info/scrolling/hoizontal

-internal-to-/scroll07/03/2012http://speckyboy.com/ jquery-with-link

תמונות נעות

-to-http://blog.spoongraphics.co.uk/tutorials/how website-portfolio-page-single-own-your-build

אתרים לדוגמא

http://onepagelove.com