For years, I had wanted to refresh a website but the opportunity had never quite come up until a recent conversation with a new manager changed everything. During our talk, the topic of making our company website more lively came up. That was the spark I needed.
🛠️ The Initial State of the Website
Before the redesign, the site was nothing more than a news feed. It lacked even the most basic sections, no “About Us”, no “Mission” or “Vision” and no activities or galleries. It was like a hollow shell, offering nothing about who we were or what we did.
🎨 Planning a New Look
I started listing ideas:
A brand-new homepage
Fresh images
Photo or video documentation of every activity
Bright and colourful elements
Extra features like games and interactive questions
Eventually, I crafted a draft layout but it didn’t feel right. So, I reached out to a designer friend for advice and borrowed inspiration (and a bit of code) from other educational websites. The result was a site that truly matched what I had in mind.
🧩 Key Features and Implementation Details
🎯 Layout & Styling
I used a fixed-width, center-aligned layout to keep things tidy.
Replaced
reset.csswithsencss, which not only resets styles but also improves default tags.Included large background images getting their positioning right was challenging but worth the effort.
💡 SEO & Accessibility
Designed the layout using CSS + divs, Google-style.
Added a dynamic title generator to optimize each page’s title and meta descriptions.
Created news sliders using jQuery with both auto and manual transition modes.
📑 Content Enhancements
Added interactive boxes under news items to highlight interesting facts about the company.
Designed the layout to resemble a blog, with a footer split into four columns, each with topic-specific links.
Enabled full news viewing with links to previous and next items, along with share buttons.
📷 Media Integration
Used jQuery + PrettyPhoto to enhance the photo albums with a lightbox effect.
Uploaded all videos to a dedicated YouTube account, then displayed them on the site via an auto-generated table including title, date and embed code.
🗺️ Site Structure & Metadata
Designed a visually enhanced site map using a beautiful
sitemap.cssI found online.Created three types of sitemaps for Google:
sitemap.xml,picturemap.xmlandvideomap.xml.
📍 Functional Features
Added an interactive map to the contact page.
Broke down academic information into separate pages and linked them from both the homepage and a central "Academics" section.
Built an automated section for departments, dynamically detecting and displaying folders and files.
Added multi-language support users can switch languages with a single click and the preference persists after login.
✅ Reflections and Next Steps
It took a lot of time and effort but I received no negative feedback only appreciation. Looking ahead, I plan to add a virtual tour feature and even enable online reporting tools.
This project taught me that even with limited resources, creativity and persistence can deliver a professional and highly functional result.