We have recently revamp the Youth Expedition Project. Check it out!
Before
![]()
After
You are currently browsing the archives for the Web Design category.
We have recently revamp the Youth Expedition Project. Check it out!
Before
![]()
After
One thing that we have always fail to do is to showcase our clients website before and after the redesign work. We start with Marketing Institute of Singapore:-
Marketing Institute of Singapore
Before
![]()
After
![]()
Toshiba Singapore Pte Ltd
Before
![]()
After
A few months back, after releasing this current website, we received an email from Sandu, the publisher of the Almanac of Asia-Pacific Design who invited us to submit some of our works to be featured in their upcoming second volume of the publication. We have just got an email from Sandu a few weeks back to inform us that our works have been chosen and as a selected contributor, we would be getting a free set of the publication. How cool is that! We are extremely impressed by the quality of the publication and the featured works by our counterpart, and feel very proud indeed to be part of this great group of designers and agencies. Thank you Sandu!
The merit of semantic markup and web standards for websites cannot be over-emphasized. While it is fairly obvious why this can vastly benefit website design, few realise that web applications can gain the most out of this potent mix.
For starters, the separation of content and presentation means that developers and designers can play well together. When the developers take effort to output XHTML code in a semantic way, giving meaning to the page content, the designers can easily take this away and apply presentation styles to format and control how each part of the pages get rendered. Gone are the days when table or list formatting need to be hard-coded or couple tightly to the application code. By strictly producing content in terms of what they signify (Is that a data table? Or is that best perceived as a list?), developers can defer presentation decisions until the designers can work on them. This also opens up possibilities for content on the page to be reused in a multitude of ways.
Another cool benefit is that different stylesheets can be developed to control how the application screens can be rendered on different media, such as on-screen or on paper. Much like the argument for websites, data and content displayed on these screens can be easily transformed or omitted depending on what’s needed on screen (such as fancy graphics and colours to demarcate areas) and the bare essentials for output destined for printing on black-and-white printers. Not to mention if access by mobile devices are also on the plate, but you get the picture.
In fact, we have been doing this for a while for our own web applications, and this has smoothen our development process where the application screens can be easily skinned to a new look or to blend with existing branding. You can get the screens rendered to a format suitable for print without too much effort (contrast with the traditional way of coding up additional “printer-friendly” scripts). All in all, this method of developing web applications has made it flexible for developers and designers to focus on what they do best and allow for clear separation of tasks. For the target users, what they benefit most is better experience that comes with smaller downloads (verbose presentation rules are left out of the content codes) and better looking screens. What’s not to love about this?
With the new look, we decided we also wanted to change the tone of the website. We wanted the website to not only showcase our services, but also to lend a human voice to the website. And hence, this blog was born.
So how has blogging helped us so far? Well, this blog is still very young, but already we can see some of the benefits that blogging can bring. Case in point, one of the earlier posts about the annoying “border” around embedded Flash objects has gotten itself bookmarked by many fellow surfers. While we were not the direct source of the solution (the credit all goes to Mix-FX) we are glad that we are adding some value to the solution, by pointing people in the right direction while we document our experience in dealing with the same problems.
Blogging can really add much-needed human touch to the website. We feel that it can be beneficial to businesses as the blog creates an informal platform for voicing your opinions on current trends and observations. This is extremely helpful in today’s climate where everything moves at top speed, so the blog can keep your website as up to date as you can possibly keep. Customers, both prospective and existing ones, will be able to see a different (hopefully positive) side of the people behind the company.
For every website design or redesign, we not only afford tremendous efforts in coming up with bolder and more refreshing looks, we also explore how best to make use of new features and technologies to better the user experience. With all the hype going around about Ajax , we knew we had to look at Ajax seriously for our new website revamp. However, being our usual practical selves, we always made sure the use of new cool features, such as Ajax, is justified. Otherwise, the coolest features will still get thrown out the window if we cannot justify that the benefits are well worth the efforts.
So, instead of drowning the entire website in Ajax, we knew we would be better off focusing our efforts on the one section that would make the most sense using Ajax. We immediately saw that our Portfolio section was high on the list of being the most likely candidate to benefit from the Ajax feature. We decided that we could use Ajax to update parts of the Portfolio page without refreshing the entire page. This meant that our visitors will be able to enjoy a more seamless experience while browsing through our sample works. Hovering over the links for the projects, a nice little tooltip appears, drawing information through Ajax to display a thumbnail of the screenshot alongside bite-sized information. Clicking on the links, the larger screenshot and project details get retrieved, again via Ajax, and displayed in the main area. The benefits brought about by Ajax is a much more responsive page than using the traditional method of reloading entire pages.
One of the biggest motivation behind this new site design is to make our website more compliant to web standards. And among them, making the site XHTML and CSS compliant are at the top of the list.
Going the CSS way proves to bring along a pack of benefits. First of all, the separation of content and presentation styles meant that we are no longer burdened with nasty “hack-together” codes. All the content and structure get marked up in XHTML while the visual styles and font formatting are left in separate CSS files. On the one hand, this translates to much better way to maintain the website, on the other hand, we open up possibilities to serve up the exact same content and structure in different formats.
A good example would be to view a print preview of our pages. We have not gotten around to working much on those stylesheets, but from the print preview, you will see that certain content (like the navigation menus) of the original page get stripped away from the print version, and the graphical headings get rendered in text form instead. What we have here, at not much extra costs, is a “printer-friendly” website. Gone are the days when we need to have a “printer-friendly” link to dynamically generate pages that were fit for printing. Beyond printing, we can also have stylesheets for mobile devices, so visitors using their smartphones or PDAs will still be able to view the pages, without having to download the big fat graphics that are really targetted at desktop users.
Well, recently Microsoft lost a legal battle with a patent holder about the way IE is going to display objects and embeds in web pages. Those who have Flash, QuickTime and etc on their website suddenly find that their visitors need to activate the plugin before IE start playing them. Especially those who uses Flash for their navigational, their user need to activate the Flash before the navigational work. This is starting to be such a pain but I’ve found a way to solve this problem. To fix the problem, please follow these steps:
Just below the last <object> in your HTML page, insert the following Javascript:
<script type="text/javascript" src="fixit.js"></script>
Open a new document in Notepad or your HTML editor, and copy & paste the following content into it:
theObjects = document.getElementsByTagName("object");
for (var i = 0; i < theObjects.length; i++) {
theObjects[i].outerHTML = theObjects[i].outerHTML;
}
fixit.jsThanks to Mix-FX for the solution.
You’d have noticed that we have a new look. We are very excited with this latest update to our website, because apart from the obvious cosmetic upgrade, we have introduced and employed a host of new functionalities and technologies to make the website more informative and easier to use, among them, stuff like Ajax , CSS compliant layout and this brand new blog.
Over the next three posts, I will attempt to talk about these new exciting additions in more details, and highlight what went behind the design process when including them in this new website update. So, do stay tuned.
On top of the new look, we also have a slew of new features to introduce over time, including a client extranet for our customers and an email campaign management web application. We look forward to getting these out the door as soon as we can. We will post up more details as and when they become available, so we can share our excitement with you.