Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 176 lines (98 sloc) 9.165 kb
c3a7d750 »
2012-12-05 Site updated at 2012-12-05 04:19:32 UTC
1
2 <!doctype html>
3 <!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <title>Ministry of Education gets a slick new website | Divya Manian</title>
8 <meta name="author" content="Divya Manian">
9
10 <meta name="description" content="Ministry of Education, Singapore (MOE) has got a slick new look - and proved that government websites and aesthetic usable designs, CAN go hand in &hellip;">
11
12
13 <meta name="viewport" content="width=device-width, initial-scale=1">
14
15
16 <link rel="canonical" href="http://nimbupani.github.com/ministry-of-education-gets-slick-new-website.html">
17 <link href="/stylesheets/screen.css" rel="stylesheet">
18 <link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
19 <link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
20
21 </head>
22
23
24 <body >
25 <div class="container">
26 <div class="content">
27 <header role="banner"> <h1><a href="/">Divya Manian</a></h1>
28
29 <h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
30
31 </header>
32 <nav class="sitenav"><a href="/">Home</a>
33 <a href="/archives">Archives</a>
34 <a href="/about.html">About</a>
a4c458e4 »
2013-05-10 Site updated at 2013-05-10 20:53:38 UTC
35 </nav>
c3a7d750 »
2012-12-05 Site updated at 2012-12-05 04:19:32 UTC
36
37
38
39
40
41
42
43
44 <article>
45 <nav class="article">
46
47 <a class="previous" href="/we-think-being-hippie.html" title="We Think - Being a Hippie">&#x276C;</a>
48
49
50 <a class="next" href="/illustration-friday-fail.html" title="Illustration Friday - Fail">&#x276D;</a>
51
52
53
54 </nav>
55 <header>
56
57
58
59
60
61
62
5310a1e0 »
2013-12-12 Site updated at 2013-12-12 13:59:18 UTC
63 <time datetime="2008-04-05T00:00:00+05:30" pubdate><span class='month'>Apr</span> <span class='day'>05</span> <span class='year'>2008</span></time>
c3a7d750 »
2012-12-05 Site updated at 2012-12-05 04:19:32 UTC
64
65 <h1 class="entry-title"><a href="/ministry-of-education-gets-slick-new-website.html">Ministry of Education gets a slick new website</a></h1>
66
67
68
69
70 </header>
71 <div class="entry-content"><p><a href="http://www.moe.edu.sg">Ministry of Education, Singapore (MOE) has got a slick new look</a> - and proved that government websites and aesthetic usable designs, CAN go hand in hand. MoE&#8217;s redesign now reminds me of how a government service should be: &#8220;Integrity. Service. Excellence.&#8221; (Singapore Government&#8217;s slogan). To know how bad (or good) a government website can be, lets compare it with the <a href="http://www.mica.gov.sg/">website of the Ministry of Information, Communication &amp; the Arts (MICA)</a></p>
72
73 <p>Here is how they both look &#8220;above the fold&#8221;:
74 <img src="/blog/files/moevsmica.gif" alt="MOE Vs. MICA websites" /></p>
75
76 <p>Clearly, the use of subtle cues in the <abbr title="Ministry of Education, Singapore">MOE</abbr>&#8217;s redesign draws the user to the central changing content about what is the latest news in MOE. Other subtle use of colors enable the user to find links when required.</p>
77
78 <p><abbr title="Ministry of Education, Singapore">MOE</abbr> also uses microformats for the organizational structure which is quite neat. I think MOE website must be the first government website to validate <a href="http://validator.w3.org/check?uri=www.moe.edu.sg&charset=%28detect+automatically%29&doctype=Inline&group=0">XHTML 1.0 Strict</a> and <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.moe.edu.sg&profile=css21&usermedium=all&warning=1&lang=en">CSS</a>. Did I mention it is eminently accessible without any spacer.gifs?</p>
79
80 <p>A look at the footers of <abbr title="Ministry of Information, Communication &amp; the Arts">MICA</abbr> and <abbr title="Ministry of Education, Singapore">MOE</abbr> reveal that due thinking has gone into that as well in the <abbr title="Ministry of Education, Singapore">MOE</abbr> website:</p>
81
82 <p><img src="/blog/files/moevsmicafooter.gif" alt="MOE Vs. MICA website footers" /></p>
83
84 <p>However, there are a few things I would like in the new website:</p>
85
86 <ol>
87 <li>
88 It is not clear which category or type the current page belongs to. Perhaps the menu item can be highlighted if it any of its child links are clicked.
89 </li>
90 <li>
91 Breadcrumbs seem to be text only. It would be great if they are links too.
92 </li>
93 </ol>
94
95
96 <p>I think it is best that it is not incorporating the traditional system of a simple &#8220;poll&#8221; (found in all Singapore government websites) which is not enough to measure the quality of any website.</p>
97
98 <p>Overall, I think it is a great step forward for Singapore government websites. Of course, I think some small changes might be needed from the perspective of usability but that is just to make the already enhanced experience even better! Way to go <abbr title="Ministry of Education, Singapore">MOE</abbr>!</p>
99 </div>
100
101 <footer>
102 <p class="meta">This post was posted by
103
104
105 <a href="/about.html">Divya Manian</a>
106 on
107
108
109
110
111
112
5310a1e0 »
2013-12-12 Site updated at 2013-12-12 13:59:18 UTC
113 <time datetime="2008-04-05T00:00:00+05:30" pubdate><span class='month'>Apr</span> <span class='day'>05</span> <span class='year'>2008</span></time> in
c3a7d750 »
2012-12-05 Site updated at 2012-12-05 04:19:32 UTC
114
115 . If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2008-04-05-ministry-of-education-gets-slick-new-website.md">please send a pull request</a>.
116 </p>
117 </footer>
118 </article>
119
120 <section>
121 <h1>Comments</h1>
122 <div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
123 </div>
124 </section>
125
a4c458e4 »
2013-05-10 Site updated at 2013-05-10 20:53:38 UTC
126
c3a7d750 »
2012-12-05 Site updated at 2012-12-05 04:19:32 UTC
127 </div>
128 </div>
129 <aside id="articles">
5310a1e0 »
2013-12-12 Site updated at 2013-12-12 13:59:18 UTC
130 <p><img class="avatar" src="http://a2.twimg.com/profile_images/1696865113/me_normal" height=48> <a href="http://twitter.com/divya">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
c3a7d750 »
2012-12-05 Site updated at 2012-12-05 04:19:32 UTC
131 <h2>Posts on Web Development</h2>
a4c458e4 »
2013-05-10 Site updated at 2013-05-10 20:53:38 UTC
132 <ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
c3a7d750 »
2012-12-05 Site updated at 2012-12-05 04:19:32 UTC
133 </aside>
134 <footer role="contentinfo"><p>
6c3ac344 »
2013-05-09 Site updated at 2013-05-10 00:34:01 UTC
135 Copy to your heart’s content 2013 - Divya Manian -
c3a7d750 »
2012-12-05 Site updated at 2012-12-05 04:19:32 UTC
136 <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
137 </p>
138
139
140 </footer>
141
142
143 <script type="text/javascript">
144 var disqus_shortname = 'nimbublog';
145 var disqus_developer = 1;
146
147
148 var disqus_url = 'http://nimbupani.com/ministry-of-education-gets-slick-new-website.html';
149 var disqus_identifier = 'http://nimbupani.com/ministry-of-education-gets-slick-new-website.html';
150
151
152
153
154 (function () {
155 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
156 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
157 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
158 }());
159 </script>
160
161
162 <script src="/javascripts/octopress.js"></script>
163
164 <script>
165 var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
166 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
167 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
168 s.parentNode.insertBefore(g,s)}(document,'script'));
169 </script>
170
171
172
173
174 </body>
175 </html>
Something went wrong with that request. Please try again.