Writing for the Web

writing for the webThis weeks lecture was about writing for the web. I have learned about using HTML and JavaScript for web design in my course before, but this week we were learning about webpage layout and how to write articles online. Here is what I took from the lecture that I found most useful and what I hope can be useful to you too.

How should I layout my webpage?

A webpage has a specific layout of four areas. When you view a page you see the header area, page area, sidebar and also the footer area. The header area contains the adverts and the main site menu. The page area contains the main webpage content. The sidebar can contain links, latest news, a signup button and much more. The footer area can include things like company details and contact info. The menu navigation in a web page must be clear,logical and consistent to make it user friendly. Webpages can also contain clickable links which when you hover over will display a hand icon and will also be highlighted in blue e.g. https://sarasdigiblogis30240.wordpress.com/ .

Law’s of Gestalt? Never hear of them.

There are a set of laws known as Law’s of Gestalt which are used by designers to allow them to group webpages layout elements to make them more user friendly. Some examples of these laws are the Law of Proximity, which say that navigation menu’s should be displayed close together or the Law of Similarity & the Law of Symmetry, which say that the elements should share a common shape. Calls to Action buttons are placed on a webpage to try get you to sign up to an offer and we all know how tempting it is to click on these buttons. The laws don’t apply here as designers want the button to stand out so you will click that shiny thing jumping off the page. Tracking eye movements while testing your webpages is also useful as you can see if there is a flow to the layout of your page. For example, you might want to use bold to highlight keywords for people just scanning a document because obviously some of us get lazy reading long walls of text. TL;DR bold words for those too lazy to read the whole thing.

In responsive web design, a website is made with fluid proportion-based grids. This may sound very confusing to you as it did to me! To put it simply, it changes the webpage layout to adapt it to whatever screen you are using, such as a mobile phone, tablet or PC.

All I want to do is code!

HTML, or hyper-text markup language, is computer code that allows webpages to work.  It is a useful skill to have and something you can throw on htmlthe CV. Employers will love you for having it! HTML has tags for everything you need while writing a web page. For example, if you want to start a new paragraph you simply type <p> and end the paragraph with </p>. You can write whatever you want for you page in between these. While using HTML, you need to think about the page layout I mentioned above. A great website to help you learning HTML is http://www.codecademy.com/courses/html-one-o-one.

Web accessibility is important as it allows designers to check that the website can be used by people of all abilities and disabilities. FUN FACT: Did you know that it takes you 25% longer to read a document from a computer screen than from paper? Therefore, it is key for there to be a visual hierarchy on a webpage. You want it to be readable so the reader doesn’t get fatigued.

These are the main points I took from this weeks lecture. A really useful tool I thought would also be of interest which we learned about in the lecture is Mozilla Webmaker. Go check it out and start creating your own webpages from there.

Image Sources

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s