Page 1 of 11

Lesson 7 – Develop Responsive Web Design (Part 1)

Objectives:
1. Learn to gather information from client/
2. Identify the information needed from the client.
3. Prepare list of relevant and most important topics.
4. Identify the different strategies in branding.
5. Apply to create recommendation documents for presentation to client.

Content:
Information gathering is performed through data
The analysis and information gathering phase of the web development process model is important
for understanding the goals of a website and how those goals can be achieved. During this phase, web
developers work with clients to understand their needs and determine the best way to meet those
needs.

Source: Google.com

Client Information Gathering: The Cornerstone of Web Design

Web page design involves gathering various pieces of information from the client to ensure the final
product meets their needs and expectations. Here are some key pieces of information you might want
to gather from the client:
 Page 2 of 11

1. Project Requirements: Understand what the client wants to achieve with the website. Is it a personal
blog, an e-commerce site, a portfolio, or something else?

2. Target Audience: Who will be visiting the website? Understanding the target demographic helps in
tailoring the design and content appropriately.

3. Design Preferences: Ask the client about their design preferences. Do they have specific colors, styles,
or examples of other websites they like?

4. Content: Determine if the client will provide all the content for the website or if content creation is
part of your services.

5. Functionality: Are there any specific features or functionality the client wants on the website? For
example, contact forms, image galleries, e-commerce integration, etc.

6. Timeline: Understand the client's timeline for the project. When do they need the website
completed?

7. Budget: Discuss the client's budget for the project. This will help you determine the scope of work you
can provide within their budget.

As for setting charges, there are several approaches you can take:

1. Hourly Rate: Charge the client based on the number of hours you estimate it will take to complete the
project. Make sure to track your time accurately and communicate any deviations from the initial
estimate.

2. Fixed Price: Provide the client with a fixed price for the entire project based on your estimate of the
time and resources required. This gives the client clarity on costs upfront.

3. Package Pricing: Offer different packages with varying levels of service and features at different price
points. This allows the client to choose the package that best fits their needs and budget.

4. Value-Based Pricing: Determine the value the client will receive from the website and price your
services accordingly. This approach requires a thorough understanding of the client's business and goals.

Regardless of the pricing model you choose, make sure to clearly outline the scope of work, deliverables,
and payment terms in a written contract or agreement to avoid any misunderstandings.

Lists of relevant and most important topics are prepared

Website branding consists of various design elements to establish a unique and memorable visual
presence. It's the process of creating a distinct and consistent brand identity. The main purpose of
website branding is to convey a specific message, evoke emotions, and build recognition among visitors.
Key components comprising website branding include:
 Page 3 of 11

 Logo
 Color palette
 Typography
 Messaging
 User experience (UX)

Source: Google.com

Effective website branding goes beyond just visual elements. It encompasses the overall user experience
and values or personality associated with the brand. Consistent online brand management helps create a
positive impression, distinguishes a website from competitors, and fosters trust among users.

Why is website branding important?

Branding and website design are crucial for crafting a successful online presence. Site branding is the
foundation for building a brand and increasing recognition. Distinctive branding is imperative in a crowded
online environment where consumers are bombarded with information and choices. Differentiation is a
core benefit of effective branding website design. A well-defined brand sets a website apart, helping
businesses carve a niche and attract specific audiences.

Trust is another key element tied to effective website branding. By creating a cohesive and professional
brand image online, companies can instill confidence in visitors and foster long-term relationships. A strong
brand identity doesn’t only build trust, but it also plays a big role in search engine optimization (SEO) and
online visibility.

What are strategies for strong website branding?

 Page 4 of 11

From creating a strong brand identity to expertly crafting your website structure, website branding takes
strategic preparation for success. By focusing on brand consistency and improving the user experience, you
can turn your branding website design into a powerful tool for connecting with your target audience. Follow
these five strategies to take your website branding to the next level.

1. Define your brand identity

Brand strategy for website design begins with clearly identifying your identity. A well-defined brand identity
serves as the blueprint for website branding, providing a clear direction for both design and communication.
Here are the core steps for defining your brand identity:

1. Identify core values: These are guiding principles that drive your business and influence decision-
making.
2. Mission and vision: Outline the purpose of your brand and why it exists.
3. Establish brand voice and tone: Determine how you want your brand to sound when
communicating with your audience.
4. Craft a memorable brand story: Develop a compelling narrative that engages your audience on an
emotional level.
5. Visual identity: Complement your verbal identity with strong visuals, including a memorable logo,
distinctive color palette, and fonts that align with your brand personality.
6. Consistency across platforms: Whether on your website, social media profiles, or marketing
materials, craft a unified brand identity and follow brand style guides to reinforce your message.

2. Create a clear website structure

The structure and organization of your website are important for providing a positive user experience,
facilitating navigation, and improving overall usability. Site branding should incorporate an intuitive
structure to make it easier for visitors to find information.

Search engines use website structure to understand the hierarchy and relevance of content, meaning a
well-organized website can positively impact a website’s search engine rankings. Proper branding and
website design ensure relevant content is easily discoverable. Here are some website branding examples
and best practices for site structure:

 Create an organized navigation menu at the top of your website

 Include a search bar to allow users to quickly find information
 Use whitespace strategically to avoid clutter and improve readability
 A consistent header and footer across all pages for continuity
 Clearly categorize product and service pages
 Add an About page to provide background information about your brand

3. Ensure consistency across brand elements and platforms

It’s important to ensure brand consistency across a website and other platforms for several reasons. First,
consistent use of colors, logos, fonts, and other elements helps create an easily recognizable brand. A
uniform brand presentation on your website and beyond conveys professionalism and credibility. It lets
your audience know that you pay attention to detail and care about delivering a high-quality experience.
 Page 5 of 11

Maintaining consistency across various platforms provides a seamless experience as users transition from
your website to email or other online channels. Over time, a cohesive brand presence contributes to the
development of brand equity or the perceived value that customers associate with your brand.

4. Optimize user experience

When exploring different website design trends, keep user experience at the core of your approach. UX
involves a medley of branding elements and website organization. Here are key aspects of web design that
enhance UX:

 Easy navigation: Create well-organized menus, straightforward labels, and logical structure
 Fast page speed: Optimize images, leverage browser caching, and minimize unnecessary code to
improve page speed
 User-centric design: Prioritize the needs and preferences of users
 Search features: Implement a search bar, filters, and sorting options
 Mobile responsiveness: Ensure your website is responsive and adapts to different screen sizes
 Clear call to action (CTA): Guide users on what steps to take next with strategically placed CTAs
 Social proof: Add customer reviews, testimonials, and user ratings to build trust
 Accessibility: Design with accessibility in mind to ensure your website is usable by people of all
abilities

5. Produce compelling content

Improve your content workflow and create more compelling content by leveraging brand guides while
focusing on storytelling. Strategically creating content involves more than simply sharing a message or story.
It’s all about creating content that combines data-driven insights with authenticity.

Producing compelling content is vital for successful site branding. Engaging content captures attention and
adds genuine value to your target audience. Content serves as a powerful vehicle for delivering brand
messages and building authority within your industry.

Recommendation documents are presented

Responsive Design Proposal Template

Intro

We no longer live in the digital age. Today’s society exists in a new age, one in which digital experiences
are no longer subject to the confines of your living room or office. With more than 2 billion smartphone
users around the world today, we are firmly in the days of the mobile age.
As it was in the digital age, your website is often the first chance your brand has on impacting a
prospective customer. More than 90% of B2B transactions begin online, and well over a third of all web
traffic comes from smartphones and tablets. If your website isn’t ready for the mobile age, you’re
missing out on business.
At [Sender.Company] we specialize in building responsive websites for B2B & B2C brands. Responsive
design solves the problem presented by users on multiple screen sizes by deploying intelligent CSS
media queries and flexible grids and layouts. This approach produces a finished website that provides a
 Page 6 of 11

seamless, reliable experience across all web browsers and devices, from smartphones, to tablets, to
televisions and computer monitors.
By building a responsive website for your brand, you’re building for today and enabling success in the
future. As time goes on, the devices that we use to access the internet will continue to evolve, and your
responsive website will be able to keep up with that evolution.
A note- try opening this proposal on your smartphone or tablet. You’ll see just how responsive design
makes things easier, even for simple sales proposals.

As it was in the digital age, your website is often the first chance your brand has on impacting a
prospective customer. More than 90% of B2B transactions begin online, and well over a third of all web
traffic comes from smartphones and tablets. If your website isn’t ready for the mobile age, you’re
missing out on business.

At [Sender.Company] we specialize in building responsive websites for B2B & B2C brands. Responsive
design solves the problem presented by users on multiple screen sizes by deploying intelligent CSS
media queries and flexible grids and layouts. This approach produces a finished website that provides a
seamless, reliable experience across all web browsers and devices, from smartphones, to tablets, to
televisions and computer monitors.

By building a responsive website for your brand, you’re building for today and enabling success in the
future. As time goes on, the devices that we use to access the internet will continue to evolve, and your
responsive website will be able to keep up with that evolution.

A note- try opening this proposal on your smartphone or tablet. You’ll see just how responsive design
makes things easier, even for simple sales proposals.

Our Work

We’ve had the pleasure of building responsive websites for many brands around the world. Here are
just a few of the projects we’re most proud of:

Portfolio Project

Sample Image of Project here

This responsive website for an ecommerce brand helped them increase mobile traffic by 30%, leading to
40% year-over-year sales growth.

Portfolio Project

Sample Image of Project here

This website, built for an IT services provider, allowed customers to submit report tickets from their
computers and smartphones, leading to a 25% increase in customer satisfaction ratings.

Testimonials

You don’t have to take our word for it- here’s what our clients say about the [Sender.Company] team.

Place here are testimonials of client and users of project site…

 Page 7 of 11

Your Website

Based on previous conversations, your website will include the following features:

These features will allow you to rely on your website as a focal point for your digital marketing efforts
and will make it possible for your clients and prospective clients to interact with your brand across all of
their computers, smartphones, and tablets.
 Fully responsive design
 Website feature
 Website feature

These features will allow you to rely on your website as a focal point for your digital marketing efforts
and will make it possible for your clients and prospective clients to interact with your brand across all of
their computers, smartphones, and tablets.

Development Timeline

The table below details our projected timeline for design, development, and deployment of your
responsive website.

Phase Date Complete

Initial Wireframe
Mockups
Functional Prototype
Private Deployment
Testing
Public Deployment

Pricing

Name Price QTY Subtotal

Subtotal
Discount
Tax
Total

Payment
 Page 8 of 11

Payment for the project will be due on the following terms:

 25% invoiced upon project approval (net-30 terms)

 75% invoiced upon public deployment (net-30 terms)

Approval

To indicate your intent to move forward with the project, simply sign below. Once we’ve received this
signed proposal, we will generate a project contract for signature by both parties.

[Sender.Company] [Client.Company]

Sgniture Signiture

Date: Date:

Sender’s Name Clint’s Name

Teachers Activity:
Ask Question
Show Presentation
Demonstration
Show video:
https://www.youtube.com/watch?v=zF6VSky4SIc
https://www.youtube.com/watch?v=B4mDoIwX1l0

Reference:
Site:
https://www.google.com/
https://www.youtube.com/
https://www.linkedin.com/advice/0/how-do-you-understand-your-clients-web-
development#:~:text=You%20can%20use%20tools%20like%20personas%2C%20user%20stories%2C
%20market%20analysis,business%20goals%20and%20user%20needs.&text=Grasping%20your
%20client's%20target%20audience,web%20development%20to%20their%20needs.
https://www.bynder.com/en/glossary/website-branding/#:~:text=Website%20branding%20consists
%20of%20various,and%20build%20recognition%20among%20visitors.
https://app.pandadoc.com/a/#/documents/NXSDs4u2BbM753qxNDv6Z9
eBook:
 Responsive Web Design Techniques by: Abdelaziz I. Hammouri
 Page 9 of 11

 Responsive Web Design with HTML5 and CSS3 by: Ben Frain

Assessment 7-1:
Written Test

Test I: True or False: Write the letter T if the statement is true and F if the statement is false on the
space provided.

_____________ 1. Producing compelling content is vital for successful site branding.

_____________ 2. Improve your content workflow and create more compelling content by
leveraging brand guides while focusing on storytelling.
_____________ 3. Design with social proof in mind to ensure your website is usable by people
of all abilities
_____________ 4. When exploring different website design trends, keep user experience at the
core of your approach.
_____________ 5. Maintaining consistency across various platforms provides a seamless
experience as users transition from your website to email or other online
channels.
_____________ 6. The structure and organization of your website are important for providing a
positive user experience, facilitating navigation, and improving overall
usability.
_____________ 7. Complement your verbal identity with strong audio, including a memorable
logo, distinctive color palette, and fonts that align with your brand
personality.
_____________ 8. Trust is another key element tied to effective website branding. By creating a
cohesive and professional brand image online, companies can instill
confidence in visitors and foster long-term relationships.
_____________ 9. Effective website branding goes beyond just visual elements. It encompasses
the overall user experience and values or personality associated with the
brand.
_____________ 10. Website branding consists of various design elements to establish a unique
and memorable visual presence.
 Page 10 of 11

Test II: Enumeration

A: Information needed from client for web design.

1. ___________________________________________
2. ___________________________________________
3. ___________________________________________
4. ___________________________________________
5. ___________________________________________
6. ___________________________________________
7. ___________________________________________

B: Approaches you can take in for setting charges.

1. ___________________________________________
2. ___________________________________________
3. ___________________________________________
4. ___________________________________________

Activity

Objective: Create a documentation for your project to be presented to the client.

Steps/Procedure: Group work. (Refer to Lesson 7)

1. Identify your audience.

2. Tailor your documentation to suit your audience’s technical proficiency.
3. Decide on the format.
4. Create an overview.
5. Setup the project.
6. Share insight on how to use your web application.
7. Explain the code structure.
8. Include the API documentation.
9. Create database schema documentation.
10. Deploy your web application.
11. Create a section for troubleshooting and FAQ’s.
12. Touch upon security concerns.
13. Describe the process of updating the project.
14. Specify the license information.
15. Include link to relevant resources.
16. Make your documentation engaging and informative.
17. Keep your document up to date.
18. Let others review your document.

After making a recommended documentation for the project, discuss it with the class and the teacher.
Page 11 of 11