Categories
Web Design

Essential guide to web design

HTML and CSS are the key components for building web pages and sites – without them the web as we know it simply would not exist In a nutshell, HTML provides the building blocks and structure while CSS provides the styling. 

What are HTML & CSS?

HTML is made up of a whole host of tags that all have their own identity. These consist of an opening and closing tag with all the relevant content in between. For example, <header>web page content goes here </header>. HTML defines a whole series of tags, for example, header, nav, footer, video, etc, which all have a semantic title making them easy to identify. Custom tags, or div tags as they are known, are created when a standard HTML tag cannot be used. Again these have their own individual identities. CSS is the language applied to an HTML tag to style it Cascading Style Sheets, CSS, will take the name of an HTML tag, <header> and define properties such as its height, width, color, borders, padding and margins for example. CSS3 now offers a completely new generation of styling options to use. Rounder corners, text shadows, box shadows, and gradients are just a few of the properties styling today’s websites. 

Anatomy of a website

Websites by their very nature are made up of a few constituent parts that are arranged in a manner to suit the content. Typical websites are either two- or three-column layouts with a header and footer. What sets sites apart is the imagination and variations used in the construction of the constituent parts. Characteristically, the header of a website appears at the top of the page, the footer at the bottom of a page and the main content in between. 

Background images or colors will be used to create a canvas for the page. This applies to the best and worst of websites found on the web. Take a look at your favorite site and it is almost guaranteed to fit into the standard type of template. The key to a great site is bringing all the constituent parts together in a coherent and cohesive manner that suits the content. 

What makes a good blog or social website? 

Blog sites can be bland and boring. But there are hundreds, if not thousands, of blogs that have stepped outside the standard template to bring a splash of creativity and originality. Eltoria (www. eltoria.com) is an award-winning blog that is run by Simone Partner a 23-year-old law graduate from the University of Reading who lives near Bath. The purpose of the blog is to express Simone’s interests and talk about some of the amazing brands she has worked with. 

The blog is a simple selection of posts, but the combination of fonts, typography, images, layout, and effects makes the blog a compelling, imaginative and engaging presence. The layout makes an immediate impression. The big image slider uses well-shot lifestyle photography to add personality and pizazz. The social media channels are given prominent placing, but it’s past the home page that the site reveals its true self The gorgeous use of fonts means that the blog instantly oozes class and sophistication. The imagery complements perfectly and the inclusion of author pictures adds more personality to the pages. 

An introduction to blogs and social media

Blogs and social media websites are now an integral part of the online experience for many people. WordPress and Twitter are synonymous with web publishing and micro-blogging. Word Press has become the most popular web publishing platform because it is freely available, websites using it can be either self-hosted or hosted on wordpress.com, and it has a whole selection of supporting tools and themes. 

Word Press is the power behind millions of websites, it is easy to install, even for newcomers, and easy to customize and navigate around. There are thousands of themes on the market, which can instantly give a website a completely new appearance with a single click. There is also a vast array of plug-ins that allow users to add special widgets that perform specific tasks, for example adding polls, image sliders, tweets, featured content and so on. The beauty of blogging platforms such as Word Press is that they provide a platform for users to get their opinions, thoughts, and personality online. While Word Press is the most popular web publishing platform it is by no means the only one out there. Joomla and Drupal are similar content management systems, but at the other end of the scale there are easy to set up, hosted platforms such as Tumblr and Flavors.me. 

More instant web publishing is provided by the social media/micro- blogging platform Twitter. This allows users to communicate with short, concise, 140-character or less, messages (tweets). Messages are sent to all those who choose to follow you but more importantly, the addition of a hashtag (#) makes a tweet subject-specific. This immediately expands the reader base to include thousands of more readers of a tweet. As a promotional tool, Twitter is key on the web. Web sites typically include social media links encouraging visitors to follow. Conversely, it provides the perfect platform to create interest amongst followers and beyond. A well-constructed tweet will engage readers and more importantly drive traffic to a website. 

Keeping it safe

Security is an often forgotten issue when it comes to a website, and there are a few simple rules that need to be followed to ensure that a website’s security is not breached. Passwords are the most popular form of securing access to a website, whether it’s via an online login page, such as WordPress, or an FTP package used for transferring files from a local computer to a server where a site is hosted. One quick tip is not to use the password ‘password’! As obvious as it may seem, the default password is often left and not changed. Try and choose a username that is not too obvious and ensure that a password uses upper and lower case characters and numbers. If it’s hard to remember to try not to write down and leave it next to your computer. 

If using a web publishing platform, ie Word Press, some simple commonsense precautions are to update to the latest version. In addition, update any plug-ins and themes and also remove any inactive, emes and plug-ins. Other security measures are more generic but just as important. Make sure that any OS updates are installed and make sure that any anti-virus and firewall software is kept up-to-date. 

The Mobile web

Smartphones and tablets are now as much part of the web
browsing experience as the desktop. With the adoption of mobile devices comes a new set of resolutions and rules for web designers. Smartphones typically have a screen width of 320 pixels in portrait mode and 480 pixels in landscape mode. Tablets are a more diverse bunch, but as a typical example, the iPad has a width of 768 pixels in portrait and 1024 pixels in the landscape. Desktops vary from 1024 pixels up to around 1900 pixels. 

The variation in sizes demonstrates the issue of designing for mobile and desktop. One option is to build a mobile-specific version of a desktop website, but this not only adds to the workflow of a designer but also adds to the development cost for a company. The current solution is ‘responsive design’, which looks to cater to all screen resolutions and ultimately all devices and desktops, in turn, future-proofing any website design. Responsive design uses CSS3 media queries, which recognize the width of a device and then switch the content to the appropriate version of the website to ensure the best on-screen display. 

What’s the best software?

Writing code, typically HTML and CSS, is nothing more than a collection of alphanumeric characters, so really nothing more complicated than a text editor is needed for creating code. 

notepad (PC) and TextEdit (Mac) are free text editors that are perfectly capable of producing good code, however, they offer no assistance in the way that you choose to write it. So, a plain text editor is generally for the more experienced coders out there. 

However, while beginners and newcomers may struggle with the language, to begin With, this approach will reap rich rewards down the line. Mastering HTML and CSS via hand-coding
will mean that clean, semantic and lightweight code will be the eventual outcome. 

Beyond the plain text editor, the next steps you’ll need to conquer are the HTML editors. These are more specific text editors which incorporate related coding features. They provide an environment that offers assistance and help create a codebase. These are less expensive than high-end packages and provide enough tools to assist with the page building process. 

At the top end of the scale are feature-heavy packages such as Adobe Dreamweaver, which are comparatively expensive. As you might expect, high-end packages do not simply offer a plain text interface. They offer a whole host of tools, such as pre-built templates, useful code Widgets, color-coded code, multiple views, and instant code creation. Choosing an HTML editor is very much a subjective choice and web designers will all have their favorites that they prefer to build with. The simple solution is to try a few of the free HTML editors are available on the market and familiarise yourself with how they operate. It is almost guaranteed that one will fit your method of working. 

Leave a Reply

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