Some Clients
 |
 |
 |
 |
 |
When creating a new website, the step that sits between design and programming is called frontend development. During this process the design (which is basically an image) is taken and cut into small pieces, which are then intelligently reassembled. The glue that holds them all together is called HTML, the language of the web. Together with CSS, it is responsible for displaying everything you see online.
Frontend development tends to be one of the most overlooked aspects of creating content for the web. After all, who cares about the underlying code if things look good, right?
When creating a new website, our attention is first concentrated on defining what it should accomplish and how things should behave and work. After those details are ironed out comes the exciting bit - the design. We are all visual at our core, and looks play a huge role in how we perceive things and are perceived by others. Both these phases present interest to a site owner because they have visible results and allow him to get involved in the process.
But what about the code that will power everything, implementing the design and serving as the framework for the advanced site functions? Unfortunately frontend code doesn't get as much love or as much budget. It's a more hidden step that doesn't need much outside input and on the premise that users will never see what's underneath the hood, people tend to ignore the importance it has.
Good frontend code is hard to see. Things can look pretty good at a first glance but be an absolute mess at a code level. With that in mind, here are the top 5 qualities that a high quality frontend should have and how we do things here at Rawnet:
Ideally, what you see in the browser should perfectly mirror the design. The smallest details should be preserved and things should look and work exactly as the designer intended them to. If the designer has decided to use a spacing of 14 pixels for some elements, then 15 pixels is too much and 13 pixels is too little. It's no joke, designers often spend a lot of time polishing things at pixel level and their efforts should be rewarded by including those details in the final product.
It's also paramount that things look as good as possible in all supported browsers. This includes grade-A desktop browsers as well as some optimisations for mobile browsers. Needles to say, caring for all the browser quirks, especially the older ones is a very time consuming process but it ensures that all users have the best experience possible.
Like the engine of a racing car, every component of a high quality frontend is finely tuned and optimised for speed as much as possible. This takes additional time but it ensures that your website loads quick and performs well.
This involves employing a myriad of techniques, like writing clean, efficient HTML, compressing the images as much as possible while taking care to avoid degradation, minimising the number of HTTP requests the browser has to make to the server by using CSS sprites, combining scripts and other techniques, minifying big Javascript libraries or using a Content Delivery Network (CDN) to deliver them , and even writing efficient CSS. That's right, the way the CSS selectors are specified can have an impact on page rendering times, although negligible it can add up. Google even has a set of recommendations for writing efficient CSS.
When writing CSS we try to think of all the situations that might happen when the site owner starts making changes to the content. Beyond the basic stuff like "the box should extend to contain the text" and making sure the layout doesn't break, we look at the space between elements and make sure everything will display well.
We write standards compliant, semantic code not just because we're cool, but also because it greatly simplifies the process of maintaining the website. Every web designer has been through the ordeal of making changes to a badly written site, and it's not a fun experience. It adds a lot of unnecessary development time, hair pulling and frustration to what should have been a simple process.
When everything is where is should be and written how it should be, it is easy even for a different developer to pick up and make changes.
Javascript should be implemented in an unobtrusive way. The Javascript behaviours layer should be separated from the structural layer (HTML) and presentational layer (CSS), it should be coded in an efficient way and progressing enhancement should be used to accommodate browsers that don't support advanced Javascript features or users who have Javascript disabled.
Making sure your website is well polished and looking as good under the hood as it does on the outside can only bring you benefits in the long run. It will make your website load faster, perform better and be easily maintainable. And it can even help generate more buzz around your site and help establish your brand as a serious one, when people take a peek at the inner workings and like what they see.
It will also make you proud at the end of the day.
blog comments powered by Disqus |
|
|
|
|
We're social
© Rawnet 2009-2012