Happy new week dear friend. Hope you enjoyed the weekend pretty well :). I have another awesome guest here today and, she is someone you might already know because, you probably have read her post here before. You will read more about her at the end of the post so, let me open the door for her to share with you what she have for you today.
Visuals are not what makes a masterpiece with HTML. A HTML website implies that SEO (Search Engine Optimization) is a factor, so you need to make it a masterpiece in that direction. Plus, a website is supposed to have a use, so how well your website provides a use is also going to work for or against you when making your masterpiece. Visual aesthetics are important, but so are things such as leading the eye, funneling and general functionality.
This article cannot provide you with all the tips you need in order to create your masterpiece, but you will find the ten tips below rather useful in achieving some of the masterpiece criteria.
1. Start internally with darn clean HTML code
Make a vow from the very beginning that you are going to write clean HTML code and that you are not going to mix it up with things such as Java and CSS. If you have to use them (which you probably will), then set them as external resources and use your HTML code to call to them. Have your HTML code call to the CSS near the top of the page of code so that your website will render/load a little quicker when it is read by a website browser.
2. Have it load faster than Clint Eastwood in Western movies
Remember that scene in the Good, the Bad and the Ugly, when Clint Eastwood had to rebuild and load his gun just before the three banditos crashed into his room. It was pretty fast, and there is nothing better than a masterpiece website that loads with just as much fire and speed. Do not confuse a masterpiece with something that takes forever to download. You may be tempted to add more pixels to your website than a UHDTV screen, but people are always going to hate it if it takes too long to load.
3. Let the eye lead itself
This means having a more natural design that does not force the eye to look in one place with loud graphics or moving parts. Allow the eye to settle on its own and then start leading it.
4. Design it to be incapable of taking affiliate adverts
Do you really want your masterpiece ruined by an advert for penis enlargements or anti-wrinkle creams that really work? I guess not.
5. Learn HTML5 protocols
They make website programming a little easier. They have advanced HTML a little more so that you do not have to write as much code in order to get the same (if not better) effects that you used to.
6. Work with other HTML designers and collaborate for a better design
Collaboration will often help you come up with a better website. It helps to stop the thing where a web designer gets stuck in his or her ways and starts to unintentionally create websites that are similar in a lot of respects. With a team you are able to collaborate and make far better websites as a result.
7. Close your HTML tags and use style sheets
You can avoid a lot of corruption and errors if you simply put closing tags at the end of HTML texts. Some of the coding protocols do not require it, but you should put them there anyway because you can guarantee that there will be some people’s computers where it is causing a problem.
When it comes to website text, use a style sheet in order to make it easier to read the text on the screen. It gives you more control over how the text is viewed on the screen.
8. Use comments, insert images and give dimensions to your images
In short, use the comments function in your HTML, as it helps you understand the intricacies of your HTML, and it does not hurt your loading time. You can use images with the <img> tab, and you can have the image come from your own host server, but do not forget that you can basically stream images from other URLs too. Also, always have a backup plan for if the image cannot be displayed or has errors.
Recommended Reading: How I Reduced My Bounce Rate From 70% to 1.26% Within 4Days
You may know this already, but give your images a specific height and width, even if it is the same as the width and height that you uploaded the image as. This helps your images to load up faster.
9. Use tables for some data and have no breakage spacing in HTML text
You can put your data into tabulated spreadsheets. They are not detrimental to your website unless you have thousands of lines of data in them, and even then there are ways of making it great.
When you write text within your HTML, you may want to show how the text does not have a break. You can do it with the <nbsp/> tag.
10. Don’t use templates
How could you not know this one? It is true that a website template is going to eliminate a lot of potential problems because it does some of the fundamental work for you. But, just like using a content management system program, you can never truly create a masterpiece if you have something as restrictive as a CMS or a template. You need to start from the very beginning with your design, or you run the risk of making a website that looks and acts just like all the others (which hardly makes it a masterpiece).
Hope you enjoyed this tutorial. Do you have any question on this at all? Please, feel free to ask it on the comment section.
Have a fabulous week 🙂
Philip Okechukwu says
These are really great tips, but i almost doubted the first tip owing to the fact that its rare to a clean html written code these days until i got your idea pinned out.
And the sixth tip also worth remembering because collective ideas makes any design distinct and outstanding.
Thanks for the tips.
Sonia Jackson says
Thank you for taking attention to this article and comments.
Harleena Singh says
Hi Sonia,
Good to see you back here at Theodor’s blog 🙂
Ah…I AM pretty scared of codes and anything related to it, so I honestly don’t know much about it, nor do I touch anything that’s related to codes! I do prefer the option of the ready-made kind of templates and choose those any day as compared to the codes, unless I know it works on someone’s site or it’s tried and tested.
Nevertheless, great tips for those who love codes and HTML – thanks for sharing these with us. Have a nice week ahead, both of you 🙂
Sonia Jackson says
Hi, thank you. I’m not professional in coding and I’m trying to learn and share this knowledge with others
Babanature says
Hello Sonia and good to see you here at Theodore’s blog 🙂
Seriously, i still wonder who takes their time to create HTML sites when CMS has made things a lot easy.
But seriously, i still remembered when i first created my first website, it was build on a standard html. As you said speed is everything when it comes to site building, nobody wants to hang around a slow blog.
Thanks for the lovely ost, do have a wonderful week ahead….
Sonia Jackson says
Thank you for commenting. I hope these tips will be helpful for you
Cassie says
Very informative indeed! Thank you for sharing this very useful post. I’ve learned something from this. Great post!
Sonia Jackson says
Thank you for commenting. I hope this article is useful for you.
Jane says
I’m all for a clean code! I hate it when the HTML is all mixed up and bloated – that certainly destroys the effectiveness of HTML.
Learning HTML5 protocols is absolutely necessary to catch up with the rest of the online world! Thanks for sharing!
Sonia Jackson says
Thank you. I appreciate your thoughts on this topic.
Ashish says
Hello,
Wow such an amazing post! I love coding related stuff and specially HTML and php part. The tips you’ve shared to create a master piece is really unique and informative.
Thanks for the share,
Sonia Jackson says
Hi, I hope these tips will help you to create your own masterpiece.
Perambur Kumar says
Awesome Post. I hate coding. I always love clean and neat fast loading template.
Too many codings really looks horrible. Nicely explained post about codings. Yes we must learn HTML5 to stay in the game.
Sonia Jackson says
Thank you. Good luck with coding)
Jijin Mohan says
Awesome piece of article! I really love your tips regarding the HTML and I love every article or something which are related to it. The article really helpful me to gain more info about creating masterpiece.
Cheers!
Sonia Jackson says
Hi, I’m glad to hear that you like what I think about this. I hope this article will be useful and helpful for you
Shiv Saroya says
Hi sonia
I think first time discuss these type of tips. These 10 Tips absoulutely right to Turning Ordinary Webcasts into Masterpieces.
Every tips are playing different role.
Itender Rawat says
Hello,
Since most of new design over the web are using HTML5 we can do lot more using it and we can create awesome master piece using HTML5.
Thanks for the tips!
Catherine Marshall says
One of my biggest pet peeves is waiting forever for a website to load because it’s flooded with these flash images or videos. That is a bad idea. Google won’t like it, viewers won’t like it. Simplicity is the trend. The easier it is to navigate, the better. Sleek designs are definitely in, thanks for sharing!