1. 74% Less fugly
The Making of Epicenter
by Romans Malinovskis, Agile Technologies
2. 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.
3. About Agile
‣ We develop web software for businesses
✓ Online financial, 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
17. 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
20. 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
21. Sorting out fonts
‣ Lowercase font is better in our case, because it simply
looks better.
31. Creating a Style
‣ Expand the idea behind a logo
✓ Different contexts and backgrounds
✓ Different situations
✓ Smaller logo
✓ Event pass design
✓ Business cards
43. Now to the main site
‣ Nailing down requirements
✓ dependencies, entities, constraints
✓ use scenarios
‣ Merging with our concepts
✓ Colours
✓ Circular shape
✓ Feel
56. 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
60. 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
61. 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 AJAXified articles
62. 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
64. 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
66. 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
67. Text flow
‣ Revisetext entered by client. Fix spaces between
paragraphs. Make everything consistent
‣ Position images
‣ Add panorama image
‣ Add Google maps
‣ Add Booking form
68. 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
69. 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
