OUGD504 - Design for Screen - Coding + Responsive + Hamburger Icon

A programmer, computer programmer, developer, coder, or software engineer is a person who writes computer software. The term computer programmer can refer to a specialist in one area of computer programming or to a generalist who writes code for many kinds of software.
Coding is a key skill to learn for creating websites and specific jobs require different languages of coding. These include:

HTML - Hyper Text Markup Language
CSS - Cascading Style Sheets
Java - Android Language
Javatranscript - Advanced effects and added interactivity
iOS - Apple language
PHP - Server based language
Ruby - Twitter

Developers will rarely have an understanding of all coding languages due to the extensive progression of digital technology, therefor the developer will need to be considered depending on the type of project.

HTML and CSS are most used for web developers because they form the basis for what a website is made out of. Other programs such as Java help to add effects and interactivity to the website, which are dependant on the task.

Browsers

Primarily the software we access the internet through:

• Chrome
• Firefox
• Safari
• Opera
• Internet Explorer

Different devices present a websites differently, however a short survey of the class identified that the majority of people in the room used Google Chrome, a few used Safari and the rest were unused. I can use this to influence my concept because I am creating a design website for designers. A room filled with designers have evidenced that Google Chrome is the most popular. 

Devices

• Desktop Computers
• Laptops
• Tablets
• Mobile Phone
• TV

Changes the way a website/app looks

A responsive web design can transfer the information from one device to another, for example from a desktop computer to a mobile phone. Transferring a website which is predominantly landscape to a mobile phone which is portrait can become problematic.

A good user experience allows the user to get to any page from any page, this is often problematic for transferring long navigation menus onto a small screen. To overcome this, the hamburger icon is used.

Hamburger icon

Used to open a navigation menu on small screens such as mobiles - Accepted as good design practice
HOWEVER they can slows down navigation.

Alex Tyagulsky, an app designer, on the benefits of the Hamburger icon:

"The biggest one is you can put a lot of information inside it, and at the same time provide a consistent way to find this extra information. Facebook is a great example of this."

However James Foster, a web developer based in New Zealand, has surveyed users' interactions with the button over the course of many months. He believes that the icon can be hard to notice and it can mean different things to different people.

Fosters' findings:

• Adding the word "menu" underneath the three lines increases the button's use by 7.2%, according to Foster's tests.

• Putting the hamburger inside a box, so it looks like a button, increases use by 22.4%.

• Switching the lines for the word "menu" makes 20% more people click.

It is clear that if people do not recognise the icon, it can have a detrimental effect on the engagement with design. Personally, I believe that the efficiencies of the Hamburger icon depends on who is engaging with the site; target audience. Perhaps a younger audience would recognise the icon more because they have been exposed to it for years, whereas the older generation will be looking for words, not symbols in order to navigate the site.

Images

Design for screen uses 72 pixels - Quick image loading

However now retina displays make the high quality images take longer to load, this needs to be considered for user experience as a study found that it takes 2.6 seconds for a user to decide whether to stay or leave the site. If the images are taking too long to load, the user will close the website and find another one. 

Coding a basic website:

Used a basic program from Mac - TextEdit

Key information:

HTML - Divides each element of a webpage within an open and closed tag:

Open: <home>

Closing tab: </home>

For example, putting a paragraph on a site

Opening tag:

<p>

at the end of the paragraph, closing tag:

</p>

Basic Website - Have to be included in every single website:

<html>

<head>

<title>

<body>

(All of these will need to be closed) 

Basic Website:

<hmtl> - Tells the browser we are using HTML

<head> - Telling the browser what scripts I am using - Not visible on website

<title>

website

</head>

</title>

<body>

Hello this is a website

</body>

</html>

Save As: Index

The first page has to be saved as an index - From this point on the website can be called what I want

Beginners learning code:

Codecademy

Previously I had very little knowledge on the role of developers and coding, however this research has encouraged me to gain more of an understanding. The digital age we are living in is progressing more and more so it is important I stay on trend.