What is Web Design?

Name: What is Web Design?
Author: Matthew Brown

This chapter will introduce Adaptive and Responsive Web Design and the basics of what makes a website search engine ready.

Preview the first lesson free — get full access to all 3 lessons.

Request a demo Sign in

Course: On-Demand

Hello, as we begin, we will be looking at the difference between responsive and adaptive website design, as well as how to design websites that are search engine ready and optimized. In this lesson, we will be exploring the concept of responsive web design. Website designers, and developers, have an enormous challenge with all of the different ways in which people can access information. From computers with large monitors to small wearable IOT devices, designers must account for all of these variations. Website designers and developers have two frameworks to choose from: responsive design or adaptive design. We will first explore the example of responsive design, as well as review the pros and cons of this type of design. If we look at the Knowledge City website in a normal browser, we can see that all of the elements on the website are positioned well. Now, if I change the size of the browser, the content will dynamically move to align to the new size of the browser. This is responsive web design. With the pervasive nature of mobile devices, designers must account for a variety of screen sizes. Responsive websites display web content based on the available browser space. On mobile devices, this happens automatically. The site checks for available space and renders the content accordingly. This makes for a seamless experience for the end user, allowing them to enjoy as much of your site as they would like. Now, let's look at the same website using a mobile device simulator plugin for Google Chrome and how it will render based on the available browser space. I will choose the iPhone 11 simulator. As we move through the site, the components are sized according to the available browser dimensions. We can see that the site renders appropriately, based on the size of the device. If we choose a different mobile device, such as an iPad Air 4, we can see that the site adjusts again to account for the available browser space. And as we move through the site, all elements are displayed appropriately. With responsive web design, visual hierarchy must be maintained across all devices. This is the arrangement of elements to show their order of importance. For example, the headers, images and links are all at the same place, no matter which device is used. Some advantages of using this type of web design are: the ease of design, the time it takes to implement is significantly less, and it's the preferred method for site creation today. Some of the cons: you have less control over design in terms of screen size, and varying download speeds across devices may impact your design as mobile devices may download slower. Thanks for watching. Stay tuned for the next lesson where we will be exploring adaptive web design.

Beginner Provider : Matthew Brown 3 Lessons · 12m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

This chapter will introduce Adaptive and Responsive Web Design and the basics of what makes a website search engine ready.

What You'll Learn

Understand Adaptive Web Design
Understand Responsive Web Design
Explore what makes a website search engine ready
Distinguish between adaptive and responsive design approaches

Key Takeaways

This chapter introduces both Adaptive Web Design and Responsive Web Design.
It covers the basics of what makes a website search engine ready.
The lessons address responsive web design, adaptive web design, and search engine ready design.
The chapter builds skills in adaptive design, responsive HTML, responsive web design, and website architecture.