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

800px

600px

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

?touch-בהאם הדפדפן תומך

var isMobile = "ontouchstart" in window;

הדפדפן תומך בשינויהאם ?אוריינטציה

var isMobile = "orientation" in window; // or var isMobile = "onOrientationChange" in window;

%-לונעבור px-מהנשתחרר @media all and (max-width: 320px) { body { font-size: 13px; } } @media all and (min-width: 321px) and (max-width: 640px) { body { font-size: 15px; } } @media all and (min-width: 641px) and (max-width: 960px) { body { font-size: 19px; } } @media all and (min-width: 961px) { body { font-size: 21px; } }

JavaScriptפתרונות

<img src=“low.png” data-src768=“medium.png” data-src1024=“high.png” alt=“”>

CSSפתרונות

<img alt=“” src=“low.png” data-src768=“medium.png” data-src1024=“high.png”>

@media (min-device-width: 768px) { img[data-src1024] { content: attr(data-src768, url); } } @media (min-device-width: 1024px) { img[data-src1024] { content: attr(data-src1024, url); } } Credit: Nicolas Gallagher

<picture> לתגיתטיוטת תקן

<picture alt=“Description of image”> <source srcset=“low.png 1x, low-2x.png 2x”>

<source media=“(min-width: 768px)“ srcset=“medium.png 1x, medium-2x.png 2x”>

<source media=“(min-width: 1024px)“ srcset=“high.png 1x, high-2x.png 2x”> <!-- Fallback --> <img src=“low.png” alt=“Description of image”> </picture>

SVG

וקטוריפורמט • משקלקל • מעשוראתנו למעלה נמצא • בדפדפניםתמיכה טובה • 'אייקונים וכו, ללוגואיםמתאים •

Web font

Font Awesome

?במה לבחור

פונט ייעודי –אייקונים • SVG -לוגואים •ללא JavaScriptפתרונות –קיימים אתרים •

markupדורשים שינוי נשקול את הפתרון הנכון –אתרים חדשים •

ביותר כל מקרה לגופו

,html-אחת ל גירסה ,css-אחת ל גירסה *משותף JavaScriptקודהרבה

קשה יותר לתחזוקה שוטפת, מצד שני*

במקום התאמה למכשיר או מהנדסים פתרון , מסך מסוימים

*מכשירכולל לכל מסך ולכל

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

מרחב תמרון גדול למפתחים *בהגדרת עיצוב והתנהגות

עיצובי QAגורר יותר סבבי תיקונים אחרי , מצד שני*

Mobile First - לא סיסמהזו

, בהתנהגות, בעיצוב, ביטוי בתכנוןלידי באה .ועוד assetsבטעינת

נדרשת חשיבה מחוץ לקופסא

markup-עשוי להיות מאתגר לגרום לאותו ה בלבד cssלהראות שונה לחלוטין באמצעות

www.UXonBeer.co.il

:)תודה יגאל סטקלוב

igals@netcraft.co.il