Post on 27-Jan-2015
description
transcript
מחדש )• Repurposing)יעוד , , לכמה אותו ותתאים אחד עדיף עיצובים מינימום תעשה
. היא השיטה של העיקרי היתרון פלטפורמות שיותר . אחת פעם נעשית העבודה עיקר יחסית הנמוכה העלות
בלבד.
לפלטפורמה )• (Platform optimizationאופטימיזציהתתכנן פלטפורמה כל משתמש UIעבור חווית עם יעודי
. ממשק הוא השיטה של העיקרי היתרון זהה כוללתפלטפורמה לכל מותאם
“It's cheap but degrading to reuse content and design across diverging media forms like print vs. online or desktop vs. mobile. Superior UX requires tight platform integration.”
• . מובייל אתר כמו משתמש חווית לספק יכול לא גמיש אתרמובייל כאתר יתנהג לא גם .Nativeהאתר
•. מידע בארכיטקטורת שינוי מאפשר אינו גמיש אתר•. מספק פתרון מהווה תמיד לא תמונה גודל שינויבהכרח • לא אך וזולה טוב דרך היא גמיש אתר יצירת
האופטימאלית.ה • למשתמשי מתאים פחות גמיש .IPhoneאתרבמובייל • תוכן נוריד במובייל האתר את להציג כדי לעיתים
. בפועל נציג לא שכללמהדפדפן • ונבקש מלא בגודל תמונות נוריד המובייל באתר
זמן על ישירה בצורה שישפיע מה התמונה של בגודל שיטפלהאתר של הטעינה
ל מיוחדת תודה
כן ?מתי
• , מנהלים – מפתחים בעלויות לחסוך כשרוצים . , יותר נח תוכן עדכון בלבד אחד אתר ומתחזקים
כזה - • מסוג אתר פיתוח בזמן לחסוך -20%כשרוציםיותר 30% הרבה עדיין זה אבל רגיל מאתר ארוך יותר
. מובייל לאתר בנוסף אתר מפיתוח מהרלגמרי • חדש אתר כשבוניםהמכשיר • כשיצא גם רלוונטי יישאר שהאתר כשרוצים
. הבא החדשעם • HTML5כשעובדים
תחום • את להפריד או גמיש אתר לבנות האם ההחלטהעל להתבסס צריכה נפרד לפתרון בלבד ROIהמובייל
• , כדאי הלקוח עבור משתלם לא נפרד אתר פיתוח אם. גמיש אתר על ללכת
• רמות יש בהם חברות עבור טוב פתרון הוא גמיש אתר. במובייל שימוש של נמוכות
שכן החלטנו זאת בכל אם
מחקר•מהתצוגות אחת בכל חשוב ומה כללי באופן למשתמשים חשוב הכי מה
? . מהתצוגות אחת של המשתמשים הם מי בהם שנתמוך
גזרה • גבולות הגדרת , אחד כל עבור הכללי הגריד הגדרת לתמוך נרצה בהם גדלים הגדרת
. חשוב. הכי הזה בשלב הגרידים בתוך תבניות הגדרת להגדיר מהגדליםהלוגיקה במספר את הגדלים בין מעבר תבניות דפיםשל .שונותעם
קונספט•עיצוב •
ה את והתבניות Look and feelשמירה מהגדלים אחד בכל
פיתוח•
התהליך תיאור
גזרה גבולות הגדרת
: הבאים בגדלים תמיכה1024px (Desktop)
768px (iPad portrait)320px (iPhone portrait)
: הבאים בדפים לתבניות התייחסות home page
all the booking process pagesthe hotel pages
offer pages some generic layouts.
בית של גמיש אתר באמצעות התהליך תיאורמלון
בית של גמיש אתר באמצעות התהליך תיאורמלון
בית של גמיש אתר באמצעות התהליך תיאורמלון
בית של גמיש אתר באמצעות התהליך תיאורמלון
: היבטים לשני לב לשים חשוב הזה בשלב
ה • על התצוגות Look and feelשמירה כלל בין הכללי• , שימוש המובייל תצוגת עבור יחסית פשוט עיצוב
. יותר מהירה לטעינה בתמונות מינימאליאחד – • בכל קריא להיות חייב הפונט פונטים
שיהיה. כך גדול מספיק להיות צריך הפונט מהמכשיריםבמובייל קריא
עיצוב
בית של גמיש אתר באמצעות התהליך תיאורמלון
מאת Luke WroblewskiתבניותMostly Fluid
Column Drop
Layout Shifter
Tiny Tweaks
Off Canvas
http://www.bostonglobe.com/
http://thinkvitamin.com/
http://sasquatchfestival.com/
http://staffanstorp.se/
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
http://foodsense.is/
דוגמאות
:// . /http foodsense is
למדי גמיש האתרבכל ותומך
שרק רזולוציהתבקשו
:// . /http boagworld com : למדי גמישים אתרים עוד
:// . . /http www anderssonwise com
• http://seesparkbox.com
• http://stephencaver.com/
• http://www.revsystems.com/
• http://forefathersgroup.com/
לשקול שצריך נוספים היבטים
•Mobile First•Media queries – בכלל אם להשתמש מתיכל – • את להציג האם מהמשתמשים תוכן של הסתרה
להסתיר מה לא ואם הרזולוציות ובכל התוכן iPhoneמשתמשי ••Content Prototype – בסוף ורק עצמו בתוכן מתרכזים
למעטפת דואגים
זול•יחסית • מהיר•\ בינוניים קטנים ואתרים לחברות מתאיםרזולוציות • עבור גם מעודכן להישאר שרוצה למי מתאים
חדשותאתר • לפתח עדיף מגבלה מהווה אינה כשהתקציב
אחד גמיש אתר ולא יעודי מובייל
וידיאו•• http://www.youtube.com/watch?v=xQDemi6xT9Q• http://www.youtube.com/watch?v=1gw3MSwm6so&feature=related • http://www.youtube.com/watch?v=uNMw34Z63Ck&feature=related• http://www.youtube.com/watch?v=wZ8BosE0Jmk
דוגמאות•• http://www.idomain.co.il/2011/responsive-web-design-examples/• http://designmodo.com/responsive-design-examples/
עוד ללמוד שרוצה ...למי• http://www.webdesignshock.com/responsive-design-problems/• http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html• http://www.lukew.com/ff/entry.asp?1514• http://mobile.smashingmagazine.com/2011/09/26/content-prototyping-in-responsive-web-design/• http://mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/• http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/• http://www.useit.com/alertbox/repurposing.html• http://boagworld.com/mobile-web/separate-mobile-site-vs-responsive-design/• http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/• http://blog.echoenduring.com/2011/08/06/i-love-responsive-design-but/• http://www.useit.com/alertbox/mobile-vs-full-sites.html• http://www.thismanslife.co.uk/projects/lab/responsiveillustration• http://www.egstudio.biz/responsive-design-vs-mobile-application/?utm_source=oktopost&utm_medium=LinkedIn
-Group&utm_campaign=Responsive%20Design%20Vs.%20Mobile%20Application• http://www.cxpartners.co.uk/cxblog/responsive-design-roi-observations-from-the-coalface/• http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/• http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies
/