Front end development (FED) is the practice (or “art” as front end developers call it) of turning a website design into a fully functional website, like those you find on the internet. We will be covering the main aspects of FED and how they are best achieved.
Content
Content is king of all that appears on your web page. Sure you might have some really flash animations and pop-ups, but what your visitors are there to see is what you have to say and how you say it.
When we say content, what are we actually referring too? Content can be the text you write about a product, to the images and resources available for said product.
The key fundamentals to remember when creating your copy are;
• Spelling. The first mark of great content is correct spelling and grammar.
• Relevancy. Keeping your content relevant to its surroundings is a key in holding your visitors attention.
Search engines like new fresh content, so keeping yours new and interesting is a great SEO boost.
Markup
HTML (whether it be HTML5 or XHTML), is the building blocks of any website. It’s what you see when you right click and press “view source” in your browser and is vital to the operation of your website.
Well structured HTML is a core ingredient for search engines in that it the better the HTML, the easier a search engine can understand your content.
HTML5 is the new kid on the block in terms of markup languages. It is built on the existing HTML4 and XHTML standards, and continues (at time of writing) to be developed.
Style
CSS, or Cascading Style Sheets, are what control the “look and feel” of a website. Every element of style you find on a website, whether it is the colour or size of some text or the page’s background colour, is implemented by CSS.
CSS3 is the latest revision of CSS and brings greater ability to its users to style and work with HTML markup. Whilst browser support for CSS3 is increasing, older browsers such as Internet Explorer 6 (IE6) and Internet Explorer 7 (IE7) have either sporadic or non-existent support for these new technologies.
Cross browser, cross platform
There is a magnitude of web browsers currently in existence. The most common being;
• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari
• Opera
When developing websites it is important to take into account the fact that website’s react differently across many browsers, especially older iterations of said browsers. IE6 has been a particular issue for many years now, with such a large audience of users and being very outdated, the end could now be nigh for the once “revolutionary” browser. You can read more about the demise of IE6 in this blog post.
Performance
As with cars, everyone would rather drive a Ferrari rather than a Morris Minor (well most people would), such is true also with websites. Nobody wants to be hanging around waiting for a web page to load or have it backfiring every 5 seconds, and with increased broadband speeds there really is no excuse.
With this in mind developers are now becoming more and more aware of every kilobyte they use on their websites. Ensuring that websites load within a certain time frame is now becoming more than a medial task for developers.
Social
With the rise of Social Media over the last 10 years, the web has become as social as popping down to your local for a pint. The growth in popularity of networks such as Facebook, Twitter and LinkedIn has opened the doors of possibility for website owners to have their website and its content accessed by previously unreachable people and places.
Developing websites with this in mind has now become a must for many businesses, and with the ability to use “like” and “tweet” buttons, getting your website out to the masses has become that little bit easier.
Mobile
There has been a major uptake in the number of smart phone, tablet and other “on-the-go” devices in the last few years. This has in turn led to a massive increase in people viewing websites on mobile devices, and therein lays the need for website to be easily accessible on said devices.
There are many techniques for making a website accessible across the board, whether it is on a desktop PC or the latest smart phone. Ian Dunstan talks about these points in his blog post, “What is Responsive Design?”.