Learning Path: Real-World Web Design

Responsive Web Design – From Concept to Complete Site 47 lectures 02:04:52 Exploring Responsive Web Design (RWD) This video briefly introduces you to the topic of the video course.

• Understand what RWD is
• Get to know what will be covered in this section.

Understanding the Use of RWD Here you’ll understand why Responsive Web Design is important for devices and also see an example of responsive designs.

• Know why RWD matters
• Get an overview of the devices on which RWD can be used
• Analyze its use on Mobile versus Desktop

Examples of Adaptive Layouts In this video, you will analyze the use of several popular responsive re-designs.

• Get to grips with tips on the use of Responsive Web Design

Device Breakpoints Discussion of devices and resolutions.

• Overview of device breakpoints

Pros/Cons of RWD When you should and shouldn't use RWD.

• Know the alternatives to RWD
• Get to know the pros/cons of RWD

Responsive Web Design – From Concept to Complete Site - Course Overview In this video, you’ll get to know what you can expect from this video course.

• An overview of what will be covered in the video course

Fluid Width Layouts Learn how to create a percentage-based layout for fluid width CSS.

• Start with a pixel width layout and convert to percent
• Use the equation width = target/context

Working with Percent Width Layouts Learn the best practices while working with percentages.

• Learn how to deal with large decimals
• Work with the target/context formula

Examples of Fluid Layouts Learn how to take a mock-up and create percent widths.

• Start with a sample mock-up and learn how to calculate widths
• Work through sample layout

Media Queries Fluid width layouts can only take you so far. You need media queries to adapt your layout to different device sizes. Here you will learn how to do this.

• Determine a breakpoint
• Program a breakpoint in CSS
• Determine how the content will move at breakpoint

Media Query Code Learn how to write the CSS for a media query.

• Code the breakpoints in CSS
• Learn the syntax of media query CSS

Testing a Simple Media Query Finding out how to test a simple media query in the browser.

• Write your first media query
• Implement the code from previous video in the browser

Best Practices for Media Queries Learn how to write media query code efficiently.

• Keep in mind that you should never duplicate the code
• Learn how to override the settings for media queries

Testing Media Queries on Actual Mobile Devices Testing in the browser is not comparable to testing on actual mobile devices.Learn how to do this.

• Find out the render resolution of your mobile phone
• Learn how to use viewport meta tags

Using RWD Demo Files Take an overview of the demo files and process.

• Plan and create mock-ups for a traditional layout
• Translate that layout to fluid width and media queries

Using Sample Files Take an overview of the RWD sample files.

• Build a complete responsive layout

Overview of the HTML Structure for the Demo Site Understand the use of HTML for the demo site.

• Start the HTML code for our site
• Build an HTML layout for our demo site

CSS Resets and HTML5 Learn how to deal with some technicalities of responsive web design.

• Analyzing CSS reset options
• HTML5 Shiv & Boilerplate as a starting point for a responsive design
• Make a consistent layout for all modern browsers

HTML for Container, Header, and Navigation Learn how to write the HTML for the container, header and navigation.

• Add the div logo
• Add UL and LI's for navigation
• Add the header element

HTML for a four Column Content Area Learn how to write the LI's for the 4 column content area by writing the HTML for columns.

• Add UL and LI's for the 4 column layout
• Add the filler text and headline tags
• Add images

HTML for a two Column Footer Learn how to write the HTML for the footer.

• Add text in the left column of the footer
• Add the right column with images

Using Demo CSS for our Site This video shows you how to plan and then build the CSS for our sample site.

• Briefly cover the use of CSS
• Build CSS for container

Writing the CSS for the Navigation Bar and Logo Here you’ll learn how to create a fluid width layout that will allow the logo and navigation bar to grow and remain aligned.

• Calculate the percent width for logo
• Calculate the percent width for navigation
• Write the CSS

Building the CSS for Navigation and its Elements In this video, you’ll learn how to build list items and align them in the navigation.

• Build a framework for navigation LI's
• Format navigation styles

Tweaking the Navigation Using the Inspect Element By using the debug tools to help find and correct errors in the page, we can use it to align the elements in the navigation bar.

• Style the navigation list items
• Make live adjustments with Inspect Element/Debug tools

Formatting the Header Here you’ll learn how to align the header and the image inside it to fill the width of the body.

• Write styles for the header
• Scale the header image to fill the width of the element

Styling the Columns This video shows you how to build a layout that fits the content of all the four columns

• Calculate the width for column styles
• Write the styles for the list item

Formatting Headings and Images in the Columns Here you’ll understand how to format the headings and images in the fluid column.

• Write the style for image tag in the list item
• Create styles for h2

Formatting the Footer Learn how to create a layout that fills half the column and clears the content areas above it.

• Format the paragraphs in the columns
• Build the footer styles
• Format the right and left columns in the footer

Tweaks and Fixes to the Body Layout Some elements in the body are still not aligned perfectly; final tweaking will fix that.

• Remove pixel width from the container
• Bind the scaling of the page with max-width

Planning for Media Queries In this video, we’ll plan how to build the media queries and breakpoints for our site.

• Review the mock-ups
• Scale the layout and determine the breakpoints

Tablet Media Query for the Body Learn how to create the first breakpoint for tablet devices and a layout that adapts to tablet size.

• Write the media query CSS
• Modify the body style in the breakpoint

Using Media Query for the Navigation Bar and Logo Learn how to reorient and resize the navigation bar and logo content on a tablet.

• Modify the width of the navigation bar and adjust alignment
• Make the logo and fill the logo div

Using Media Query for the Navigation Bar and Logo for Devices Smaller Than the Tablet Existing layout works great for standard tablet-sized devices, but we need to correct it for smaller devices.

• Build a media query for 600 px width
• Make the navigation bar fill the width of the device
• Center and shrink the logo

Using Media Query for Columns to Reorient Horizontally Vertical layout will not work on a mobile device. Learn how to switch the orientation for column and content.

• Adjust column width to fill 100percent
• Adjust the size and position of the image in the columns

More on Column Queries and Footer Header needs to align appropriately in the tablet layout and the footer content needs to stack horizontally. In this video, you will learn how to do this.

• Adjust the text alignment of the header
• Adjust the footer content to fill the width, which will cause the content to stack

Final Tweaks for Phone-Sized Devices Our layout works great on large and small tablets, but it still needs a few more tweaks for phones.

• Write media query CSS for 480 px (and smaller) devices
• Hide the paragraph content in the four columns
• Adjust the navigation content to make it more visible on a small device

Advanced Features/Considerations This video gives you an overview of advanced features and why they will be useful Dealing with Font Size EMs Fonts don't scale like other elements. Know what are the options to deal with the issue.

• What is an EM and how do you use it
• Scaling EMs

Using Percent-Based Fonts and Dealing with Problems with EMs and Percent An EM is a percent-based width, so you can also use percent for font size. EM's aren't ideal, and percent-based widths have limitations, which we will cover in this video.

• Working with percent-based font width
• Understand the problem of cascading/compounding sizes in percent or EM layouts

Demo of EM and Percent-Based Font Sizes Here, we’ll take a look at the code in action where the EM and percent fail.

• Demonstrating the cascading/compounding problem with EM and percent
• Test the code

Solution to Issues with REMs EM's and percent's compound properties, REMs are a good solution for modern browsers.

• Learn what is an REM
• Test our code using REMs

Future Considerations: VM, VH, VMAX, and VMIN Some new CSS features that will make font scaling more user friendly. EM, percent, and REMs aren't ideal. In the future VM and VH will help.

• Learn about VM,VH,VMAX, and VMIN
• Check the browser compatibility
• Discuss how they will be used in the future

Current Solutions to Text Size Issues and Responsive Background Images VM and VH aren't widely supported. There some JavaScript solutions for this. Also, background images don't scale by default Learn the code to fix this.

• Learn about FitText to scale the headline text
• Discuss background-size properties that allow background images to scale
• While using background-size, consider the background-position

Using Background Images, Adaptive Images, and Bandwidth While working with images in RWD, bandwidth is a concern. Using large images on small devices causes unnecessary bandwidth usage. Learn what other good options are available.

• Hide/show content
• Use adaptive images as a JavaScript solution
• Learn how images will work in the future of RWD

Responsive Grids Starting a site from scratch: generate your own grid or using a premade solution.

• Analyze Bootstrap, Amazium and Unsemantic

CSS Pre-processors RWD leads to a large code base, and pre-processors help with repetition and complex code. Here you’ll get to learn how this is done.

• Understand what a CSS Pre-processor is, along with examples
• Learn how Pre-processors provide variables, nesting, repeated code, and more
• Use links to other resources for programming and testing

Responsive Web Design – From Concept to Complete Site. 47 lectures 02:04:52 Exploring Responsive Web Design (RWD) This video briefly introduces you to the topic of the video course.

• Understand what RWD is
• Get to know what will be covered in this section.

Understanding the Use of RWD Here you’ll understand why Responsive Web Design is important for devices and also see an example of responsive designs.

• Know why RWD matters
• Get an overview of the devices on which RWD can be used
• Analyze its use on Mobile versus Desktop

Examples of Adaptive Layouts In this video, you will analyze the use of several popular responsive re-designs.

• Get to grips with tips on the use of Responsive Web Design

Device Breakpoints Discussion of devices and resolutions.

• Overview of device breakpoints

Pros/Cons of RWD When you should and shouldn't use RWD.

• Know the alternatives to RWD
• Get to know the pros/cons of RWD

Responsive Web Design – From Concept to Complete Site - Course Overview In this video, you’ll get to know what you can expect from this video course.

• An overview of what will be covered in the video course

Fluid Width Layouts Learn how to create a percentage-based layout for fluid width CSS.

• Start with a pixel width layout and convert to percent
• Use the equation width = target/context

Working with Percent Width Layouts Learn the best practices while working with percentages.

• Learn how to deal with large decimals
• Work with the target/context formula

Examples of Fluid Layouts Learn how to take a mock-up and create percent widths strong Here you’ll understand...