In the last few weeks I was quite surprised to learn that my friends involved with making decisions regarding the UX / UI of a web app interface, are taking terms and abbreviations for granted, and do not really know what they stand for. So, let’s have a beginners run down.
A web site in it’s most basic form exists because of a 24/7 network connection. A hosting provider gives the owner of the web site an account on one of their servers. Which basically means you get your own little piece of hard drive to store your files on.
To publicly reach the host you must have either the host-, or IP address.
Through an Internet browser such as Chrome, the address is entered using the http protocol. A request is made, arrives at the host, and the web server returns a response. The browser then renders this visually into a human readable page.
The content of the rendered page is in a html structure, and usually using css for its presentation.
A more complex form of a web page is not the above ‘static’ one, but a more dynamic one using php and mysql for example. Allowing user-interaction.
For a web site there are a few things that make it a good web site. Such as using modern technologies, industry standards, fast loading pages, and a friendly user-interface. All resulting in a smooth browsing experience, a browser or device optimized interface and a positive user-experience.
http – hyper-text transfer protocol (tell the browser we want to view files)
www – world wide web (tell the browser we’re looking for public web files)
domain.com – the host address of a web site (which should point to an IP)
123.123.123.123 – the internet protocol (IP) address of a web site
html5 – html stands for hyper-text markup language (structure of the page) (version 5)
css3 – cascading style sheet (presentation of the page) (version 3)
javascript – a simple client-side programming language
php5 – PHP Hyper-text preprocessor (version 5) (programming language)
mysql5 – My (daughter’s name of the dev) structured query language (version 5)
Before I make it more complex by going into things like user experience (ux) and user interface (ui) and progressive enhancements (pe), I’d like to help visualize the above.
html is used to put content of a page into blocks, paragraphs, headers, and define them (such as a header, footer, aside, or navigation). The biggest first header above a paragraph for example is made with <h1>title</h1> With below it text in between <p> .. </p> tags defining it as a paragraph. Both the h1 and p could be inside an <article> .. </article> block. html is static. Using javascript it could be made more interactive.
css is then used to give the html presentation. Which font do you want the <h1> tag to be? What color should the paragraph have, how wide is the article block, etc.
mysql is used to store data in a database. Very handy for bigger web sites with multiple pages, user submitted content, and for showing only the data needed for that user, for that page.
Using php you can request data from the page and the user, process it internally, query the database and get what you need (or store what was submitted), and return a result. Making a web site very dynamic and interactive.
I consider the world the Internet, and the street you have a house in is your host. In your house you can use html and php to give your house structure. Using css you can paint it, put wallpaper up and tell it how big the windows are supposed to be. Anything inside the house, such as furniture is stored in a database.
But how does someone feel when they enter your house? Can they move around easily and find what they’re looking for? That’s basically the user experience and user interface. Just how it’s logical to have stairs in the house to go from one floor to the other. Having the navigation of your web site’s pages in the right spot, is just as important.
You might live on the fourth floor, having an elevator is what you could consider progressive enhancement (over stairs). In web design a list might be easier to order if you could just pick up an item and drag it higher or lower. Less technical and more user-friendly. You’ve then improved the user interface, and therefor the user experience, through progressive enhancement.
Okay, maybe this is not the best analogy, but it kinda works. And I hope it makes the point.
A real life example. A digital business card for a company, with a newsletter signup form.
Since 1994 I’ve been telling companies that are not on the Internet to not ignore it, and at the least transform their business card from analogue to digital by registering for a domain name, and have a simple web page introducing potential customers to their business, and providing your contact information. Optionally, a sign-up form for a newsletter to stay in touch.
After getting a domain registered, a hosting account to point it to. An index.php file is created that does a few things. First, it checks which page we’re on. Home, Contact, or Newsletter. Then, it queries the database for the content it wishes to publish on these pages. And finally it provides the html templates (such as a header, footer, and page) the content. The end-user gets a rendered page with a consistent look, consistent header (where the css is loaded btw) and footer (where the javascript is loaded btw), and the content itself.
If the page is Newsletter, a form requests the address of the visitor is requested. When inserted, the php code recognizes this, updates the mysql database, and returns to the end-user a friendly thank you message with some html.
A simple introduction to the company doesn’t complicate the experience, the user has a positive feeling. The site’s navigation might have been thought through which improves the user interface. Using javascript and php on the newsletter page no reload of the whole page is required, using a progressive enhancement the user experience has been improved. Simple, effective, and great looking using modern html5 and css3.
Using just html / css / php / mysql you can build complete company web sites, community forums, personal blogs, or professional SaaS solutions and web apps such as Gmail, etc. But of course, it’s important to have some sort of understanding of the basics, otherwise ‘thinking things through’ isn’t even an option.