Static Website with speech synthesis for accessibility. Coursework.
=================
Realisation -- Home page -- Accessibility Mode 9
Realistaion Presentation Mode - Mobile animations. 10
Realisation -- Presentation Mode -- Desktop- ANIMATIONS 12
Realisation - Contact Us page 13
Realisation - About Us page 14
Accessibility Mode -- speech synthesis and stylesheet replacement 17
Home Page -- Presentation Mode 18
Testing Speech Synthesis -- illustrations. 20
Source Code -- Plain Text (colour formatted) 22
AccessibilitySplashCarousel.css 45
Technique known as wireframing , will help to focus on design goals.
Page
Modern institutions, banks , and high-street shops mount digital screens on the display windows or in the reception/waiting room. Dennis et all (2010) explores performance of this approach. This strategy allows business to catch the attention of the customer and explain their business through presenting dynamic and graphical content, without referring to static, long and unattractive paragraphs , additionally overcoming language-barrier in the first stage of customer engagement. As JS Wedding Planners still have physical branch in Birmingham where customers are served, they can easily utilise their website for these purposes. Implementing this technique on the web is known as Splash page, Welcome page. One of approaches engaging attention through animation is Slider/Carousel Technique, achieved by moving sequence of slides into main view. There is ongoing discussion in user experience circles should Navigation Bar is to be avoided, especially in case of small websites (Rizki, 2018).
Figure 1. Responsive layout on mobile devices.
Mobile version of layout in this case is modified only by reconfiguring navigation structure.
Figure 2 responsive layout on mobile devices
[]{#_Toc532649152 .anchor}Design -- Contact Us page.
Figure 3. responsive layout on mobile devices
Figure 4.Ongoing Animation screenshots - Mobile IOS.
Figure 5.Ongoing Animation screenshots - Desktop
logos are substantial element of brand identification, modern browsers and OS offer ways to signify your brand identity through icons, home button icons, helping user to navigate between open tabs , or native selection elements. By saving image files to root of our page we indicate these systems to display our logo as a thumbnail. Favicon file , and properly sized png images have to be saved with browser configuration manifests that meet specification.
Figure 6. Icon shows properly in native environments. From top left: iOS, Android Home Button, Android Firefox, Whatsapp Sharing Function, Desktop Chrome, Desktop Firefox .
Utilised modern browser capabilities to synthesise speech for disabled users. First , small script detects if device is touch enabled, avoiding use of browser API, that proves not completely compatible with variety of devices using different input method. Simplest method is to listen for touch event, as this provides the full-proof evidence of touch enabled device.
Figure 7. Testing Accessibility Mode Speech in Firefox and Chrome.
I ran Wamp server on my computer since year and managed to configure it in such a way, that it is accessible online in my LAN . I run Private projects utilising WAMP and LAN websockets communication, thus to avoid risk of loosing proper configuration, or some of projects, I decided to not reinstall the server. As a consequence there is no screenshots illustratinginstallation process. As an Alternative Solution, I deployed the project by FTP on free webhosting service, X10Hosting.com, accessible under the link .http://www.produccio.x10host.com/JSWeddingPlanners/A/
Figure 8. WAMP server running on localhost, with full LAN access.
-
Rizki, R. R. (2018) 3 Good Reasons Why You Might Want to Remove that Hamburger Menu from Your Product, Muzli - Design Inspiration. Available at: https://medium.muz.li/3-good-reason-why-you-might-want-to-remove-that-hamburger-menu-from-your-product-69b9499ba7e2 (Accessed: December 15, 2018).
-
Dennis, C., Newman, A., Michon, R., Josko Brakus, J. and Tiu Wright, L. (2010). The mediating effects of perception and emotion: Digital signage in mall atmospherics. Journal of Retailing and Consumer Services, 17(3), pp.205-215.