I am leaving work soon, going home to prepare for Web Direction North 08 in Vancouver next week. We are leaving tomorrow, transit in Amsterdam, 12 hours in the air, and a nice jet-lag. I am really looking forward to all the workshops and the people joining the conference. I am attending workshops with Jared Spool and Tara Hunt and Chris Messina (Designing Really Usable Websites, The Enterprise & Government in the 2.0 era: what’s next?)
This article is the first article of 30 in my series on Front-End Architecture. The goal with the articles is to document things I have never documented and share knowledge and experience to anyone that are interested in the architectural decisions made.
Before starting a big redesign you have to identify, quantify and gather data on almost everything that has anything to do with your front-end architecture. What I would do first is to read the requirement specification and business goals for the redesign of the web you are working on. I have seen a lot of requirement specifications and to be honest, I have yet to see a requirement specification that puts front-end requirements clearly. If the requirement specification fails to specify requirements that affect the front-end architecture, I stress the value of creating a pre-study focusing on all the aspects you may think of. Below I list some of the areas I think is crucial to address in a front-end pre-study.
How many daily visitors can you expect? What type of clients can you expect visiting your website, instead of looking at the current statistics, look at trends over a period of at least half a year, this way you are sure you will not miss any significant data hiding in the stats.
If you are redesigning your website, measure everything you can measure and if you are building from scratch, look at competitors as guideline to what you have to achieve at least. Things I would measure is
• HTTP-requests
• Response times
• Render time
• Download size
There are a lot of online tools you could use for measuring stuff like this. Please visit WebSiteOptimization.com
Make sure your knowledge is up to date. If you where involved in a bigger redesign 3 years ago, it is probable that there is new knowledge and design paradigms. We had a huge change of design paradigm 4-5 years ago, when the whole industry moved from table-based to css-based design. We are now seeing changes in how we use scripting in webpages with ajax, mashups and external apis. There is no need implementing new stuff, just because you can, but it is important that you expand your knowledge. You never know when you will need that knowledge.
If you need answers to a lot of questions regarding the user interface, there is no such thing as speaking directly to the customers. If you have access to surveys or usability studies, I suggest reading them closely and try to extract everything you think is of importance for the front-end architecture.
Is there any mockups on the upcoming website? Often designers design a mockup for start-up meetings of bigger redesign projects. These designs may say something on what to expect of the design. Is there anything in the design that you think will impose a problem for you?
Depending on your website, the time-frame for the redesign project and other parameters a pre-study may analyze a lot of different aspects of potential issues and possibilities for the front-end architecture.
Typical deliverables from a pre-study may be recommendation on technical platform, guidelines for the user interface, prototypes of certain business processes, proof-of-concepts on technical solutions.
Next article will focus on the Front-End Platform, and we start with the server side part of the front-end architecture.
This article is the first in a series of 30 articles dedicated to Front-End Architecture. I have been working with front-end related tasks for more than 10 years and realized that I haven’t documented my findings very well. This project will change that.
In this series of article the focus will be general and the use-case, or scenario, is a bigger redesign (hardware, software, design and user interactions) of a high traffic web. The issues raised and answered in these articles is applicable on projects where everything is made from scratch as well. The goal is to put a lot of my findings and experience on paper and to share the knowledge I have that may help someone facing architectural decisions within the front-end area.
The first question in this series of articles is What exactly do you mean when you talk about Front-End Architecture?. There is no simple answer to the question, but I will try to answer it here in brief and in the series of articles in detail.
I believe that Front-End Architecture deals with everything that is in some way user-oriented. It is not as simple, as to say that front end architecture is the presentation layer in an application. A lot of times user-oriented tasks has effects on a big part of the system you are building. In my profession I have always tried to focus on things within and above the business layer. A lot of decisions made in the front-end may effect data models and choice of server software and such things, but I try to stay out of those areas, as I am certain that there are people enjoying those issues and does it better without my involvement.
Things I have worked with in my profession as Front-End Architect:
- Business logic in Java
- Business logic in VB.NET
- Business logic in PHP
- GUI logic in JavaScript
- GUI logic in Java
- Definition of data models for XML or JSON transfer
- Definition of API:s for 3rd party developers
- Analysis of MVC-frameworks
- Analysis of Presentation Engines
- Analysis of Server Side Libraries
- Analysis of Client Side Libraries
- Analysis of Clients
- Analysis of Mobile Clients
- Analysis of Competitors
- CMS Analysis
- Performance Reviews
- Documentation
- SEO
- I18n
- L10n
- Troubleshooting
- Payments
- User Interaction Design
- Use Case Definitions
- Mockups
- Prototypes
- Requirement Specifications
- Requirement Analysis
- Research
- Usability Studies
- Statistics
- A/B Testing
- Business Processes
- Conversion Rates
- CSS
- Ajax
- Semantic Markup
- Microformats
- Affiliate Integration
- Cowboy (NS4)
- Sumo-wrestler (IE)
- Kamikaze Pilot (Maintain JavaScript by programmers with too much ego and too little knowledge)
The list may grow during the articles. From the next article we will start focusing on some of the areas listed above. The first article will be on “Front-End Architecture: The Pre-Study”.