With the help of Web Designer Mag, I've been able to follow through an intermediate tutorial and create a template for a website. Eventually I am hopeful of using this layout as a basis for making my portfolio website at the end of this unit. The link to this tutorial can be found here, it was suggested on Blackboard as a Medium difficulty Hand code tutorial with using HTML5.
The process of creating this webpage went smoothly however I felt that this tutorial missed out some key features of web design (such as css) and didn't really teach me some of the basics of a web template.From around pages 2-4, most of this tutorial consisted of grabbing snippets from a photoshop file and just positioning them around a page, personally I would've preferred to use sophisticated CSS3 features such as box-shadows or button stylings. Furthermore, I didn't really grasp a sense of how to put a web structure up with HTML, it just showed me a block of code and said for me to put it in. Personally, if I was to learn how to make a webpage with HTML/CSS I'd use a website such as codecademy.com to help me.
Below are a set of images to prove that I fulfilled this task, the annotations are not apart of the website itself. I will also be displaying the various images I cut from the initial design document along with the HTML and Stylesheets.
Recently, a
study was carried out on how users read webpages and the results brought back
that simply, they don’t. Instead of reading a webpage the average user (80% of
people), scan a webpage the first time they visit it. When arriving at a
webpage for the first time it is imperative that the designer of the page has
made a good first impression, whoever the audience may be. This is why a
webpage when first viewed must be easily understandable to read with some
predicament from the user on how the content should operate/appear next
(consistency).
This is why
web designers must employ scannable text with features such as highlighted
keywords to give a broad sense of the content, as well as one subject per a
paragraph to keep the body varied and not ‘waffled’. Furthermore, users don’t
like reading whole walls of text so keeping the main points structured apart
and using variety with lists is always better than losing your place with too
much content.
To the right is a
key example of a poorly designed website that has a low standard for first
impressions in understanding and functionality. Please read the annotations.
Consistency
Earlier it was mentioned that users find content easily
understandable when they can predict on how content should behave or appear
next, this can be referred to as consistency. Consistency is a very powerful
tool and is always most effective when actions based on previous experiences
and new features are balanced together in moderation. When a user spends a lot
of time on a website they grow accustomed to the layout of it, they hate
dramatic changes. This means that over time a frequent user of a site forms
expectations on how the site should act based on their experience there and on
other websites too. If deviation were to occur, such as a completely new
interface or a dominating feature, users may leave the website altogether, as
it can be harder to use.
Many of popular websites update their interface frequently
either to improve performance in the long term or to refresh the look of their
business to new audiences. Take the example of Facebook or Youtube, everyday
millions of people use these sites for social media and connection and it’s
every 6 months or so the layout changes. Near just 1 week ago Youtube changed
the layout of their site, but is it for the best? Sure users will grumble at
the beginning about their favourite sites being unrecognisable, but will the
new features (such as Google/Youtube integration) be more beneficial in the
long run? Should Youtube be more open about Beta testing layouts? Instead of
just flinging new designs onto users and expecting them to follow through with
it, especially as thousands of people (partners) depend on the site for a livelihood.
Above is a short video by Vincent Flanders showing a
website that has an inconsistent navigation in terms of font colour, text
decoration and lack of content within webpages.
Cross Browser Compliance: Vendor Prefixes
As
CSS develops onwards certain Browsers are finding it harder to support
sophisticated presentation features, such as CSS3’s box-shadow, and are facing
the issue of multiple vendor prefixes. Vendor prefixes are tags that go in
front of complex CSS property values, they’re needed in some cases otherwise
the certain feature may not be fully functional (visually) on a website. The
key issue is that in order for the declaration to work the CSS must cater for
every browser that might access the code, therefore the same property values
have to be typed out but with each one having different prefixes such as –moz-
(Mozilla Firefox) or –webkit- (Chrome and Safari). However though, most coders
don’t want to write the same property value over and over again, in most cases
it’s time consuming and can be a lot more efficient just to collapse all the
prefixes into one single prefix –beta-
Although, in
broader terms we can just say that there are too many differences between
browsers when rendering CSS code. Take the example of the box-shadow function,
both Mozilla and Webkit Browsers render this action differently to each other
as they both handle the shadow blurring uniquely. Perhaps instead of thousands
and thousands of developers putting in repetitive code, implementations can be
brought in to hopefully achieve interoperability between browser companies. If
browsers didn’t achieve this then it may get to the case where certain websites
will suggest which browsers their websites would look best in, or even more
dramatically have CSS pick which browser gets a certain feature and which
doesn’t.
If these
sorts of prospects were brought into today’s market for designing websites,
then whole layouts could completely look messy and fall apart in one browser
compared to another. Perhaps the striving towards a unification of browser
behaviour or another method such as the –beta- prefix may fix some of the
grumblings of browser creators and web developers.
The Search Function
Search is another key feature that is fundamental to nearly
any website with a user database or a lot of information that may seem
unnecessary to certain visitors. Whether it’s shopping for food or checking on
a certain user you used to socialise over on a forum, if your website doesn’t
have a broad-scope search with easy to use functions, your website will suffer.
Given that typical users are quite poor at multiple query attempts, if they
don’t get good results on the first or second try, an attempt at using advanced
features or trying other words may seem too far-fetched to the masses of
website surfers. Especially as most queries have a success rate of around 50%
(on most e-commerce sites), you’d want your search function not to be too
specific but neither it be not specific enough.
If a website’s search function were overly literal then
cases such as typos, plurals, hyphens, etc wouldn’t be accepted as relative to
what you’re searching for. More specifically, if I searched for holidays in
Hawaii but kept on spelling it “Hawaai”, I wouldn’t receive any results that
may be useful to me. In terms of audience as well, overly literal search
functions are bad for elderly people and young children as they’re more prone
to make mistakes. Another issue of a poor search function is when the engine
prioritises results purely based on how many query terms they contain, instead
of whole documents or webpages.
Most of the time it’s best for a website to go for a simple
search as a small box is what the majority of users expect in terms of
interface, especially as search serves as a alternative to when a navigation
may fail.
HTML stands for Hyper Text Markup Language, it's the coding language that is used to display the content within a certain layout on the Internet. Unlike CSS, HTML is specifically used for the structure of content whilst CSS is for the presentation layout.
Initially, the original code for HTML was invented over 20 years ago with updates for each version of the language infrequently occurring. Because of the span of time for updates, certain features have only been able to be put in the HTML through the usage of external programs. Take the example of Video, the integration of video for HTML has been hard to fit in naturally through each update therefore external applications have had to been used. Ones such as Real Time Player, Windows Media Player and Flash are some examples of players that have been designed as external plugins for the web. However though, because these programs are external to HTML in order for someone to achieve video on their website they would need to download these plugins from a source. As well as that, sources over the internet aren't all trustworthy so any unwanted software such as viruses may invade with downloads also.
With HTML5, the usage of plugins could be phased out with adding video to it's capabilities. Along with other features such as Audio, drag and drop and vector graphics/animation, HTML5 is planned to create a consistent and universal web experience throughout all web devices and browsers.
CSS
In order to implement sophisticated design elements into HTML webpages, programmers use CSS. CSS stands for Cascading Style Sheets, it's the computer language that is used to describe the presentation (view/format) of a webpage.
The difference between HTML and CSS in simple terms is that whilst HTML is used to structure content, CSS is used to format that specific structured content. Take header and paragraph elements for example, to create these, tags such as <h1> and <p> are used. With CSS however, these tags can be stylised either by applying a style attribute or referring to the tags with an external stylesheet. Whe nthe web was originally gaining popularity web designers looked to adding a type of layout so certain tags such as <font> were used to define layout. At the time, web pages were being frequently created however browsers producers (such as Microsoft and Netscape) had an issue where structure tags, like <table>, were being misused to pages with layout, and not structure. Additionally, many layout tags were only supported by one type of browsers and not other so CSS was invented to remedy these errors.
Overall, CSS made layout opportunities a lot more sophisticated with sole stylesheets and different media options like screen or print. The main benefit to CSS though was that is helped form the fundamental law of web design, the separation of presentation style of documents from the content of documents. This, helps coding maintainence a lot more precise and easier for web designers and developers.
The only problem that still remains today however is the functionality of advanced features with CSS3 (such as box-shadow) and it's implementation with today's ever updating and increasing web browsers. Issues like this call for the usages of prefixes or prehacks, this will be touched more upon in Web Design Issues.
JavaScript
JavaScript is a cross-platform, objected orientated programming language designed to implement interactive elements into webpages. Initially developed by Netscape, JS has allowed web authors to closely interact with the HTML source code and create many dynamic features for their websites.
One of Javascript's main features is reading and writing to HTML elements, such as <p>, and seeing what content is inside there and manipulating it accordingly. With this type of functionality if certain conditions are met of a visitor to a website, Javascript can edit the content to provide the user with a unqiue experience. Take the example of certain Greetings depending on the time of day, if we wanted the webpage to say Good Morning, Afternoon or Evening depending on time of day we can use JS. With inbuilt functions such as .getHours, we can check what time of day it is with for loops and change the content depending on those type of conditions. Secondly, Javascript can also react to a user's behaviour. When comparing to CSS we can see that the styling of an element can change when it's hovered over, clicked on or focussed on. With Javascript, we can control the entire interface of a webpage instead of just a single element depending on mouse control. Another example of Javascript reacting to a user's behaviour can be through application forms and taking the values entered into fields and printing it out in one chunk, this can be useful for database records/entries. With the ever increasing usage of JavaScript compared to other languages alike (such as Ruby or Python), JS is becoming the key language in creating dynamic features for web browsers. Today, JS is even exceeding it's intention of browser features with certain projects using code that is capable of powering physical real-world devices via an Arduino or running natively on mobile devices/tablets. In terms of achieving unity with a development that is efficient, JavaScript is the highly recommended code to do the job.
pHp
pHp is a server-side scripting language that stands for PHP:
Hypertext Preprocessor. It’s used to create web-based applications that can
create, manage, display and destroy information. Alike to JavaScript, pHp
focuses on the manipulating of information with a webpage whilst JavaScript
focuses on the visual/behavioural effects you can achieve with a webpage.
But what really distinguishes pHp from client-side scripting
languages such as JavaScript is that the code is executed on the server, this
code can be used to generate HTML that is then sent to the client. Therefore,
the client would receive the results of running that script but not be able to
access the underlying code of that action as it’s on the server. This is a
great way for web authors to keep confidentiality with their webpages so
anybody can’t steal their HTML or CSS. pHp can also interact with MySQL
databases meaning that we can create scripts that can write a user’s
information (username, password, etc) and retrieve information from the database.
With using contents of the database, webpages such as user profiles can be
created and more complex systems such as login systems or website search
features can be made with pHp also. This is a great tool for creating websites
that support forums and close interactions between users.
Today, pHp is seen as one of the most popular programming languages
in recent years with its server-side scripting functions that have helped
create well-known open source programs such as WordPress or Joomla. However though,
with certain languages such as Python, Ruby and HTML5 becoming increasingly
popular with similar features that may perform better or more efficiently, pHp
may be one day phased out all together.
