INTERACTIVE DESIGN | EXERCISES
30/08/18 - 18/10/18 | Week 1 - Week 8
Yeoh Xiao Shi (0331577)
Interactive Design
Exercises
LECTURE
Lecture 1 : Introduction to the module
30/08/18 (Week 1)
In the first class, Mr Shamsul started it by giving us a brief on the module outline and explained what this class is about as well as what we will be learning in the upcoming weeks. We were also told that this will be a very technical class and Adobe Dreamweaver will be used in the class most of the time. Before the class end, we were asked by Mr Shamsul on what is UX and UI as well as the history of the web. Then, we had a short discussion on it. As I not really understand it, so I google for some explanation.
UX (User Experience) : Process of enhancing customer satisfaction and loyalty by improving the usability, ease of use and pleasure provided in the interaction between the customer and product.
UI (User Interface) : Process of visually guiding the user through a product's interface via interactive elements and across all sizes or platforms.
History of the Web : Sir Tim Bernes Lee, an English engineer and computer scientist who invented the World Wide Web in 1989 wrote the first web browser in1990 while employe at CERN (European Organisation for Nuclear Research). In his need to share the informations with other physicists quick and easily, he came up with the idea of putting the proposal together for a centralised database which contained links to other documents. He had written the three fundamental technologies that remain the foundation of today's web which is HTML (Hyper Text Markup Language), URI (Uniform Resource Identifier) and HTTP (Hypertext Transfer Protocol).
Lecture 2 : Basic Site Evaluation & Rubric Creation
06/09/18 (Week 2)
We don't have any lecture this week. Instead, we were having class activities on basic site evaluation and rubric creation. As a group, we were told to discuss and evaluate the websites based on purpose, design and usability in order to identify either the website is good or bad. Later on, we will need to present and share our opinions in front of the class.
To summarise what we have discussed in the class, there are some characteristics that we need to consider when designing a website such as mobile compatibility, fast load time, browser consistency, accessible to users, well planned information architecture, well formatted content, effective navigation, good use of colour scheme and suitable
Mobile Compatibility / Friendly : site can be viewed and used on different screen resolution.
Fast Load Time : the speed to load on the website have to be quick. (loads within 4 to 6 seconds)
Browser Consistency : website look consistent across all major browser.
Accessible to Users : accessible to every users including blind, disabled or the elderly.
Well Planned Information Architecture : organised and separate the content into categories or sections so that it is easy for the users to find what they want.
Well Formatted Content : good use of headings, sub-headings, paragraphs, bullets and lists making the users to read or scan easily.
Effective Navigation : easy to use navigation menu.
Good Use of Colour Scheme / Palette : contrast between the background of the website and content.
Typefaces : Choose suitable typeface so that reader can read easily.
Embedded PDF of week 2 lecture slides.
Lecture 3 : User Interface
13/09/18 (Week 3)
This week, Mr Shamsul began the class by giving us a lecture on UX and UI design, which the topic that we have a short discussion before this. I got to differentia UX and UI design better after today's lecture. UX design focus more on the experience and interaction of the users with the applications, websites and products while UI design focus on the visual elements that guide the users go through the interface to enhance the user's experience. Thus, the UX designer need to understand user need and focus on structure and layout of content, navigation as well as how users use and interact with them. In contrast, the UI designer focus on anticipating what users might need to do and ensuring the elements of the interface is easy for the user to access, understand and use to facilitate those actions.
Besides that, we were also introduced to some interface elements that used in UI design such as call to action, breadcrumb, pagination, progress bar, modal windows, accordion, radio buttons and check buttons.
Call to action : interactive element aim to induce people to take certain actions that present a conversion for a particular page or screen (UX planet, 2018). For example, call to action at facebook like sign up and login.
 |
| Fig.2.1: Examples of call to action. |
Breadcrumb : a type of secondary navigation scheme that reveals the user's location in a website or web application (Jacob Gube, 2009). It is important to have it in the complex website so that users can check easily which webpage are they.
 |
| Fig.2.2: Example of breadcrumb. |
Pagination : paging, the number of pages at the bottom of webpage to let the users know how many pages to go through in the website.
 |
| Fig.2.3: Example of pagination. |
Progress bar : used to visualise the progress, indicate the password strength.
 |
| Fig.2.4: Example of progress bar. |
Modal Windows : dialog which appears over the main content of the user interface and requires action from the user. It usually appear after the user has already carried out an action (Justinmind, 2018).
 |
| Fig.2.5: Example of modal window. |
Accordion : graphical control element comprising a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "stretches" to reveal the content associated with that item (Wikipedia, 2018).
 |
| Fig.2.6: Example of accordion. |
Radio buttons : used when there is a list of two or more options but the user only can select one.
Check buttons : used when there are lists of options and the user can have more than one selection.
 |
| Fig.2.7: Examples of radio buttons and check buttons. |
Embedded PDF of week 3 lecture slides.
Lecture 5 : Language of the Web
27/09/18 (Week 5)
Before the class start, Mr Shamsul went through our project 1 and give some feedbacks on Google Classroom. After that, we were given a lecture on the language of the web. There are more ways to access the web nowadays so that the designers would need to design the website that is accessible and also to ensure the web develop in accordance with web standards. Besides that, the screen size that most of the people used should be also considered while designing a web. As for today, the largest size of the screen is 1920 x 1080 pixels.
Other than that, we learned about the two main types of websites which is static website and dynamic website. For static website, the content of it is fixed and each page is coded in plain HTML and CSS while in dynamic website the content is dynamic which changes according to the user's preferences. Static website is more difficult to update compared to dynamic website which design updates can be much more simpler.
Moreover, we were taught on the structure of the web page as well as how the HTML describes the structure of the pages with the elements. As to create a webpage, we will need to describe the structure of the web by adding the code to the words. HTML code which made up of the characters that live inside the angled brackets called HTML elements. All these elements are usually made up of two tags which is an opening tag <element> and a closing tag </element>. While Mr Shamsul explaining on this, most of us get confuse as this was our first time to learn coding. So, we were given an exercise to be more familiar with it.
Embedded PDF of week 5 lecture slides.
Lecture 6 : Website Development Process
04/10/18 (Week 6)
This week, Mr Shamsul gave us a lecture about the development process of a website. As to create a good website, it requires a initial planning phase. We should always sketch out our design and create the conventions and conceptual structure of a site before starting to code it. This will help us to save the time during development. It is said that a great designer will not only think about how the web design process which focus on the technical matters like wireframes and coding but to create a website that aligns with comprehensive strategy.
There are few stages to develop a website. Firstly, the web designers will need to gather the information. As a designer, we have to know that who is our target audience, what is the main purpose of the site as well as the goals to build this website. Move on to the planning stage, the developers need to create the data that can present to the client so that the client know how the entire site looks like. To gathered all the information that we got in the previous stage, the sitemap which is the flow chart of the site it created. Basically, sitemap will show the relationship between the different pages of a site so that we can understand the how the inner structure of the website looks like. In addition, a wire frame and mock-uo will also created in this stage. It is a visual representation of user interface that your are going to create. Later on, it comes to the design stage. This is when the designers start designing the web with all the visual content such as images, photos and videos. Lastly, the developers will need to test, review and launch before the website published. It is need to check every single link, form, script and run spelling checking software to make sure the are no errors occur. Then, upload it to the software called FTP (File Transfer Protocol) to be sure that all the files are correctly installed.
Embedded PDF of week 6 lecture slides.
Lecture 7 : Styling the Web
11/10/18 (Week 7)
In this week class, we were given a lecture on how to style the web with CSS file. From the lecture, we got to know that CSS boxes model allows us to set several properties that effect the appearance of the boxes. In addition, we could use it to control the dimensions of the boxes and to create boarders. It is said that by default the size of the box is big enough to told the contents. However, we can also set our own dimensions for the box by using the height and width properties. The most popular ways to specify the size of the box are to use pixels or percentage. Pixel is said to be used for a fixed measurement while percentage is used for a relevant measurement.
Moreover, expand and shrink were designed in some page to fit the size of the user's screen. It indicates how the content being displayed on the page when the browser window is shrunk to narrow and expanded to wide. This properties is said to be helpful as it make sure all the contents of pages are legible. For the overflowing property, it basically told the browser what to do when the content contained within the box is larger than the box. Lastly, the display property which is the most important property for controlling layout. Each of the element has a default value depending on what type of element it is. Block <div> or inline <span> are usually the default for most elements.
Moreover, expand and shrink were designed in some page to fit the size of the user's screen. It indicates how the content being displayed on the page when the browser window is shrunk to narrow and expanded to wide. This properties is said to be helpful as it make sure all the contents of pages are legible. For the overflowing property, it basically told the browser what to do when the content contained within the box is larger than the box. Lastly, the display property which is the most important property for controlling layout. Each of the element has a default value depending on what type of element it is. Block <div> or inline <span> are usually the default for most elements.
Embedded PDF of week 7 lecture slides.
Lecture 8 : No Lecture ( Layout Exercise)
18/10/18 (Week 8)
There was no any lecture in this week class. Instead, Mr Shamsul began the class by briefing us on the exercise that we will need to do this week. Basically, we have to create a layout with external style sheet by using the knowledges we gain from the previous exercise. Instructions and the contents were uploaded on Google classroom and we were required to include the contents when creating the layout. In class, we were told to do some wireframe sketches before moving on to code at Adobe Dreamweaver.
INSTRUCTIONS
EXERCISES
Surveying the Possibilities (Week 2)
Week 2 (06/09/18)
This week, we were given an exercise which we will need to evaluate the website and complete the excel sheet provided in Google classroom. From https://www.thebestdesigns.com and https://www.webbyawards.com, we were asked to browse the web and have a discussion to decide six websites that is good and six that is bad in group. In addition to identify the website, we also required to comment on the site's design, content, purpose, target audience and explain it in details.
 |
| Fig.1.1: Excel sheet for the exercise. |
https://drive.google.com/file/d/19P2xfJ0Q5jgF9NL6VSWKIO65rlWTfkxU/view
Basic Interface Design (Week 3)
Week 3 (13/09/18)
For this week exercise, we were required to design a user interface for Taylor's University Interactive Information Kiosk in group. Before designing, we were told to think of the scenario and the target audience as the goal of the information kiosk is to inform the user on how to access Taylor's University. With my group members Afsah, Kitty, Irfan and JQ, we decided on the scenario of new students who are still not familiar with the campus wanting to check for the upcoming events. We have a short discussion to come out with some ideas for the contents and elements that we wanted to include in the kiosk. We also did some sketches for the the placement of elements before moving on to design at Adobe Illustrator.
During the process of designing, we were told to consider low-fidelity in our design. Basically, it means we only need to include the key elements of the content and some of the visual attributes of the final looks as low fidelity focus more on testing the functionality rather than the visual appearance. After completing the exercise, we were asked to print out and each group will do a test for one group in order to get some feedbacks.
 |
| Fig.2.8: Sketches. |
 |
| Fig.2.9: Process of designing at Adobe Illustrator. |
 |
| Fig.2.10: Process of designing at Adobe Illustrator. |
Embedded PDF of basic interface design exercise. (Overall)
Embedded PDF of basic interface design exercise. (based on the scenario)
Once we done testing on other group's interface, we will need to complete the test report by commenting on the ease of learning, efficiency of use, memorability, errors and user satisfaction. Here is the test report of our group on group 6 interface design.
Embedded PDF of test report on group 6 interface design.
Link to the test report :
https://docs.google.com/document/d/15BdnhSEkh8eeVaPgh8CNNcAzFjlH6s8Gd-hkaKAgHUw/edit?usp=sharing
HTML Exercise (Week 5 - Week 8)
Week 5 (27/09/18)
In this week class, we were taught on the basic language of the web which is HTML. We got to try for the basic coding on TextEdit or Notepad and save it as Unicode (UTF-8) before viewing it on the webpage. Basically, HTML describe the elements of structure of our website and it can de divided into 2 elements which is head and body. The elements are usually made up of two tags which included an opening <element> and a closing tag </element>.
Other than that, we were also introduced to some of the elements that we could use to code the words that we want to appear on the webpage. For example, <p> indicate as paragraph, <b> as bold, <i> as italic, <hr> as dividing line, <title> as the title shown in the top of the browser and <head> as the title of your content. There are 6 levels of headings (from <h1> to <h6>. <h1> used to show the main headings while <h2> used for subheadings. To have a numbering list, we could add <ol> and <li>. In addition to have a bullet list, we could add <ul> and <li>.
 |
| Fig.3.1: Process of coding at TextEdit. |
 |
| Fig.3.2: Process of coding and previewing at the webpage. |
 |
| Fig.3.3: Results of the webpage from HTML code. |
Week 6 (04/10/18)
Last week, we were told prepare a resume for our next exercise. It should be include the personal info, education info, work experience (if have any), skill or interest and so on. We were also told to Google some examples for reference. While in this week class, Mr Shamsul check on our resume and give some feedbacks. Mr Shamsul commented on my resume and ask me to add more informations so that it will looks better when converting to HTML file. Then, we move on to create the html file for this exercise.
Embedded PDF of my resume.
 |
| Fig.4.1: Process of coding at Adobe Dreamweaver. |
 |
| Fig.4.2: Results of the webpage from HTML code for my resume. |
Once we were done with the HTML file, Mr Shamsul taught us to create CSS file where we can change the style of the letters, spacing, margin, background colour and so on. To link the CSS file, we were then taught to include <link rel="stylesheet" type="text/css" href="browse the file"> in our HTML file.
 |
| Fig.4.3: Process of changing the style with external style sheet. |
 |
| Fig.4.4: Preview of the outcome at browser. |
Week 7 (11/10/18)
For this week, we were taught to style our resume with internal styles which we need to include the style tag at the head section of the HTML file. We got to style the typefaces, alignment, background colour as well as to insert the image to design our resume with the style tag. Exercise were given and we would need to explore it by ourselves.
 |
| Fig.5.1: Process of styling with internal style sheet. |
 |
| Fig.5.2: Process of styling with internal style sheet. |
 |
| Fig.5.3: Preview of the outcome at browser. |
 |
| Fig.5.4: Preview of the outcome at browser. |
 |
| Fig.5.5: Process of coding at css file. |
 |
| Fig.5.6: Process of styling with external style sheet. |
 |
| Fig.5.7: Process of styling with external style sheet. |
 |
| Fig.5.8: Preview of the outcome at browser. |
 |
| Fig.5.9: Preview of the outcome at browser. |
 |
| Fig.5.10: Process of coding for logo and nav at HTML document. |
 |
| Fig.5.11: Process of styling the logo and nav at CSS file. |
 |
| Fig.5.12: Process of adding logo and nav. |
 |
| Fig.5.13: Preview of outcome at browser after adding logo and nav. |
 |
| Fig.5.9: Preview of the outcome at browser after adding logo and nav. |
 |
| Fig.5.10: Overview of the layout at browser. |
Week 8 (18/10/18)
This week, Mr Shamsul uploaded an exercise on Google Classroom which we were required to create a layout for the content provided. As for the instructions, we were told that we could follow the format that learned in the previous class or propose a new style for the content given. Besides that, we will also need to add the hyperlink to certain HTML element by following the content given.
Embedded PDF of the layout exercise content.
 |
| Images provided on Google Classroom. |
Before starting to code, Mr Shamsul asked us to do some wireframe sketches so that we will know how to fit the content given to the layout designed. Once I done with sketching, I began to create a HTML file and code for the content as well as to include the images provided. Then, I proceed to create a CSS file and link it to the HTML file in order to style the layout. Lastly, I also got to try on adding the Hyperlink to certain element by following the content provided in Google Classroom.
 |
| Fig.6.1: Wireframe sketches. |
 |
| Fig.6.2: Process of coding the content & adding images at HTML file. |
 |
| Fig.6.3: Process of styling the layout at CSS file. |
 |
| Fig.6.4: Process of coding at HTML file. |
 |
| Fig.6.5: Process of styling at CSS file. |
 |
| Fig.6.6: Process of adding hyperlink and hover to certain elements. |
 |
| Fig.6.7: Preview of outcome at browser. |
 |
| Fig.6.8: Preview of navigation bar with hover effect. |
 |
| Fig.6.9: Preview of outcome at browser. |
 |
| Fig.6.10: Preview of outcome at browser. |
 |
| Fig.6.11: Testing with hyperlink at browser. |
 |
| Fig.6.12: Overview of the layout at browser. |
FEEDBACK
Week 1
General Feedback : No general feedback given since this is just the first class.
Specific Feedback : No specific feedback given since this is just the first class.
Week 2
General Feedback : During the presentation session, we were told that we should state the traits of the good website and bad website more specific by using specific terms like context formatting, motion graphics, readability, minimum scroll, parallax scrolling, originality and so on.
Specific Feedback : No specific feedback given.
Week 3
General Feedback : When designing the interface, Mr Shamsul told us that the design should be in low fidelity which means we will only need to include the important contents and some of the visual attributes. We were also told to make it simple so that it will not confuse the users. Besides that, we were told to be aware with the use of icons as the user might get confused. We were not recommend to use it but if we want to we will need to make sure it is globally recognised and well labelled. Lastly, we need to add word and label it when placing the image so that the users can understand what is it about.
Specific Feedback : After having a test on our group interface, Mr Shamsul commented that overall is good and the scenario is very clear. We also told that we did a good job on placing the home and back button at the top of the page as some of the users might want to back to the previous page and some might want to back to the homepage. However, the use of word "recent" in the event pages is suggested to replace with "past" so it won't confused the users.
Week 5
General Feedback : When we were taught on HTML coding, Mr Shamsul said it is normal that we made a lot of mistakes during the learning process.
Specific Feedback : Mr Shamsul commented that the overall design for my landing page looks well arranged and with good hierarchy of information. Good attempt.
Week 6
General Feedback : Before starting to code, we were told to include sufficient informations for our resume. While using Adobe Dreamweaver, Mr Shamsul asked us to create a folder and all the files relate should be placed in that folder. The html file should always save as index.html and only in lowercase. Moreover, don't leave spaces but use underscore when saving the files. We were also told to save the file in the computer instead of external hard disk. However, it is okay to save the file at external disk for backup purpose.
Specific Feedback : After looking at my resume, Mr Shamsul told me to add more informations so that it will looks better when convert it to html. Besides that, he asked me not to make the content in two columns first as it will need to use the table in css which we will be learning afterwards.
Week 7
General Feedback : When creating and styling the layout with external stylesheet, we were told to include the style tag at the head section of HTML document in order to link it with CSS file. Besides that, Mr Shamsul asked us to go through learnlayout.com and have a look on it to have a better understanding on creating layout with HTML and CSS.
Specific Feedback : No specific feedback given this week.
Week 8
General Feedback : Mr Shamsul asked us to check the name of the image browsed and make sure it is the file name as the broken images will occurred when the image have the different path or filename as specified in the image source tag.
Specific Feedback : No specific feedback given this week.
REFLECTION
Experiences :
Week 1 : Before this, I don't have any idea on what this class is about so I'm a bit worry. After listening to the brief, I got to know that we will be learning web design and coding throughout this semester.
Week 2 : From the class activities, I got to learn on how to critic and evaluate the website as well as having a basic understanding on web design. I also got the opportunities to learn the specific terms that we can use like context formatting, motion graphics, originality and others when evaluating the website.
Week 3 : This week exercise is quite interesting as we were given a task to create and design a user interface for Taylors's University with a specific scenario in group. At first, I have no idea for it but I manage to give out some ideas after doing some researches.
Week 5 : In this week class, we started to learn the basic language of the web which is HTML. I got to type the code at TextEdit and save it before open in the webpage. It was quite fun to see the text that I type in TextEdit turn out in the webpage since this was my first time trying on coding.
Week 6 : For this week, we were introduced to a new software which is Adobe Dreamweaver. We were taught on creating the html file as well as css file with Dreamweaver.
Week 7 : This week, we were taught on how to style our resume with internal and external style sheet which is pretty fun for me.
Week 8 : With the knowledges gained from the previous class, I have to create a layout for the contents provided by using external style sheet this week.
Observations :
Week 1 : Mr Shamsul told us that this will be a very technical class. I realised I still lack of knowledges and understanding on web design and coding so I guess this will be a good opportunity for me to learn it.
Week 2 : I noticed that browse and evaluate different websites help me to have a better understanding on the characteristic of the good website and bad website.
Week 3 : I realised that a web designer should not only think for the design and its overall looks but also need to consider the purpose, target audience and also the need of them.
Week 5 : I observed that not all the time the code that we save will works on the webpage as there will be some technical issues when saving it. As for me, the text that I type for the first time didn't turn out in the webpage. With the help of my lecturer, I try it again with the same step and it works at last.
Week 6 : I noticed that Adobe Dreamweaver is much more convenient than the TextEdit we used in the previous class as it provided most of the codes with closing element. However, it still took times for me to familiar with this since I not really good in technical things.
Week 7 : I realised that it is hard for me to catch up since I'm still not familiar with coding.
Week 8 : I faced a lot of problems when creating the layout as it doesn't work like what I want. So, it took me a lot of times to figure out the problems and to fix it. With the help from my cousin who have experienced in coding, I also get to know what mistakes I did and what code should be included to fix the problem.
Findings :
Week 1 : For me, this module is considered challenging as I'm not that good in technical work. I think it will took more times for me to learn as well as to be familiar with coding since I have not coded anything before this.
Week 2 : I realised that it is not that easy to design a website as it requires careful planning and a lot of considerations in order to come out with a good website. The website that we can visit within few seconds may took few days or weeks for the designer to plan and construct.
Week 3 : There are few elements that we will need to consider while designing the interface such as navigation, home and return button, search bar and others which can bring convenience to the users.
As to design the interface, we also need to think for the target audience as well as the need of them so that the interface works efficiently for them
Week 5 : I found out that I make a mistake when saving the HTML code as I need to save it as "title.html" instead of "title html". Without the "." , the code will not work in the webpage.
Week 6 : I learned that I will need to create a CSS file to change the style of my content instead of just changing at the HTML file. With the exercise given, I also got to have the basic understanding on HTML and CSS file.
Week 7 : I got to know that it is important for us to check on the spelling when typing the elements. I experienced it when I spell the the word "width" wrongly and the code doesn't work on the preview.
Week 8 : I found that coding for the layout with external style sheet is not as simple as creating the layout with Adobe Illustrator since we can just click and drag to create the layout that we want. In addition, the process of coding will be more challenging if the layout is complex.
FURTHER READING (WEEK 2 - WEEK 8)
Week 2
Design Your Imagination (E-Book)
By: WebGuru India
This week, I found a free e-book - Design Your Imagination and I have read about the basic website design principles. When designing web, there are some principles that a designer should know to make sure the website created is going to be successful and effective. The most important principle that we should always keep in mind when designing website is its purpose. The designer have to think for the goals or aims of the sites before starting its planning. Besides that, fonts size also one of the principles that need to be concerned for web design. It is better not to use fonts of size 10px or less than that. Size 14px is considered to be the ideal size for the website. In addition to maintain the font size, the designer also need to consider the line height as well as the space between two lines in a paragraph so that the reader can read easily.
Moreover, usability is also important when designing the website. The textual content should be easily read and the content on the pages must be easily accessible. Visual clutters need to be avoided so that users can scan through the website easily. Another principle that need to be aware is the website colour theme. It is recommend to limit the use of colours in website. Simple colours are always preferred for web designing because it is always easy to comprehend for users. For beginners, the author suggested to recreate the existing designs and learning from it.
Week 3
Typographic Design : Form and Communication
By: Rob Carter, Philip B.Meggs, Ben Day, Sandra Maxa, Mark Sanders
Designing websites usually involves three layers of functionality: structure, presentation and behaviour. HTML specifies the structure of content, controls the presentation of the content, and Javascript, a scripting language that is usually embedded directly into HTML pages and provides websites with interactive capabilities for controlling the layout of content. With the release of CSS3, interactivity can also be achieved through style sheets.
HTML (Hypertext Markup Language) : Markup tags or code that describes hierarchy, structure or function of content to be displayed in a web browser. Every item to be displayed on the page is marked up with these tags.
CSS (Cascading Style Sheets) : Control the presentation of information contained in an HTML file. Used to control page composition; specify exact type sizes, weights, and styles as well as manipulating inter letter, interline, and interlard spacing by using style sheets.
JavaScript and JavaScript libraries : Scripting language widely used to create dynamic and interactive web pages. It is maintained as source code embedded in HTML pages, which are otherwise static rather than dynamic. Used by web developers to validate from input, create image rollovers and open pop-up windows.
Week 5
 |
| How to Design Websites By: Pipes, Alan |
From this e-book, I have read about the topic “layout” for web design. It said that it is simple for the designers nowadays to produce layouts that will be both standards-compliant and accessible to all with CSS (Cascading Style Sheets). The designers had few options when it came to laying out the web pages. They had to use wither framesets or tables to attempt any form of controllable layout. However, these both methods are unsatisfactory for some reasons and have been replaced by CSS.
A frameset use to divide a web page into different segments and each frame containing and displaying a separate HTML document. The repeating parts of layout such as navigation can appear in one frame, while variable content is displayed in another. Headers and sidebar menus remain in the same position if the content frame is scrolled up and down. This bring convenient for the designers to add an item to the sidebar menu as they only need to update one file, whereas on a non-frameset website each individual page would have to be edited. However, there are few disadvantages of framesets. They can break the link between the content and its URL which makes it difficult for other sites to link particular pages or bookmark a particular frame of content. Besides that, they don't usually print the way that user expect and clicking an external link on a frames-based page may result in someone else’s pages appearing within your frames ad infinitum. Lastly, the frame will develop the scroll bars and making the page looks cluttered and messy when looking at the screen resolution or browser window size that is too small.
A table is a grid of rows and columns just like a spreadsheet. Layouts can be produced by filing some cells with content, with other empty cells acting as spacers. The transparent single-pixel GIF images resized to a specific weight and height attributes as to attempt any form of controllable layout. Tables can be nested in other tables to produce a complex layouts and this is how Dreamweaver generated the layouts.But it is a long process to code as if we want to publish an exact layout on the web, we need to link it to a PDF file which is a slow and unsatisfactory method. We were also required to install plug-ins or to download and view in a PDF reader. This is because some browsers allow you to view PDF in HTML, but the quality is poor and it defeats the object anyway.
Week 6
 |
Web Bloopers : 60 Common Web Design Mistakes, and How to Avoid Them
By : Jeff Johnson
|
According to the authors, the web is about the content. It doesn’t matter whether the website is easy or difficult to use but if the content of the website is not useful, entertaining, up to date or trustworthy, the people who visit your website will not return. There are some bloopers that we have to know in web content. First, home page identity crisis. Homepages should always allow the users to have quick scan and able to determine the site’s purpose. With a good homepage, the users can determine quickly whether the site has something of interest to them or not. Homepages that don't let the users easily do this commit not only content blooper but also navigation blooper.
Besides that, confusing classifications is also considered as blooper. The organisation of the web content is one of the most important aspects. The schemes used to categorise and classify the products, service and information on a website can make or break the site as they will affect the difficulty of the users to find what they want. Thus, the content organisation will affects the navigation.
Moreover, the unhelpful descriptions in the content. The authors advised that the information about the items should allow people to determine whether any are what they looking for. In addition, the conflicting content. The conflicting information on a website will create uncertainty in the minds of the visitors. Next, the outdated content. It is bad that the information shown in the website is out to date especially when the website is for business purpose. This is because the content like product availability, prices, special offers, sales, articles and so on are supposed to change over the time. Last but not least, missing or useless content in the website. The authors claimed that the sites that are missing the content are just using up space and domain names as the content is primary on the web. Lastly, unfinished content, special case of websites missing content that obviously shown the website have not been finished. In some cases, the sites were knowingly put online while still under construction. But there are also cases the content missing because of an oversight. The developer failed to check all the pages before making the website live. This will make the poor impression from the visitors to your website. In this book, the authors have also discussed about the things that we can do to avoid all those bloopers in content.
Week 7 - Week 8
Week 7 - Week 8
 |
| Beginning CSS: Cascading Style Sheets for Web Design By: Ian Pouncey &Richard York |
There are few advantages of using CSS. Firstly, the presentation of the entire website can be centralised to one or a handful documents and it enable the look and feel of a website to be updates at a moment's notice. The presentation is contained entirely in the body of each document in legacy HTML documents and CSS brings a much needed feature to HTML by separating the document's structure from its presentation. Besides that, there is a feature that allows more than one design of a website to be presented at the same time. The user can simply select the look and feel that he or she likes most. Previously, this can only be done with the help of more complex programming languages. In addition, the style sheets allow the content to be optimised for more than one type of device. Different versions of a website can be presented for handled devices such as PDAs and cell phones or for printing with the same HTML document. Other than that, the style sheets can download much more quickly because web documents using CSS commonly consume less bandwidth. Lastly, the users of a website can compose style sheets of their own, a feature that makes websites more accessible. Overall, CSS help in accessibility, applicability to more than one language and to more than one type of devices. It allows the websites to be planned, produced and maintained in much less time. It also enables the websites to take up significantly less bandwidth than formerly possible.
Comments
Post a Comment