73 Less Fugly Epicenter

74% Less fugly The Making of Epicenter by Romans Malinovskis, Agile Technologies

About me ‣ Started computers at age of 10, in 1991 ‣ Developing commercial software since 1995 ‣ In Web applications since 1998 ‣ Started Web Developer team in 2003 ‣ Incorporated in Ireland in 2007 My role in Agile: ‣ Architect SaaS application and Web interfaces.

About Agile ‣ We develop web software for businesses ✓ Online ﬁnancial, accounting system, SaaS ✓ Client Self-service portals ✓ Integration with backend software ‣ We do not sell Web Design ✓ but we know a lot about it ✓ stunning design is a must for web software

Fugly vs not fugly How big is the difference?

loads fast graphics's nice content is good colours navigation google friendly works in all browsers ..not only on PC

50 25 75 0 100 Fugly

50 25 75 0 100 Fugly TODO: ﬁx next year

Name ‣ Use a name with a meaning: ‣ epicenter ✓ ground shaking ✓ volcano ✓ so many people that ground shakes. ✓ accumulate stuff and then erupts in the instant, reshapes the ground

he just sent me this.. he likes volcano.

Designer’s response ‣ “epicenter” deﬁnition ✓ The point of the earth's surface directly above the focus of an earthquake.

Customer is always wrong... ‣ Do you tell your dentist how to do his work? ‣ Why would you tell designer how to do his work? ✓ stops creativity and innovation ✓ subjective opinion of few individuals ✓ no research or study ✓ often based on competition ✓ the missing link

Sorting out fonts ‣ Lowercase font is better in our case, because it simply looks better.

And the winner is ‣ Custom font “Thonburi”

Customising our font ‣ we need equal letter spaces and to ﬁx shape

Creating symbolism: ‣ Scale font down so that second “e” would be in centre and with highest contrast

Explanation

Variations

More associations

Add black

Creating a Style ‣ Expand the idea behind a logo ✓ Different contexts and backgrounds ✓ Different situations ✓ Smaller logo ✓ Event pass design ✓ Business cards

Picking background

Environment testing

Business Cards

Event pass

Finally - on the web

Newsletters ‣ Our task is to collect people e-mails for newsletter ‣ However also try to get feedback from them

‣ Save email ‣ and through jQuery transition ‣ askfor extra details

Browser Compatibility ‣ Standard compliant ✓ Firefox ✓ Webkit (Safari, Chrome) ‣ Compliant but looking uglier ✓ Opera ‣ Compliant to it’s own standards ✓ IE6, IE7

Testing ‣ Button clicks during transition ‣ SQL injection ‣ Stress-testing

Back-end

Now to the main site ‣ Nailing down requirements ✓ dependencies, entities, constraints ✓ use scenarios ‣ Merging with our concepts ✓ Colours ✓ Circular shape ✓ Feel

First Concept

Attention to detail

Client interaction ‣ Do not show previews to client ✓ gets client involved too early ✓ pointing out known ﬂaws ✓ change of direction

Problem ‣ Where should we put context?

Solution ‣ two styles - combined

And the bottom part

Dynamics ‣ Multi-page navigation ‣ Dynamic / AJAX

Where to put speakers? ‣ Not enough space...

Finalised design

Full-text pages

Backend (meanwhile)

Backend ‣ Structures for sessions, speakers, days, time schedule ‣ Dynamic generation of all pages ‣ Photo management ‣ Plaintext editing for some texts ‣ Rich-text editing for other content

Backend

Coding ‣ Writing in PHP5 ‣ Using Agile Toolkit 3 ‣ Integrating with templates ‣ Implementing non-javascript verison ‣ Working on closed domain

Coding

Resulting PHP code ‣ Admin ✓ Approx. 250 lines of code (excluding libraries) ‣ Front-end ✓ Approx 400 lines of code ✓ Ticket form: 50 lines ✓ Widgets for map and panorama view ✓ 600 lines of JavaScript

Google friendliness ‣ Basic SEO principles ✓ If you don’t promote your website, it won’t be ranked ✓ Make way for Search engines ✓ Direct links to AJAXiﬁed articles

AJAX + Google ‣ <a id=”link” href=”/otherpage.html”>..</a> ‣ $(‘#link’).click(function(ev){ ev.preventDefault(); .. }); ✓ Links works properly on browsers without JS ✓ Links work fancy with JS browsers ✓ Google ignores JS ✓ Direct links

AJAX vs Regular regular link ajax

Speakers tweet ‣ Show their 3 last tweet ‣ Refresh every few minutes ‣ Update dynamically ‣ Test for non-JS browsers ✓ (tweets disabled) ‣ Direct links and AJAX ‣ Highlight links and tags

Hand-drawn icons

Something Nifty ‣ We have to add something unique and cool ✓ Try1: Make icons go on circular trajectory and fade in ✓ Try2: Make logo bounce when clicked ✓ Try3: Shake logo when move mouse over ✓ Accidentally made all screen shake. Liked it. ✓ Bonus - 4th shake is more violent and makes icons fall ✓ Dropped icons can be found in “about” box. Later removed

Text ﬂow ‣ Revisetext entered by client. Fix spaces between paragraphs. Make everything consistent ‣ Position images ‣ Add panorama image ‣ Add Google maps ‣ Add Booking form

Booking form ‣ Javascript form - but message for no-JS browser ‣ Calculate prices, totals and discounts dynamically ‣ Offer gifts for 3-day pass ‣ Allow to add multiple visitors for same compnay ‣ Ability to remove visitors. Later disabled. ‣ Integrate with Pay-Pal ‣ Save data into database

Optimisation ‣ All browsers with at least 3% market share ‣ Check in older browsers, IE5, Firefox 1, Opera 6 ✓ Looked good in those until we did IE6 optimisation ‣ Disabled stylesheets ‣ Disabled images ‣ Disabled JavaScripts

No images - still readable

Eircom.ie with no images

no js, no img, no css

Stress-testing ‣ Main page: 90 requests / sec, no caches or optimisation ‣ Over 100 req/sec on other pages ‣ Eircom main page: 1000 requests / sec (cached) ‣ Eircom article page: 10 req / sec ‣ Wordpress: 20 req / sec ‣ Twitter: 3 req / sec

Hosting ‣ Amazon AWS, E2, Europe ‣ Located in Dublin ‣ 25ms latency from Eircom DSL ‣ www.eircom.net latency from Eircom DSL - 30ms ‣ hosting365: 25ms latency

Hosting ‣ Gentoo Linux, 32-bit, (Xen) ‣ Dual 2.33 Mhz CPU ‣ Apache 2.2, PHP 5.2 ‣ nginx ‣ MySQL 5.0 ‣ Security enhancements

Total work ‣ 25-30 man-days (Total) ‣3 people in team

Our opportunity ‣ Try new and experimental things ‣ Collect data through google analytics ‣ Portfolio ‣ Test framework features

The Result 50 25 75 0 100 Fugly-o-meter

73% less fugly ‣ Time for questions... ‣ Romans Malinovskis

http://gita.agiletech.ie	36
http://epicenter.ie	7
http://www.linkedin.com	2
http://irishdev.com	1
http://www.slideshare.net	1
http://lf.demo.agiletech.ie	1

73 Less Fugly Epicenter

by Romans Malinovskis

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 48

Statistics