Scribd
Upload
8 views

CSS Unit One

Uploaded by

Memo Seid
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

CSS Unit One

Uploaded by

Memo Seid
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Module Title: - Developing Cascading style

sheets (CSS)

• Module code: EIS WDDBA3 M05 1123


• Nominal duration: 90 Hour
• Prepared by: Ministry of Labor and Skill

November, 2023
Addis Ababa, Ethiopia
Introduction to the Module

This module covers the units:


Foundations of CSS and User-Centric Design
Web page creations using CSS and HTML
web page and CSS Validation and testing
Unit one: Foundations of CSS and
User-Centric Design
INTRODUCTION TO CSS AND BASIC DESIGN
PRINCIPLES
• CSS is a stylesheet language used to control the
presentation and layout of HTML or XML documents.
• It allows for the separation of content and design,
enabling consistent and visually appealing web pages.
• This foundational knowledge is essential for creating
well-designed and user-friendly websites.
Advantages and areas of application of
CSS
• CSS (Cascading Style Sheets) offers advantages
such as enhanced website consistency, easier
maintenance, and improved page loading speed.
• It provides a separation of content and design,
making styling efficient.
• CSS is widely applied in web development for
creating responsive layouts, customizing visual
elements, and ensuring a seamless user experience
across various devices.
USER REQUIREMENTS FOR CSS
STYLE
• User requirements are the specific needs and wants of a
user that must be taken into account during the web
design quality assurance process.
• The user requirements gathering process includes
surveys,
interviews,
focus groups, and more.
Accessibility guidelines for UX design
process
• Website accessibility guidelines WCAG are a set
of best practices that help people with disabilities
use the internet.
• These guidelines help web designers to make
websites easier to use, by ensuring they are
accessible to everyone.
Those guidelines are sorted into the following
categories:
 Operable
 You need to make sure that every task is performable on both
keyboard and mouse, that users have enough time to complete a
task.
 Perceivable
 You need to ensure that all users can easily perceive your content.
 Understandable
 You can do it by avoiding complex words and instructions,
explaining error messages and interactive website design elements
in detail..
 Robust
 Through quality assurance, you need to ensure that your website is
accessible from all the different browsers and devices people use to
explore the internet
DEVELOPMENT OF CUSS TO MATCH
USER REQUIREMENTS

• Before you start writing user requirements


for a website design you need to deeply
understand your target audience.
DEVELOPMENT OF CUSS TO MATCH USER
REQUIREMENTS CONT…
Build trust with customers
As people mostly buy products and services from
businesses they trust, the e-Commerce development
process needs to be focused on building a website that
invokes trustworthiness.
Evoke emotions with visuals
Powerful way to connect with the target audience is by
including photos and videos that evoke trust across
your landing pages.
Cont…
Useful and creative content
 Most users will come to your website with one goal – to
find useful information.
 To improve customer retention for your business, you
need to ensure that only high-quality content ends up on
your website.
Make it easy to navigate
 Before starting a user experience design process, it is
crucial to put yourself in the website visitor’s shoes.
 You need to ensure that the navigation menu is simple to
understand and placed exactly where users expect it to be.
Cont…
Horizontal navigation bar
 Probably the most popular navigation menu type, that is
usually located at the top of the page, just below the
header.
 The horizontal navigation bar goes in the left-to-right
direction.
Vertical sidebar navigation menu
 This type of menu appears on the right or left side and
usually stretches from the top to the bottom of the page.
Dropdown navigation menu
 A dropdown navigation menu is a common user interface
element used in websites and applications to organize and
display a list of options in a hierarchical manner.
Cont…

Hamburger navigation menu


 This is a type of navigation menu that appears when you
hover your mouse or click over a “hamburger” button.
 It is the most popular menu type for mobile website
design because it occupies the least space until the user
clicks on it.
Footer navigation menu
 As its name suggests, it appears at the bottom of your web
pages.
 As more and more people are using smartphones and
tablets to browse the internet, your web development team
needs to ensure the mobile-friendliness of the website
during the design process.

You might also like