Skip Navigation LinksHome / Articles / View Article

Completit.com - the challenges behind building a corporate website in Silverlight

+ Add to SilverlightShow Favorites
9 comments   /   posted by Svetla Stoycheva on Apr 16, 2010
(20 votes)
Categories: White Papers

CompletIT – the company behind SilverlightShow – has recently launched its new corporate website, done entirely in Silverlight. In this case study, CompletIT CTO Emil Stoychev and Development Lead Miroslav Miroslavov reveal the challenges faced during the management and development of this Silverlight project.  

Company Profile

Company name: CompletIT
Website: http://www.completit.com/
Industry: Software Development, Consultations, Trainings
Brief intro to company: CompletIT is a privately owned company specialized in Silverlight software development, Silverlight training and consulting services. Founded in 2006, the company has successfully delivered more than 30 customer projects, ranging from small business applications to large enterprise solutions. CompletIT was selected as Microsoft Featured Silverlight Partner for March 2010, and is a Microsoft Certified Gold Partner. 

Project Overview

Project goals and key functionalities

The main goal of the project was to show what CompletIT can do with Silverlight without saying a word. We wanted to demonstrate to our website visitors (who are our current or potential customers) what can be achieved with Silverlight, what a powerful technology it is, what level of interactivity may be achieved with it, how the user experience may be improved by using Silverlight. Among the key functionalities in the project are flying 3D objects, interactive navigation with some object flying in the clouds, animated page flipping, animated 360˚ navigation flip, 3D world in which you can move.

Project limitations - technologies to be used, time, resources, etc.

We are focused on Silverlight so that technology was a must. It was hard to estimate the project duration as the application was too futuristic and nothing like what we've been working on before. We decided on a fairly optimistic timeframe for completion of the project, and only because of the commitment and experience of the whole team we managed to meet it.

Silverlight features used in this project

  • Animations:
    • Build-in animations API based on Storyboards
    • Custom animations based on CompositionTarget.Rendering
    • Custom animations based on DispatcherTimer
    • Sprite animations
  • WriteableBitmap API for performance optimizations
  • 3D Projection API
  • Render Transforms API
    • ScaleTransform
    • TranslateTransform
    • RotateTransform
    • SkewTransform
  • Math formulas
  • Mouse events API
  • Custom controls and templates
  • WCF - Silverlight enabled services 
  • Third-party Silverlight control

Other technologies used 

WCF services, Sitefinity CMS

Project snapshots - before / after

 

Problems Faced and Solutions

One of the hardest problems was "How to make smoke effect?"
We've tried a lot of ideas and read almost everything on the net about "how to simulate smoke", but all of them had problems and they weren't exactly what we needed. But finally we came up with the solution on our own. We've created a Sprite-like animation with preset frames, some custom control logic and finally - we had a great smoking main menu!

Another huge problem was "How to make the whole application deep-linkable, navigateable and fully integrated with browsers?"
We needed to be integrated with the browser, but also the pages had to navigate to each other using animation. We thought about using TransitioningContentControl from the Silverlight Toolkit, but instead of control we needed to transition between pages. And that's how we came up with solution. Now we have nice transitions and animations while navigating back and forward.

The whole look and feel of the site is amazing. But how can all of this work in the browser, and perform well enough?
Performance was the hardest thing to deal with. We read a lot of blogs and articles, watched a lot of videos from the biggest conferences. Finally, we summarized all performance tips and tricks and implemented most of them. We also created some custom animation logic to achieve better performance. We ended up with a very well-performing website (considering all these nice animations).
Of course all the features like 3D world and the animations in it, flying and floating things were also interesting problems. But with the very powerful Silverlight APIs, we've been able to implement them with ease.

Conclusions

We think we managed to achieve the initial goals of the project, because we received a lot of positive feedback, a lot of compliments for our work. There aren't many Silverlight based application on the web that incorporate so many animations and interactivity. The final performance that we achieved is more than pleasant - we got around 30% CPU usage which talks both for the platform and for the quality of our applications. For comparison, most of the DeepZoom based applications use more than 70% of CPU.

People like interactivity, animations, weird design ideas and we think Silverlight is more than appropriate to build that kind of stuff. For future projects we would definitely bet on great user experience and interactivity.

 

Related Articles:

 

Share


Comments

Comments RSS RSS
  • RE: Completit.com - the challenges behind building a corporate website in Silverlight  

    posted by Jonathan van de Veen on Apr 21, 2010 09:19
    I wonder how you made sure this works with any search engines / spiders.
  • RE: Completit.com - the challenges behind building a corporate website in Silverlight  

    posted by emil on Apr 21, 2010 11:20
    Hi Jonathan,

    We are still working on this and we will publish an article explaining how it works. Starting this week, we will publish articles on how we did all features - animations, 3D, navigation, SEO, etc.

    We use a WCF service to pull all the content you see on the web site so we will make it visible in the HTML as well. You can watch this session from MIX10 to get an idea on how SEO works in Silverlight - http://live.visitmix.com/MIX10/Sessions/CL50

    Emil
  • RE: Completit.com - the challenges behind building a corporate website in Silverlight  

    posted by Aaron on Apr 21, 2010 16:53
    Very nice work.  Would you be willing to share your compiled list of Silverlight performance tips and tricks?  Thanks!
  • RE: Completit.com - the challenges behind building a corporate website in Silverlight  

    posted by emil on Apr 21, 2010 17:28
    Absolutely! Tomorrow we will publish our first article from the series of how to build such compelling user experience and still provide a good performance. So subscribe for our RSS and stay tuned.
  • RE: Completit.com - the challenges behind building a corporate website in Silverlight  

    posted by emil on Apr 22, 2010 11:19
  • RE: Completit.com - the challenges behind building a corporate website in Silverlight  

    posted by Reynaldo on Jun 16, 2010 17:33
    I agree is not a recipe to cook. Is a creative process and the mains ingredients is a goal and time to do it. I´m passing for the same process x 2. Some times a single line of code takes days. And tests takes until the deployment most times. Always optimizing and testing, seeking code... And Yes MIx session are great!!! a lot ideas and smart people in there. Greetings
  • RE: Completit.com - the challenges behind building a corporate website in Silverlight  

    posted by fanboy on Jun 22, 2010 23:42
    40 sec load time - FAIL
  • RE: Completit.com - the challenges behind building a corporate website in Silverlight  

    posted by iiordanov on Jul 24, 2010 18:09
    fanboy, the load time if less now ;)
  • RE: Completit.com - the challenges behind building a corporate website in Silverlight  

    posted by EveOnline on Sep 01, 2010 02:42

    Awesome demo guys! I am fairly new to silverlight and I am in love with it. even though the load time is comparable to most sites using JQuery or aspnet AJAX libraries, the plus side is that Silverlight is waaaaaayyyy more powerful and no more javascript for me.

Add Comment

 
 

   
  
  
   
Please add 6 and 6 and type the answer here:

Watch the recording of the latest SilverlightShow webcast 'Running Silverlight Outside the Browser and with Elevated Trust'.
Join our next live webinar session by Braulio Diez - Sketchflow in Real Scenarios, on Sept 29th, 8am - 9am PDT.
Learn More | Sign Up | More Webinars by SilverlightShow (hide this)