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

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

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

כמה מילים על bootstrap ומדוע בחרתי בו:

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

הדבר הראשון שעשינו על מנת להוזיל משמעותית את האתר הוא למצוא תבנית עיצוב מתאימה ואותה להתאים לפונקציונאליות הנדרשת (אותה גם שיפרנו על הדרך).

על כן רכשנו תבנית ברמה גבוהה הבנויה על קוד צד לקוח בטכנולוגיה המתקדמת ביותר: bootstrap, html5, css3.

כמה סודות קטנים של המקצוע:
את התבנית רכשנו מאתר תבניות בעלות 14 דולר (מהאתר themeforest.net)
בנוסף, לאתר המקורי היה מנוע חיפוש הבנוי על agax (שמראה את התוצאות תוך כדי הקלדה) והיה צורך להתאימו, עשינו זאת בעלות של 40 דולר על ידי מתכנת מאינדונזיה דרך האתר (elance.com).
כמובן שהיינו צריכים גם תמונות חדשות ובאנרים לאתר, עשינו זאת בעלות של כמה עשרות דולרים, דרך האתר photodune.net כרגיל.

והרי לפניכם התוצאה:

לפני, אתר מיושן

בניית אתר על בוטסטראפ

אחרי, אתר חדיש ומעוצב עם אלמנטים של html5 על בוטסטראפ

בניית אתר אינטרנט על בוטסטראפ - אחרי

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

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

מאמרים נוספים שאולי יעניינו אותך: