31189a – Progress Challenge 07

31189a – Progress Challenge 07

Review and confirm

NOTE: This challenge will help you complete assessment 3.

Design a short questionnaire of 10 questions to gather feedback about your designs. Contact at least five people willing to assist with this. Ask them to respond and provide meaningful feedback about the work you have completed in Part C, in particular the static screen design.

v     Compile all the pages you have worked through in the assessment up to this point into a final well-presented document. Include a table of contents, title and your name.

v     Check that the design is a strong solution to the original brief.

v     Check that all the required parts are listed, including a sample of your questionnaire.

v     Refine or add other components to your design in light of feedback from your client (trainer) and others.

v     Export the document as a .pdf and submit the document for marking.

Answer

Establishing client needs

According to Luke Reimer[1] in Smashing Magazine, the web design process has five main steps:

1.      Planning: Knowing what the client’s requirements are; drawing up a project charter (or similar document) to ensure everyone agrees upon the same things; draw up a site plan or map; draw up a contract (which is legally binding); gain access to servers and build folder structure; and determine required software and resources.

2.      Designing: Make a wireframe and plan design elements; design a mock-up in Photoshop or Illustrator (and organise your prototype into layers as you do so); get the client to review/approve site and/or make any necessary changes based on their feedback.

3.      Develop the web content: Build a development framework or contents management system, create/code templates for each page type (e.g. Home page, general content, blogs, forms etc); develop and test for features and user interactivity (particularly for static objects); fill with content (the client or writer will usually do this); and test and verify links and functionality.

4.      Launch the website for public viewing: this involves polishing up the site and testing for user interactivity beforehand, and then moving it to a permanent web server.  You also need to run the website through the following things: code validators, broken link checkers, website health checks, spell-checker etc; before finally testing it across different kinds of browsers.

5.      Perform post-launch checks: ensure that both parties meet all the contractual obligations; that the client is happy with what you have done for them; and that you close the deal without any ‘burned-bridges’.  Do follow-up checks very now and then to ensure the client is still satisfied.

Ten questions I am likely to ask (in the beginning) would include:

1.      What do you want as the domain name?

2.      What is the purpose of the site?  Is it a blog, e-commerce site, portfolio site, etc?

3.      What are the desired outcomes of the site?  Social networking?  Sales?  Blogging?

4.      What kinds of people make up the target audience of the site?

5.      What web design software do you want me to use? 

6.      If it is a DIY site, what online tools would you use or have me use?

7.      How many pages and/or components (i.e. widgets and other elements) shall I include?  Examples would include forms like contact forms, order forms, booking forms; videos; web banners; click-on things like drop-down menus and navigation; and accordions or tabs to reveal hidden information.

8.      What colour schemes, fonts, and layouts would you like to see?

9.      For how long do you plan to have the site up?

10.  Would you like follow-up service after the design is finished?

Establish your target audience

What audience is the site aimed at?  An example would be John’s customers – the people buying the bags from The Bag Lady and/or the end users (who are likely to use the bags).

Work out the best User Experience for your target audience

The Open Colleges e-book defines User experience (UX) as:

… thinking about how a user interacts with a site. It considers the user’s expectations and abilities, and why they may be visiting a site. A good web environment tries to improve the user’s experience as they navigate around a site. 

They also add:

One way to consider the usability of a site is to use the Usability Honeycomb by Peter Morville (visit LINK 4 to find out more). Ask yourself if a particular site meets these conditions –

Hence, we judge the site by these criteria:

• Useful: Meets a need – people can access information on The Bag Lady’s products and services
• Usable: Easy to use – navigation bar at top showing categories of products, store locations, departments; able to click on the images for more information on the different products, rolling banner showing latest news; disclaimers; cookies policy – makes information easier to access
• Desirable: Carries through the branding of the product and creates an image – the logo and colour scheme are shown throughout the site.
• Findable: Desired content is easy to find – the site is accessible via Google and other search engines; and information is available via navigation bar and other links within the site. 
• Accessible: People with disabilities can access the information.  Actually, I am not sure, because people with visual impairments might not be able to access the site.  However, the availability of online ordering makes it easy for people with mobility issues to purchase items.
• Credible: The information presented is trustworthy and up-to-date.  There is a Terms and Conditions page[2], privacy policy and cookies policy.  In addition, there is a returns policy for anyone dissatisfied with his or her purchase.

(As well, you should be able to follow the site through social media if you cannot always look up the website).

Testing

As my computer has Google Chrome and Internet Explorer, I am most likely to use these browsers to test the website.   So, what I would need to know is what browsers does my client use, how will the website look when using them, and what devices will the client use?  In turn, this will determine how I will design the web site, in terms of what content could I include on it, whether or not I would have to do a fixed or fluid width, include responsive or static content, or should it be mobile-only site.

Hardware and software

What hardware and software would the site work best on? How would John consider getting the word out there via media?

Category Description and comparison

Delivery platforms

v     These include CD-ROM, DVD, BlueRay, mobile device, digital television, internet (including WWW, FTP, document attachment/ download, instant messaging, social media).

For this, I chose digital TV (DTV).  Here in Australia, DTV was introduced as Digital Terrestrial TV, while analogue TV was phased out in 2013[3].  It first came to air in the early 2000’s.  Wikipedia defines Digital television (DTV) as:

… The transmission of audio and video by digitally processed and multiplexed signal, in contrast to the totally analogue and channel separated signals used by analogue television. Digital TV can support more than one program in the same channel bandwidth[4].

The advantages of digital over analogue TV include sharper DVD-quality widescreen pictures, CD-quality digital stereo sound and improved reception. Digital TV also enables broadcasters to offer more services or show multiple programs at the same time and a number of new TV channels to choose from. Other benefits include closed captioning, providing deaf and hearing impaired people with a text version of dialogue, electronic program guides which display on screen information on current and future programming and multi view, where different camera angles of a program, such as a sports program, can be viewed[5] (mind you, this is not on my own TV, but some top-of-the-range brands include this feature). J

You can receive digital TV on your current analogue television provided the television can be connected to a set top box. Alternatively, digital TV signals can be received on an integrated digital television where a digital receiver is built into the set.  All you needed was a TV and a good aerial when it was just analogue TV. J

This would be useful in considering if John had intentions of advertising on television (digital TV has now replaced analogue TV for transmission).

Operating systems

v     These include Apple, Windows, Android, UNIX, Linux, Nintendo, and Sony.

I mostly use Windows, so I thought I would write about their main competitor, Apple (also called a Mac, an Apple Mac, or Apple Macintosh).  This is usually the term for desktop and laptop computers.  The iMac[6] is the desktop model; the Mac Book[7], Mac Book Pro[8] and Mac Book Air[9] are all laptop models.

One obvious advantage of the iMac is its onscreen image quality (or what they call Retina display).  Other advantages or benefits of owning an iMac include high storage capacity and performance; not to mention a slick design.  The same could also be said of the Mac Books – Apple also boasts of long battery lives (of 10-12 hours) for all its laptop models (which are what you want when you are on the go).  Additionally, the Mac Book Pro has a function bar on the top of a keyboard that replaces the function (F 1-12) keys and a touch ID (this is all new to me).  However, these are all the latest models that Apple has to offer. J

The name of the Operating System for Macs is the MacOs[10] - you can use it with your other Apple devices (iPhone or iPad); back up the files using iCloud and ask Siri to find files for you (Siri, being the app, where all you have to do is speak into a microphone and the app will find what you are after).  Windows 10 has a similar application called Cortana, which also performs the same function.

The main drawback of Apple Macs (in comparison to Windows or PC’s/personal computers) is the cost.

Relevance – John may well use a different operating system from my own if he wants to work on the website himself.

Delivery speeds

v     These range from Modems offering delivery from 14.4 kbps to cable and now the NBN Rollout.

The quicker the delivery speed, the easier it is to ‘spread the word’.

Plug-ins

v     These include: Flash, QuickTime, Real player, Windows Media Player, Acrobat

Swf[11]: is an abbreviation for ‘small web format’ (and is known as Shock Wave file) - an Adobe Flash file format used for multimedia, vector graphics and Action Script.  SWF files can contain animations or applets of varying degrees of interactivity and function.  Swf’s uses include multimedia – online games, animations, videos and other motion graphics.  One can generate swf files using Adobe software packages like Flash, Flash Builder (an IDE), Adobe Animate (the replacement for Adobe Flash as of Feb. 2016), and After Effects.

QuickTime[12] is an extensible multimedia framework developed by Apple Inc., capable of handling various formats of digital video, picture, sound, panoramic images, and interactivity. First made in 1991, the latest Mac version, QuickTime X, is currently available on Mac OS X Snow Leopard and newer.  In other words, QuickTime plays videos for Mac and other Apple OS.  Advantages of QuickTime are that it is available free of charge for both MacOs and Windows operating systems. There are some other free player applications that rely on the QuickTime framework, providing features not available in the basic Quick-Time Player.  Disadvantages: QuickTime is bundled with MacOs. QuickTime for Microsoft Windows is downloadable as a standalone installation, and was bundled with Apple’s iTunes prior to iTunes 10.5, but is no longer supported and therefore security vulnerabilities will no longer be patched.

Windows Media Player[13]: this is the media player available for Windows and Windows Phone operating systems. However, Mac users can download Windows Media Components for QuickTime to play Windows Media files.

Acrobat:  Adobe Acrobat[14] is a family of application software and Web services developed by Adobe Systems to view, create, manipulate, print and manage files in Portable Document Format (PDF).  The Portable Document Format (PDF)[15] is a file format used to present documents in a manner independent of application software, hardware, and operating systems.  Each PDF file encapsulates a complete description of a fixed-layout flat document, including the text, fonts, graphics, and other information needed to display it. A PDF file captures document text, fonts, images, and even formatting of documents from a variety of applications. You can e-mail a PDF document to your friend and it will look the same way on his screen as it looks on yours, even if he has a Mac and you have a PC.  Hence, the advantages of Acrobat are that regardless of what hardware, operating system or software you or your recipient uses, you can still send or transfer documents to their computer, or view them on your own.  Moreover, you can create, print and manage these same files, as long as you have the software on your computer.  You can also download the software free.  The main drawbacks of Acrobat are security issues e.g. OUTLOOK.PDFWorm or Peachy; and usage restrictions e.g. PDF files may also contain embedded DRM restrictions that provide further controls that limit copying, editing or printing. The restrictions on copying, editing, or printing depend on the reader software to obey them, so the security they provide is limited.

If, for instance, John wanted a website that had downloadable files (say, for instance, PDF files for downloadables, Flash or Shockwave for videos or animations, and so forth), then a plug-in might be necessary for people to access these files.

Programming

v     these programming languages include: PERL, SQL, CGI, HTML, ASP, jQuery, JavaScript

I am not fully familiar with many of these programming languages; however, the most common three languages used for web design include HTML, CSS and JavaScript[16] (This is not to be confused with Java (the programming language) or Java (the operating platform).  Moreover, like Java, one should *not* confuse it with the Javanese (Indonesian) language). J

Programming languages related to HTML and CSS include Bootstrap (for mobile sites); W3 CSS; Icons, and graphics.

Programming languages related to JavaScript include jQuery; jQuery Mobile; AppML; AngularJS; JSON and AJAX

Java:  Java[17] was originally developed by James Gosling at Sun Microsystems (which has since been acquired by Oracle Corporation) and released in 1995 as a core component of Sun Microsystems’ Java platform. The language derives much of its syntax from C and C++, but it has fewer low-level facilities than either of them.  Java was originally designed for interactive television, but it was too advanced for the digital cable television industry at the time.  One advantage of Java (as a programming language) is its adaptability – it can operate on any hardware and operating system with adequate run-time support.  However, Java is notorious for being slow and requires more memory than programs written in C++ and other object-oriented languages – particularly when it comes to web browsing.  Uses for Java include the ‘Hello World’ program, Java applets (in HTML pages), Java servlets (to answer online client enquiries), and Android operating systems.

JavaScript[18]:  Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production; the majority of websites employ it, and all modern Web browsers support it without the need for plug-ins.  Although there are strong outward, similarities between JavaScript and Java, including language name, syntax, and respective standard libraries, the two are distinct languages and differ greatly in their design. JavaScript was influenced by programming languages such as self and Scheme. JavaScript is also used in environments that are not Web based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMs) and platforms built upon them have also increased the popularity of JavaScript for server-side Web applications.  Netscape originally developed JavaScript, collaborating with Sun Systems in the process.  Later on, it was adopted by Microsoft and is now a trademark of the Oracle Corporation.  Uses for JavaScript include: The most common use of JavaScript is to add client side behaviour to HTML pages, also known as Dynamic HTML (DHTML). Scripts are embedded in or included from HTML pages and interact with the Document Object Model (DOM) of the page. Some simple examples of this usage are:

v     Loading new page content or submitting data to the server via Ajax without reloading the page (for example, a social network might allow the user to post status updates without leaving the page).

v     Animation of page elements, fading them in and out, resizing them, moving them, etc.

v     Interactive content, for example games, and playing audio and video.

v     Validating input values of a Web form to make sure that they are acceptable before being submitted to the server.

v     Transmitting information about the user’s reading habits and browsing activities to various websites. Web pages frequently do this for Web analytics, ad tracking, personalization or other purposes.

JQuery[19]: a popular JavaScript library designed to simplify DOM-oriented client-side HTML scripting along with offering cross-browser compatibility because various browsers respond differently to certain vanilla JavaScript code.

Anyway, I chose these three languages, so one of these days; I will understand the meanings of these three terms.

Server side languages include: SQL (Database language); PHP (an alternative to HTML[20]), Unicode[21] and ASP (Active Server pages[22]).

John might not have knowledge of any programming languages.  However, anyone designing a site or an app for his business needs this knowledge.

Authoring software

v     These include Dreamweaver, InDesign, Flash, and Muse.

Some of these software applications include:

Adobe AIR (Adobe Integrated Runtime): a programme by Adobe that allows designers to create applications and video games for phones and tablets using Adobe Flash content and Action Script 3.0 software to allow users to run them as a native application and outside of a web browser[23]. In other words, one can install and use them as a separate app on their desktop or laptop computer, or they can use them on their phone or tablet.  Examples of applications designed using this software include eBay Desktop, Pandora One desktop, Tweet Deck, the former Adobe Media Player, Angry Birds, and Machinarium, among other multimedia and task management applications[24].

Adobe Flash[25]: This software, formerly Macromedia Flash or Shockwave Flash, is a multimedia software platform for production of animations, browser games, rich Internet applications, desktop applications, mobile applications and games. It also displays text, vector and raster graphics to provide animations, video games and applications, allows streaming of audio and video, and can capture mouse, keyboard, microphone and camera input.

Again, a web designer will need to know these things, even if John does not.

Browsers

v     These include Chrome, IE, Firefox and different versions.

Firefox[26] (also known as Mozilla Firefox) is an internet browser in direct competition with other browsers like Chrome and IE – previously, it was known as Netscape[27] or Netscape Navigator[28].  I have never used it so I do not know what it is like.  However, many users reported Firefox to be slower than other browsers like Google Chrome but faster than Internet Explorer.

I have, however, used Chrome, IE and Safari.  So far, on a desktop, I have found Chrome to be faster than Internet Explorer but about the same as Microsoft Edge when it cam to browser speed; and Chrome to be more usable when it came to accessing any links that needed to be accessed (some of which I couldn’t access on Microsoft Edge).

Screens

v     In terms of Sizes, resolution and colours.

Safe areas (screen sizes)[29]: Safe area is a term used in television production to describe the areas of the television picture that can be seen on television screens.

Older televisions can display less of the space outside of the safe area than ones made more recently. Flat panel screens, Plasma displays and liquid crystal display (LCD) screens generally can show most of the picture outside the safe areas.

The use of safe areas in television production ensures that the most important parts of the picture are seen by the majority of viewers.

The size of the title-safe area is typically specified in pixels or percent. The NTSC and PAL analogue television standards do not specify official over scan amounts, and producers of television programming use their own guidelines.

Resolution:[30]

1. The definitions of the safe areas are given in numbers of lines for the vertical direction and number of pixels for the horizontal direction, which are now more definitive than the percentages used previously. However, percentages are also included because they are the basis on which comparisons they make.
2. The line numbering of interlaced scanning rasters has been calculated on the basis that field 1 is paired with the field 2 line below it, and the line from field 1 which is just inside the percentage box is defined as the edge of the safe area concerned.
3. The pixel numbering has been calculated by using the same notation as in SMPTE 274M/296M and ITU-R BT.1120-7, in which the first sample of the active part of a digital line is counted as value “0”. For HD services, this is also the first sample of the active image.
4. The safe areas are defined by the first and last safe line in vertical direction and by the first and last safe pixel in the horizontal direction. In addition the total number of lines (vertical) and pixel (horizontal) which are within the safe areas are given.
5. The coordinates of the centre of an image are defined as - vertically, there will be an equal number of lines within the clean aperture above and below the centre point, and - horizontally, there will be an equal number equal number of pixels within the clean aperture to the left and the right of the centre point.

Colours:  RGB and CMYK – RGB (Red, green and blue) – for screens (unlike CMYK for print).

Again, whether John is advertising his business via TV or the Internet, he will have to know how to effectively advertise the business and merchandise in a manner that is visually pleasing to the audience (or if he doesn’t, then the web designer assigned the task will need to know these things).

Compression

v     Compression Audio, video.

Digital compression for HD TV: these enable TV stations to transmit signals to digital, audio and video signals to one’s TV.  More on digital compression for TV can be seen here[31].

Audio: MP3 (MPEG-3), WAV (uncompressed sound), WMA (Windows) – amongst others.

With compression – the greater the compression, the easier it is for a file to transmit; however, the drawback is that it declines in quality.

For instance, if John wanted ads for his business, then he would have to consider how he would advertise online for these via YouTube, Vimeo or some similar site.

Standards

v     These include the W3C site, accessibility, usability, and SCORM.

W3C site[32] – this is used to test whether or not the links are valid, unbroken and take you to the pages that you need to see.

Accessibility – the Internet needs to be accessible to all, regardless of age[33], ability, gender, geographic location, ethnic or linguistic background and so forth.

Usability – everyone needs to be able to use the site, hence the navigation must be quick and easy, you must be able to buy and sell securely online, access information, the site must be frequently upgraded and be quick to load.

People will want to be able to use the site and access it, which is vital for John getting the word out there, so they will buy his merchandise.

Test and validate the site

According to Wikipedia, the three most popular browsers are Google Chrome, Firefox and Safari.  Internet Explorer is sixth down this list[34].  The latest results of another study by the W3 School[35] of five different browsers (Chrome, Firefox, Internet Explorer, Safari and Opera) suggests that Chrome enjoys the highest rates of browser usage at 73.7%, followed by Firefox (15.5%), and then Internet Explorer (4.8%).

As my computer has Google Chrome and Internet Explorer, I am most likely to use these browsers to test the website. 

So, what I would need to know is what browsers does my client use, how will the website look when using them, and what devices will the client use?  In turn, this will determine how I will design the web site, in terms of what content could I include on it, whether or not I would have to do a fixed or fluid width, include responsive or static content, or should it be mobile-only site.

This may have some bearing as to what browsers a customer might use to access information on The Bag Lady – if Chrome, for instance, is the most popular browser among John’s customers, then a person will take more notice of a site that looks good in that browser.  However, if that person also uses Internet Explorer, then they will be more likely to look at the site in that one also.  Hence, it always pays to test in more than one browser, and one type of device.  I can also say that W3 validator site also has the same function for testing for broken links (as a customer can be put off looking on that site if there are one too many links that lead you to basically ‘nowhere’ and display error messages instead of the page they are intended to display).

---

[1] Reimer, L (2011): Following a Web Design Process; https://www.smashingmagazine.com/2011/06/following-a-web-design-process/

[2] http://www.ikea.com/ms/en_AU/media/pdf/tasmania/IKEA_terms_2015_Tasmania.pdf

[3] https://en.wikipedia.org/wiki/Digital_terrestrial_television_in_Australia?oldid=753505491

[4] https://en.wikipedia.org/wiki/Digital_television?oldid=752611422

[5]http://www.acma.gov.au/Industry/Broadcast/Spectrum-for-broadcasting/Spectrum-digital-television/digital-television-frequently-asked-questions

[6] http://www.apple.com/au/imac/

[7] http://www.apple.com/au/macbook

[8] http://www.apple.com/au/macbook-pro/

[9] http://www.apple.com/au/macbook-air/

[10] http://www.apple.com/au/macbook-pro/macos/

[11] https://en.wikipedia.org/wiki/SWF?oldid=751715503

[12] https://en.wikipedia.org/wiki/QuickTime?oldid=749513813

[13] https://support.microsoft.com/en-us/help/14209

[14] https://en.wikipedia.org/wiki/Adobe_Acrobat?oldid=755248526

[15] https://en.wikipedia.org/wiki/Portable_Document_Format?oldid=756427043

[16] http://www.w3schools.com/default.asp

[17] https://en.wikipedia.org/wiki/Java_(programming language)?oldid=753640952

[18] https://en.wikipedia.org/wiki/JavaScript?oldid=753351126

[19] https://en.wikipedia.org/wiki/JavaScript?oldid=753351126

[20] https://en.wikipedia.org/wiki/PHP

[21] https://en.wikipedia.org/wiki/Unicode

[22] https://en.wikipedia.org/wiki/Active_Server_Pages; and https://www.tutorialspoint.com/asp.net/pdf/index.pdf

[23] https://en.wikipedia.org/wiki/Adobe_AIR?oldid=753020098

[24] http://help.adobe.com/en_US/air/build/air_buildingapps.pdf

[25] https://en.wikipedia.org/wiki/Adobe_Flash?oldid=751325915

[26] https://en.wikipedia.org/wiki/Firefox?oldid=752616644

[27] https://en.wikipedia.org/wiki/Netscape

[28] https://en.wikipedia.org/wiki/Netscape

[29] https://en.wikipedia.org/wiki/Safe_area_(television)?oldid=698544425;

[30] see also https://tech.ebu.ch/docs/r/r095.pdf

[31] https://en.wikipedia.org/wiki/High-definition_television?oldid=753280917

[32] https://www.w3.org

[33] https://www.w3.org/WAI/older-users/ and https://www.w3.org/WAI/older-users/developing

[34] https://en.wikipedia.org/wiki/Usage_share_of_web_browsers

[35] http://www.w3schools.com/browsers/