HTML- Hyper Text Markup Language
CSS- Cascading Style Sheets *
Java- Android Language
Javascript- Advanced effects and added interactivity
SQL- Database Language
PHP- Server based Language
iOS- Apple Language
Ruby- Twitter
What languages do you/your developer need to know? If hiring the wrong type of developer, could loose big money. Very unusual for a developer to code in every languages, just like normal languages- some people specialise in one language more than others/cannot speak in some.
*Main two needed for standard web design. 21st Century designers need to have a good grasp on how these function, what they are and do.
Often, all webpages are not individually designed. There will be a series of pre-designed, functional web templates, yet the coding allows the database to pull up any information relevant (into the template), when the viewer clicks and demands the information. This is easier than pre-designing 3000+ webpages, whilst allowing the upkeep of the website much easier as the physical content is interchangeable.
In the past, interactivity for technology/phone was done through flash. When Apple iPhone launched, nothing would compete with Action Script as it was unsupported on Safari and iOS browsers. Since, ActionScript has become obsolete, meaning that in the future- any of the above languages can equally fade out.
Not designing for screen- designing for web browsers, such as:
Google Chrome, Firefox, Safari, Opera (used by Nintendo Wii), Internet Explorer
All of these translate HTML, as the Skeleton of the website. Web browser looks for HTML Files on Servers and then display the content to the user. However, the look and interpretation of the language can be interpreted differently on different browsers. Eg: one thing may work/look differently on Chrome than on Safari. This highlights the importance of knowing WHAT you are designing for, so it works 100% on that medium.
What devices would they be accessing it through?
Desktops, Mobiles, Tablets, Laptops, TV's. This will change the layout and aesthetics as the physical screen and template/orientation differs. Eg: iPhone 6 = Portrait Web Browser from Laptop or Desktop = Landscape. This also impacts the UX and UI as the physical navigation alters.
Responsive Web Design is where it changes and responds to the device it is on.
You should be able to get to any page- from any page
The Hamburger Icon aids this, especially within Apple and Facebook- 3 horizontal lines which allows a slide out function to reveal tabs and navigation menu's. However, as this hides the icon people forget what is on offer- out of sight out of mind. By using the Hamburger icon, interactivity is interrupted and more steps are added (e.g.: clicking on icon, scrolling down perhaps, and finally clicking on the selected icon).
Nothing is Perfect, everything needs to be critiqued
Standard Screen: 96 ppi (higher quality images etc for screen) rather than 72 ppi.
72ppi loads quicker on a page as smaller files.
Retina screens gave the option to display higher quality ppi, possibly challenging the quality of print (300ppi) someday. The higher PPI means larger load time, and a negatively effected UI. Most peoples attention span is approx 4 seconds. The average web user gives about 2.6 seconds until the page loads, if not there is a chance they could close the tab and go elsewhere. Design should load instantly, if not instantly then definitely <2seconds.
Accessibility
Screen Readers
- programs that read out the contents of computer screen to a user. (Links to brief)
In Europe and USA its a law that every website should be accessible to everyone, e.g: blind/any impairments.
Then// This impacts the the design as the typeface is not installed to the website, it is installed to the users computer. If used a bisque typeface, or even one specialist to you, it would default to Times New Roman as that was a universally legible typeface accessible to everyone. On the internet the designer lost the control of pt.Size/Kerning/Leading which limited what could do on screen.
Now// Google fonts and Fontface kit means 'in theory' that you can upload a typeface and use it anyway. However, this allows the user to download the font from the website, breaking copyright legislation and allows the user to distribute it as they please (not a benefit and can perpetuate unfair practice and fraud). A licence is needed for the typeface (if its a Royalty typeface), or else source a royalty-free typeface (either specific for print or specific to digitally. Check small print and check there is no license fee attached to it or else billable at any point).
Its essential to consider who owns the rights to each section, as it has the ability (by being put online), to be distributed world wide.
Any type on a website is searchable by the search engine- images are not (there are ways around but not that easy).
HTML Coding:
Decides each element of a webpage with an open and close tag. They tell you something about the information- every piece of information has to be opened AND closed.
'p' means Paragraph. Research the alternative code formulas for headers, subheadings, images etc. All coding needs to be relevant to what it is opening and closing.
Opening tag: <p> Closing tag: </p>
Needs to be include in each website- if not, it will not work:
<html> + </html>
<head> + </head>
<title> + </title>
<body> + </title>
Cannot rely on WYSIWYG Applications (What you see is what you get), as without knowing the basics of coding things can still go wrong through translation. A good example of this is Dreamweaver. Can't use Dreamweaver without knowing coding, the WYSIQYG is abysmal. MUSE is a visual website-mock up.
Meta-tags are what search engines use to find websites (Key Words). Not visible in website but within the structure of the website.
Learning - https://www.codeacdemy.com/learn/all
Codecademy is a good online way of learning the command line of coding, the framework and effectively how to deploy a website. The Hungry Sandwich Club learn't almost fully through CodeCademy, prior to employing a trained developer.
No comments:
Post a Comment