Mobile Responsive Twitter Bootstrap

A successful website is not all about the looks

Now that I am gaining a lot more experience with web development I am slowly covering over all the factors that can affect or assist the performance & exposure of a website to make it a successful website. Typically, a client who doesn’t know much about website but requires a website to be built will only focus on the look of the website and as important as that is, it shouldn’t be the number 1 priority. Once it is successful such that you have the visitors coming on to your and the image of your website & brand is important then you may splash out on a super funky website.

Chaophraya Website
http://chaophraya.co.uk/

In the past

Back in the day, it used to be super cool to have a flash based website because HTML could never perform to the level flash could. Users didn’t mind installing the good old Macromedia flash plugin just to see how the website looked. Flash developers probably made more money than web developers at the time. Flash websites never used to be an issue but with the web vastly changing and people wanting to make more use of the web, flash started to lose its appeal. People wanted to find information about anything by simply typing a keyword. Over time companies such as Google came in and started to have robots which crawled the web to index the web and the robots weren’t at all subjective to design so they didn’t care about what a website looked like, they just wanted to read the text on it and save it. Unfortunately, anything flash isn’t something that could be read by robots which means if you are using a search engine to find a particular website but that’s built with flash, you probably wouldn’t find it!

Flash to HTML5, CSS & jQuery

Nowadays

In this day of age, with the web having developed both aesthetically with the introduction of CSS and HTML and semantically to provide more meaning to data, a successful website is all about formatting things correctly and using tips and tricks to make your website more meaningful to services such as Google, Bing, Twitter, Facebook etc. This has now rendered services like Flash useless, hence why its not included in the latest Android devices and Apple iOS devices. That said, it does require a lot of computing power and up to date flash player software’s installed which is almost never perfect anymore.

The mobile phone version

A website would also be good if it had a mobile version and this is usually done by designers basing the design on a responsive system – one which adapts to the screen size or the real estate available. After all, many people now browse the web using their mobile phones so compatibility and usability is pretty important – a user doesn’t really want to scroll sideways. A design which has all sorts of bells and whistles is likely to be difficult to make responsive so a good simple design is probably the best way to go forward.

Mobile Responsive Twitter Bootstrap

Performance

Many things that we used to do on flash can be done with jQuery. Some things that can be done on jQuery can now be done using CSS3 such as animations and transformations. jQuery can be quite computationally intensive and for those viewing a website from a cheap netbook will not feel the true experience of the website that the website has to offer. jQuery animation on a phone might be even worse. With CSS3, the browser reads it as native code which executes very fast whereas jQuery is javascript which is an interpreted language and the browser can’t predict what the JavaScript is going to do next. Therefore the manner which jQuery works is procedural (one after the other). It’s difficult to explain the technicalities but a simple Google search of “CSS3 vs jQuery” would tell you why. As a client, it is difficult to understand how the designer intends for a piece of animation to work, or how the developer makes it work as the client just wants it to work one way or another but if you are reading this post and you do want some funky animation on your website, then I would ensure that you explore the possibilities of getting it done in the most efficient way in CSS3.

Social Media

“Every page needs to have a facebook like button, tweet button and that new +1 button” is what clients typically request when it comes to making their website social. Understandably, that is what the client sees on everyone’s websites and it’s what they would think constitutes to a website that has taken social media into account. Clients should really try and visualize how social media would get people to visit their website and ways of how visitors can expose their website. It’s free marketing and can be very effective if you know how to pull the strings. Obviously content goes a long way but to get someone to read an article/page on your website requires something to entice them to do so, and this usually comes in the form of an image and description/snippet of the article.

So the social media giants such as facebook and twitter have their own semantic syntax Open Graph and Twitter Cards respectively that also need to be included so it shows the snippet of your article on someone’s facebook wall or twitter timeline. Now with facebook and twitter continuously changing from the developers point of view, what I am writing now might not be the case in a few years time. Nevertheless, it is a factor I would point out to consider.

Twitter Card Example

As you can see, anyone who posts any of my articles on their twitter account will not only get the tweet, but also a small introduction and image to the article with an option to follow the author. Facebook works in a similar fashion.

Conclusion

To conclude, it takes a combination of things to make a website a successful website:

  • Clean and responsive layout
  • Efficient and necessary animations
  • SEO (Search Engine Optimisation) friendly
  • SMO (Social Media Optimisation)
  • Not to use flash

NB. I am not saying my website is a successful site.


Posted

in

,

by

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.