7.  Specialist Area Reading time: 13 minutes

¹Your specialist topic should reflect an area where you have particular expertise. This may be unique to you or common across your team but goes beyond what would be expected of any learning technologist.

by Association of Learning Technology

Introduction:

With a keen interest and strong abilities in web design and development, I provide training, support and guidance, to new and existing students at UWL , and the wider audience internationally. I also develop my own sites for personal or commercial projects that I am interested in. In the current digital age, web designers and developers, whether front-end, back-end or full-stack, in all proficiencies, such as JavaScript, PHP, HTML and CSS, JSP, .NET, Java, and more, are in increasing high demand. With requirements for web design and development changing, nowadays, it is not enough to know how to design and develop a website, but you should also be familiar with good design principles to set yourself apart.

Web design principles:

These are guidelines for web design and development that all web designers and developers must know. The following are the key guidelines (this is not an exhaustive list):

• From the BACK-END (coding principles):
  • Presentation and Format: the code must be easily readable and understandable, and must be well formatted as per the requirements of the programming language used ( view)
  • Reference: the code must be comented for reference and confirmation ( view)
  • Usability: the code must be re-usable for development of future projects whenever possible and/or appropriate
• From the FRONT-END (design & accessibility principles):
  • Accessibility: the code must have built-in accessibility features for users of assistive technology and mobile users ( view)
  • Design: the code should create a good design that is not only engaging, but also intuitive and fun, where appropriate ( view)
  • Interactive: the code can have interactive features that allow for increased user engagement. Examples of this are the interactive modal view for images ( view), and the accordion design showcasing learning technologies I have used

Research:

My suspecions and expectations were confirmed by the research I conducted to prove the best way to design and develop a website. The guidelines above are considered to the the least expected of any web designer or developer to know about, with the following providing additional guidance and information:

• Based on the Web Content Accessibility Guidelines (WCAG) 2.1 , websites must be:
  • Perceivable : information and user interface components must be presentable to users in ways they can perceive. For instance: providing text alternatives to explain what element or the type of information it is expecting, content must be distinguisable to show their differences based on importance - for important information, actions they can perform - for buttons, links or other call to actions and more.
  • Operable : user interface components and navigation must be operable. For instance: keyboard accessibility - for navigation assistance, providing enough time - for video content, pop-ups, interactive sections e.t.c and more.
  • Understandable : information and the operation of user interface must be understandable. For instance: when using abbreviations, provising their full form so users can understand what you are trying to convey, include input assistance for for displaying errors on forms and other similar elements that require user inpt or interaction, content predictability - for hover, focus, visited and other similar states
  • More on Robust and Conformance are available as well.
• Developers at Adobe XD say:
  • Simplicity, clarity and consistency are key for designing predicitive websites and or other applications. This is important because it reduces the time for the use to find the information they need while navigating your site. Read more on their site
  • Expected functionality is also important in web design because it tells the user what to expect when they interact with an element on your site. For instance: differentiating links with different colours and/or underlines and possibly including informative icons such as to indicate external links ( view). I have built all these features into this project and several more. Read more on their site
  • Content location trails/Breadcrumbs are useful features to have because they allow the user to understand how the website content is grouped and presented to this. This makes it easier for them to find content and navigate across your site with ease, hence creating a better viewing experience
• Additional guidelines and examples are available at:
  • W3.org Website and Applications
  • W3Schools HTML Style Guide and Coding Conventions

Tools exploration:

I have taken the opportunity to delve into researching and trying different tools to be used for web design and development. This has introduced me to a number of excellent tools to be used in all sorts of situations during web design and development.

The following are some examples:

• For Website Design and Prototyping:
  Recently, I have started using Adobe XD to design prototypes for my websites ( view) and applications before development. Depending on the type of subscription you have, it provides access to the prototypying features that allow you to create connectors with different screens of your design for flow visualisation. This is a great way to see whether the design you have come up is navigable and understandable from the user's perspective.
• For Development:
  
  • Software:
    In web design, the choice of software available are wither plain text editors or integrated development environments (IDE). I prefer to use plain text editors such as Visual Studio Code , Sublime Text , Brackets , Atom , Notepad++ and more
  • Packages and Frameworks:
    All major programming, styling or scripting languages that I use currently have a variety of avaialble packages and frameworks. These are extensions to the original language that provide further abilities, features, short-hands and more that were not in the original programming language.
    • In Cascading Stylesheets (CSS) : I use Tailwind.css which is a flex-box-based CSS framework that leverages CSS built-in features to design and develop complete, interactive and respsonsive websites without writting a single line of CSS, SaaS , SCSS & LESS are CSS frameworks that provide additional features such as the use of variables, code dependencies, code-reuse, includes and imports and more.
    • In HyperText Preprocessor (PHP) : I use Laravel which is a PHP-based framework that uses an Model-View-Controller (MVC) development approach to develop powerful PHP applications with less code. This framework has built-in dependencies that manage routing, database connections and interactions and more. It also uses templates to develop web-pages of a similar design without having to create several individual pages.
    • In JavaScript (JS) : I use Vanilla JavaScript which is the original JavaScript programming language. It is from it that frameworks such as Vue.js , Express.js , React.js and more have been developed. It is also where the back-end JavaScript programming language known as Node.js was developed. I intended to learn Vanilla JavaScript first and later progress to frameworks such as React.js and the back-end programming language - Node.js.
• For Version Control:
  I also use GitHub to manage my code, collaborate with others, as a storage repository and most importantly - for version control. With its version control features, GitHub creates a repository of the different versions of your codes to allow you to see the progressive changes you have made as you develop your project. It users branches to create specific pathways that can be edited during design without affecting the main design of you project. Once testing is completed, each branch can be incorporated back into the main project branch.
• For Testing:
  To ensure that the websites I develop follow the required accessibility criteria for users of assistive technologies, I use online accessibility checkers such as Web Accessibility Evaluation Tool (WAVE) ( view), content layout and design with online markup testers such as NU HTML Checker from W3Schools ( view) and web developer tools such as Mozilla Firefox Developer Tools ( view) to dissect a website and test its responsiveness among other things.
• For Communication:
  I mainly use Microsoft Teams & Slack to communicate and collaborate with colleagues and trainers. Further details of this are discussed in 6. Communication and working with others.
• For Further Study:
  Whenever I need to learn something new, develop my skills, find free code examples and more, I visit learning platforms, developer website for examples and specified programming communities for support. The most that I visit frenquently for these purposes are LinkedIn Learning , Udemy , W3Schools , CSS Tricks , Adobe Creative Cloud Community
• For Resources:
  Whenever I design websites but do not yet have real content to use for the final product, I always use free and/or open-source Content Delivery Networks (CDN) to source content, colours, fonts and placeholder text during development. Some of these resources are: Material Colours , HTML Color Picker , Coolors , Colorhunt Pexel , Placehold , Lorem Ipsum , Unsplash , Google Fonts , Bootstrap , Font Awesome and Grid by Example to name a few.

How I have applied my specialist area:

The following are ways how I have applied the knowledge I have acquired for my speciliast area in my daily personal and professional life.

• MRISHO 'M' Abeid Omary ‐ CMALT ePortfolio:
  With the experience I have in web-development, it would have been very easy for me to design and develop this portfolio using readily available open-source solutions such as blog platforms like WordPress or Wix or others. However, due to the fact that I wanted to practice what I know while having the opportunity to include as much customisation as I wanted, I decided to develop this portfolio from scratch in order to fulfill that. More on this is discussed in 3b. Operational Issues: Technical knowledge and ability in the use of learning technology - 08. Miscelleanous Technologies or Programming Languages.
• Teaching others:
  To ensure other developers are learning and practising the best practises of web developments, I teach them the ways I learnt to develop my skills. I also ensure to introduce them to the groups that help me develop my skills so they may consider using them to achieve the same thing. Some of these groups are West London Coders and Codebar.io . Often, most of the junior developers I get to teach are students at UWL who are studying courses that deliver web design and development skills ( view). Websites they are required to develop are similar my assignment website from 2017 during my BSc, and in some cases, others are required to use CampusPress to design or populate a Record of Progess (RoP) or a Personal and Professional Development Plan (PPDP) . More on this with evidence, is discussed in 4a. Teaching and Learning: Teaching and/or assessment processes.
• Development of an employment platform:
  Since the first "complete" website called AfriLabs , that I developed with my colleagues for an assessment while at Asia Pacific University (APU) , which unfortunately was not responsive, did not have a good design, definitely not accessible and somewhat confusing to use, I have since developed my web design and development skills dramatically. The progress I made inspired me to develop this e-portfolio, other assignment websites and teach others to do the same. In addition to that, it also inspired me to design and develop an employment platform to be used in Tanzania called Ajira ( view).
  
  This will be based on the good practices of web design and development as described above, to ensure it is not only usable, meets the users' needs, but also responsive, accessible using assistive technology and has other additional features to will make it easier for employers, recruiters and job seekers to advertise, recruit and find jobs. I intend this solution to be use an alternative to the government employment platform known as Tanzanian Government's - Recruitment Portal . It lacks most of the required attributes of a good website from: lacking accessibility, responsiveness, having a good-and-simple design ( view) and more. From the point-of-view of functionality, they lack essential features such as calendars, job alerts ( view), location selective recruitment, information and data analysis and more. All of which my platform aims to resolve by implementation.

Evidence

Reflection:

Learning about web design and development since it was first introduced to me in 2009, has been a steep learning curve. Comparing my skills and knowledge from then to now, I can clearly see that I have made tremendous progress over the last 14 years. Reflecting on this section has allowed me to see the mistakes I made, the development and progress I have achieved, the impact web design and development as had in my life, and more. Practising more about website design and development has taught me several useful things, such as:

• The power of designing of developing web applications to be implemented as solutions that allow for global positive impact. Some great examples are Google used as the global search engine for every possible piece of information imaginable, Facebook used as a social media network intended to connect people globally, and YouTube used as a free online streaming platform for all sorts of content that caters to every possible need for entertainment, education, politics, food and more.
• Allows for the development of solutions to current probelms that impact as many, if not all, aspects of life. Excellent examples of this are video conferencing software that make it easier to communicate with people remotely. This has had such a positive impact during this COVID-19 time. Example of solutions in this group are Microsoft Teams , Skype , Zoom , and Blackboard Collaborate
• Ensures customisation and accessibility to be implemented at the heart of the design. This allows information to be reachable to more people than ever before, customisation features such as changing color schemes, font sizes, implementing reading software and more, allow users who depend on assistive technology to be able to consume the content fairly without being neglected.

With such positive solutions and good experiences overall, the following are my next plans and intentions in the profession of website development:

• I intend to develop my skills further in creating more diverse and responsive website designs using advance features such as CSS grid.
• I want to learn more about back-end website development using extensive and flexible languages such as PHP, so I can become a full-stack developer.
• I would like to learn more about JavaScript in order to implement security to my websites on the client's/user's side.
• I want to learn more about component-based development using React.js to develop cross-platform websites and web applications that are usable and accessible across all different platforms, web browsers and operating systems.
• I want to continue teaching others who are interested in this profession so they are aware of and can implement these good practices when designing and developing their websites or web applications.

Last updated: Monday, 12th September 2022 By: Mrisho "M" Abeid Omary