אינטרנט פריסות תגובה עבור מסכים ניידים מבוא, טיפים ודוגמאות

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

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

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

איך עובד עיצוב מגיב

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

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

למה עיצוב נייד - -?

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

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

(מקור תמונה: bradfrostweb)

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

אתה לא צפוי לקבל את אתר האינטרנט שלך עובד 100% על כל מכשיר אחד פועל כל דפדפן. אבל אתה יכול למקד את הרוב על בסיס רוחב ממוצע של המסך. דגמי iPhone ישנים יותר משתמשים ברזולוציית תצוגה של 320 × 480 וזה לא כל כך לא יאומן. הייתי יורה עבור רוחב מינימלי של 240px, או אפילו קטן יותר אם אתה יכול להתאים אותו.

הסרת זום ברירת המחדל

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

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

זה ידוע בשם תג meta Viewport אשר קובע כמה משתנים מותאמים אישית בתוך התוכן. לאפל יש דף תיעוד בנוגע לכמה תגי מטא אחרים שעליך לבדוק, למרות שהם מיועדים במיוחד לאתרים ב- iOS. ה בקנה מידה ראשוני ערך חשוב כמו זה defaults האתר שלך עד 100% זום מלא.

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

שינוי גודל תמונה דינמי

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

img max-width: 100%;

הכלל הסטנדרטי עבור CSS הוא להחיל מאפיין רוחב מרבי על כל התמונות. מאז הם תמיד יהיה מוגדר ב 100% לעולם לא תבחין עיוותים. כאשר המשתמש מחדש את חלון הדפדפן שלהם קטן יותר מאשר התמונה שלך יכול להתמודד עם זה באופן אוטומטי להתאים מחדש את רוחב 100% scaled למטה. הבעיה היא ש- Internet Explorer אינו יכול להבין את המאפיין הזה, לכן יהיה עליך להרכיב גיליון סגנונות ספציפי ל- IE רוחב: 100%;.

תמונות גמישות אפשריים גם אם אתה משתמש ב- JavaScript או jQuery plugins. יש כמה מפתחים חכמים באמת שם בחוץ, אשר יש לשים את הזמן לבנות תוכן תמונה מאוד תגובה. פתיל זה הוא רק אחד רבים של הצפת מחסנית אשר תכונות גישה נוחים עדיין נוח לפתרון IE6 / 7 באגים.

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

לגעת עיצובים

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

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

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

פריסות CSS מותאמות אישית

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

(מקור תמונה: פפרסון)

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

החלף תוכן נוסף פועל / כבוי

דוגמאות לגושי תוכן גדולים כוללים טופסי אינטרנט, תפריטים דינמיים, מחווני תמונות ורעיונות דומים אחרים. במקום להסיר לחלוטין את האלמנטים האלה כמו הפריסה מקבל קטן יותר למה לא פשוט להסתיר אותם “ממוזער” div תוכן? תוכל להשתמש ב- CSS או ב- JavaScript כדי לבצע את העריכות, אך בסופו של דבר סביר שתזדקק למספר קוד JS כדי ליצור לחצן להחלפה.

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

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

שימוש בשאילתות מדיה

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

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

קיימות מספר אפשרויות נוספות שבהן ניתן להשתמש כדי לאתר את כיוון ההתקן. זה מדריך פנטסטי על התקשורת CSS יכול לתת לך כמה רעיונות. בנוסף הפרויקט הנייד החדש 320 ומעלה מציע boilerplate עבור CSS ניידים @media סגנונות. אלה יכולים להיכלל ישירות לתוך אותו קובץ mobile.css וליישם כללים עבור מכשירים שונים.

 / * טלפונים חכמים (לאורך ולרוחב) ------------ * / @media מסך בלבד ו- (min-device-width: 320px) ו- (max-width-width: 480px) / * סגנונות * / / / * טלפונים חכמים (נוף) ------------ * / @media מסך בלבד ו- (min-width: 321px) / * סגנונות * / / * טלפונים חכמים (לאורך) ---- - - * - / @media מסך בלבד (מקסימום רוחב: 320px) / * סגנונות * / / * iPads (לאורך ולרוחב) ----------- * / @ מסך מדיה בלבד ו- (min-width-width: 768px) ו- (max-width-width: 1024px) / * סגנונות * /

(מקור: שאילתות מדיה CSS3 קשה)

כלים מועילים

שלד - Boilerplate יפה עבור עיצוב נייד תגובה
הולך מן הסתגלות להגיב באופן מלא

הצג: יפה עיצובים תגובה

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

תולה את הירח