Responsive Web Design

Description

PROMOTE YOURSELF RESPONSIVELY: BUILD A PORTFOLIO FOR ALL DEVICES

At the end of this course you’ll have a responsive portfolio website you’ve built from scratch. You will learn the essential elements of responsive web design: designing with flexible grids; creating layouts which incorporate typography and fluid media; using CSS media queries; responsive web typography; the Mobile First approach; in-browser design, tools, and resources; and Responsive Web Design workflows.

COURSE OUTLINE

Lesson 1: What Is Responsive Web Design?

An introduction to Responsive Web Design. We’ll explore examples and discuss context, but you won’t begin coding yet.

Lesson 2: Setting The Stage With HTML5 And CSS3

You will learn the HTML5 and CSS3 syntax that is the most relevant to the sample portfolio site that is being used for the course. Coding begins in this lesson, and if you’re confident in your HTML5 and CSS3 knowledge you could skip to Chapter 3, but be aware that the structural logic of the final responsive layout begins here.

Lesson 3: Mobile First

Learn about the Mobile First approach, which forces designers and developers to focus on the content and user experience of their websites in all contexts. This chapter involves the coding of a single column layout designed for the smartphone.

Lesson 4: CSS3 Media Queries

Understand how media queries are used to adjust the design and layout of a website as the viewport changes. From a coding perspective you will be adding media queries to your single column smartphone layout and setting the stage for the eventual fluid grid layout.

Lesson 5: Responsive Typography

The heart of any website is content, and more specifically: text. This lesson discusses the challenges of managing the properties of line-height, line length, and font-size in a responsive layout. This lesson represents a deep dive into the code as you create a baseline grid and typographic scale that will serve as a foundation for your page.

Lesson 6: Using A Fluid Grid

Learn about the role of grid layout in web design in general and responsive layout in particular. Within the code, you will build upon your core mobile layout to create a flexible three-column design with consistent gutters.

Lesson 7: Responsive Layout: Stay Flexible

Page components such as tables and forms work well on wider desktop screens, but present challenges on the smaller screen. In this lesson you will explore how to look for solutions to common layout problems using responsive design patterns. You will get a chance to solve one particular problem as you integrate a responsive form into your existing design.

Lesson 8: Responsive Images

Learn how to add images that work across the range of devices from the smallest phone to the largest high-definition (Retina) displays. In the coding example, you will learn a few techniques (including the Picturefill technique) that deliver the highest-quality image to your users while simultaneously avoiding performance penalties.

Lesson 9: Responsive Navigation Methods

Take a look at the unique challenges and potential solutions involved with responsive navigation. In the code, you will get a chance to create a responsive toggle menu that conserves space on smaller screens and expands to full size when possible.

Lesson 10: Optimization And Performance

When you begin treating performance as another component of design such as layout or color, things fall into place. In this lesson, you will identify potential performance issues with your site using free online tools and then explore ways to optimize your assets in order to improve performance.

Lesson 11: Grid Systems

Now that you have learned how to build a responsive layout from scratch, it’s time to start looking at grid systems as a way to rapidly prototype responsive sites and/or begin using a grid system for production. You will walk through an overview of popular systems including Zurb Foundation, Twitter Bootstrap, and Gridset.

Lesson 12: Responsive Web Design Workflow

Putting it all together, this lesson compares the classic workflow of a web designer to that of someone who designs and builds responsively. Concepts, tools, and best practices will be discussed. Specifically, you will get a quick look at the benefits of using a CSS preprocessor such as Sass.

PREREQUISITES

You will be asked to understand and write code in order to learn and practice responsive techniques with both HTML and CSS.
Knowledge of graphic design software: Minimal use of Photoshop, Fireworks, or any graphic design tool may be required to complete lesson assignments.
Experience designing for the web: Knowledge of designing for the web and its components, creating image assets, and styling HTML with CSS to create the full web experience.
An understanding of device differences: You should be familiar with the differences among various systems, devices, and web browsers.



More Ways to Learn Web Design

Coding for Designers

High School - College | Online class

LEARN HOW TO BE A WEB DESIGNER THAT DEVELOPERS LOVE Students will learn how to translate graphic design to the web; about common pitfalls many print designers face when moving to the web; the...

Free

Modern Web Design

College | Online class

Modern Web Design will prepare you to be a front-end developer by walking you through the basics of HTML, CSS and JavaScript.COURSE PREVIEW MODERN WEB DESIGN This course is an introduction to...

Free

Responsive Web Design

College | Online video/YouTube

Hi! I create videos mostly related to programming, and sometimes simple hacks and tricks to survive on internet!

Free

Web Design for Everybody Capstone

7th - College | Online class

The capstone will develop a professional-quality web portfolio. Students will demonstrate the ability to design and implement a responsive site for a minimum of three platforms. Adherence to...

Free
Offers paid add-ons

Learn how to design great user experiences

7th - College | Online class

You will learn how to design technologies that bring people joy, rather than frustration. You’ll learn how to generate design ideas, techniques for quickly prototyping them, and how to use...

$39
Offers paid add-ons

Design Principles: an Introduction

High School - College | Online class

What makes an interface intuitive? How can I tell whether one design works better than another? This course will teach you fundamental principles of design and how to effectively evaluate your work...

Free

Responsive Website Tutorial and Examples

7th - College | Online class

In this course, we will show you exciting examples of collaborative, interactive web applications that use various types of media including sound, images and big data. We will show you how to build...

Free
Offers paid add-ons

Learn to Design and Create Websites

7th - College | Online class

This Specialization covers how to write syntactically correct HTML5 and CSS3, and how to create interactive web experiences with JavaScript. Mastering this range of technologies will allow you to...

$79
Offers paid add-ons

Web Design

6th - High School | Online class

The CompuScholar Web Design course teaches students how to create their own web pages using HTML and CSS. Topics Covered This course covers fundamental web design skills such as: Basic web site...

$15

Responsive Web Design Tutorial

9th - College | Online video/YouTube

10 videos covering: Dealing with pixels Flexible grid layouts Media queries Desktop vs mobile Templates

Free

Become a Web Designer

College | Online class

Today’s web designer balances clear, concise design skills alongside a strong foundational background in the technology of the web. Our tutorials cover the skills you need to design rich, engaging...

$20 monthly
Offers paid add-ons

How To Create a Website in a Weekend! (Project-Centered Course)

College | Online class

About this Course What you’ll achieve: In this project-centered course*, you’ll design, build, and publish a basic website that incorporates text, sound, images, hyperlinks, plug-ins, and social...

Free

Responsive Web Design

7th - College | Online class

In this course you will learn how to apply concepts from interaction design and human computer interaction in order to design and build an interactive, professional looking website. You will learn...

Free
Offers paid add-ons

Advanced Styling with Responsive Design

College | Online class

About this Course It used to be the case that everyone viewed webpages on about the same size screen. But with the explosion of the use of smartphones to access the Internet, the landscape of...

Free

Photoshop CC For The Web

7th - College | Online class

With so many file formats, colour spaces, and image types, knowing where to start with web graphics can be daunting. But guided by this thorough, yet easy to follow course, you'll be feeling like a...

$99

See all resources for Web Design