50 שימושי עיצוב אתרים תגובה למעצבים

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

במהלך הימים האחרונים, הראינו לך כמה מהנושאים הטובים ביותר של WordPress ו- Joomla שתוכלו להוריד ולהשתמש בהם באתר שלכם. היום, אנחנו הולכים לתת לך הכלים. Comparise של מסגרות, שירותים, ו scriptble downloadble, אנחנו חושבים שהם הולכים להיות לעזר רב כשמדובר בפיתוח אינטרנט תגובה.

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

• רשת & מסגרות
• גליונות סקיצה ו - Wireframes
• & JQuery תוספים
• בדיקה & תצוגה מקדימה
• מחוונים
• אחרים

רשת & מסגרות

[חזרה למעלה]

עמודה

Columnal הוא פרויקט Pulp + Pixels, שהושאל מ cssgrid.net בעוד כמה קוד השראה נלקח מ 960.gs. עמודה עוזרת לך הרבה בעיצוב האינטרנט המותאם שלך, על ידי הפיכת הרשתות שלך גמישות לשינוי דינמי כאשר חלון הדפדפן משתנה.

שלד

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

פחות עבודה 4

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

מערכת סמנטית

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

מערכת רשת הזהב

Golden Grid System היא מערכת נוזל-רשת אשר משמש נקודת המוצא של עיצוב האינטרנט שלך תגובה. הוא מאפשר לאתר לשרת דפים יפים הנעים בין 240 ל 2560px.

320 ומעלה

320 ו- Up הוא שאילתת שאילתות של CSS, שמשמשת כתבנית ההתחלה עבור העיצוב המותאם שלך. זה נובע גישה הפוכה לחלוטין מאשר כמה boilerplates אחרים זמינים.

Inuit.css

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

ללא רשת

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

1140 קס גריד

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

1KBCSSGrid

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

מגף

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

נוזל גריד מחשבון

כלי פשוט זה יעזור לך לתפוס במהירות את ה- CSS של אתר האינטרנט שלך נוזל עיצוב.

רשתות נוזל

נוזל גריד הוא פשוט עדיין שימושי רשת טבלה הרשת, שיוצר פריסות תגובה מבוסס על 6, 7, 8, 9, 10, 12 או 16 עמודות.

מטושטש

Flurid הוא פשוט ויעיל מאוד חוצה דפדפן CSS רשת מסגרת עם עד 16 עמודות. יתר על כן זה לא מסתיר פיקסלים לשוליים.

גרידסט

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

גרידפק

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

פשוט

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

סוזי

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

רשת נוזלים זעירה

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

מערכת רשת משתנה

מערכת רשת משתנה תוכנן ופותח על ידי SprySoft והוא מבוסס על מערכת 960 רשת. זה מאפשר למפתחים ומעצבים ליצור את הרשת מותאמת אישית ולאחר מכן להוריד את קובץ CSS הנלווה מבוסס על הרשת.

גליונות סקיצה ו - Wireframes

[חזרה למעלה]

עיצוב אתרים מגיב גליונות סקיצה

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

תגובה Wireframes

תגובה Wireframes הוא כלי ניסיוני שנוצרו על ידי ג 'יימס Mellers של Adobe. הוא נבנה עם HTML ו- CSS בלבד (לא נעשה שימוש בתמונות או ב- JS), שבו ניתן להשתמש כדי להמחיש כיצד העיצוב המותאם שלך ייראה בדפדפנים בפועל של מחשבים שולחניים שונים ומכשירים ניידים.

סגנון

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

& JQuery תוספים

[חזרה למעלה]

Adapt.Js

Adapt.js הוא פתרון Javascript ו חלופה מצוינת שאילתות מדיה CSS. שימוש בגישה @media הוא תרגול טוב, אבל זה לא עובד עבור כל הדפדפנים. נתן סמית, היוצר של מערכת 960 רשת, שוחרר Adapt.js, ספריית JavaScript קל מאוד להתגבר על בעיה זו.

איזוטופ

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

בנייה

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

תגובה

Respond.js הוא סקריפט מהיר וקל (3 Kb ממוזער ו- 1 Kb gzipped), שמטרתו העיקרית היא לאפשר עיצוב אינטרנט דינמי באלה שאינם תומכים בשאילתות CSS3 Media, כגון דפדפני אינטרנט אקספלורר.

TinyNav.js

TinyNav.js הוא תוסף jQuery קטן וקל משקל, רק 362 בתים, הממיר רשימות ניווט גדולות לתפריטים נפתחים קטנים למסכים קטנים יותר.

תוסף

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

בדיקה & תצוגה מקדימה

[חזרה למעלה]

פרוטופלויד

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

Responsive.Is

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

Responsivepx.Com

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

תגובה אינטרנט עיצוב כלי בדיקה

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

ReView.Js

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

Screenfly

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

Screenqueri.es

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

המגיב

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

מחוונים

[חזרה למעלה]

אוכמניות

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

אלסטיסליד

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

מגיב CSS3 תגובה

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

תשובות

ResponsiveSlides.Js הוא פשוט מאוד קל משקל (רק 1Kb) תוסף jQuery שיוצר מחוון תגובה באמצעות רשימות לא מסודרות. זה עובד על מגוון רחב של דפדפנים, גם ב- IE6 ומעלה.

אחרים

[חזרה למעלה]

תמונות מסתגלות

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

FitText.Js

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

FitVid.Js

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

תמונות רשתית

Retina Images הוא פתרון JavaScript מדהים, אשר ישרת באופן אוטומטי @ 2X גדול, תמונות ברזולוציה גבוהה כאשר צפו על המסך הרשתית. כל מה שאתה צריך לעשות הוא לשים גרסה ברזולוציה גבוהה של כל תמונה אחת, והיא תנהל את השאר.

חלקה תמונה רשת תגובה

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

SlabText

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

זרב -

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

קטגוריה

Categorizr הוא סקריפט PHP קטן מאוד, מספק למבקרים שלך עם חוויית אינטרנט ממוקדת יותר. הוא יעזור לך לספק עיצובים ספציפיים למכשיר עבור Tablet, TV, Mobile או Desktop.

סימניה

האפשרות 'שאילתת שאילתה של מדיה' מציגה את הגודל של שדה התצוגה הנוכחי ואת שאילתת המדיה שנורתה עבורו.

מחשבון תגובה

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

השבוע הבא

בשבוע השני של הסדרה הזו, אנחנו יהיה brigning לך הדרכות כי באמת יכניסו אותך לתוך עיצוב אינטרנט מגיב (RWD).

אל תחמיצו את זה.