Web Languages Responsive Web Design

Responsive Web Design

Location:

Date of Class:

Instructor:

Last Day To Enroll:

149.00 149.00
$149.00
PRICE PER USER
$
X
USERS


=
SUBTOTAL
$
  • Course Delivery: Virtual Classroom
  • Language: English

Chat Live | Contact Us | Toll Free: (888) 360-8764

 

Description

In todays online environment, designers must create websites that are responsive. Their sites must reshape and morph to provide a positive experience in every viewport—from small touch-screen environments to large-screen browsers where users interact using a mouse or pointing device. This is the heart of responsive Web design (RWD).

In this course, you will learn to identify and address every aspect of responsive Web design: from scaling elements and adjusting page layout, to adapting color schemes and implementing accessible forms. you will master how to use HTML5 linked to media queries in CSS3 to adapt content to fit your user's viewport, and see how jQuery Mobile can help you to mobile sites.

Today's world of Web design requires building sites that are intuitive, inviting, accessible, and attractive in every possible device and environment. In this course, you will learn to design and build fully responsive websites optimized for smartphones, tablets, and laptop/desktop viewing environments.

 

Topics Covered

A new session of each course opens each month, allowing you to enroll whenever your busy schedule permits

How does it work? Once a session starts, two Lessons will be released each week, for the six-week duration of your course. You will have access to all previously released Lessons until the course ends.

Keep in mind that the interactive discussion area for each Lesson automatically closes 2 weeks after each Lesson is released, so you are encouraged to complete each Lesson within two weeks of its release.

The Final Exam will be released on the same day as the last Lesson. Once the Final Exam has been released, you will have 2 weeks plus 10 days to complete the Final and finish any remaining Lessons in your course. No further extensions can be provided beyond these 10 days.

Lesson 01 - What Is Responsive Web Design?

Responsive Web design is about building websites that are accessible, functional, inviting, and fit well into the array of environments in which people view websites. In this first Lesson, we will take a look at exactly what responsive Web design is, why its necessary, and the basic concepts in building responsive websites. we will also examine some models of responsive design and see what we can learn from them.

Lesson 02 - Relative Units of Measurement

How do you make a photo look good on the large viewport of a laptop and the small screen of a smartphone? And will text readable on a normal computer screen appear microscopic on a phone screen? If you want to design responsive websites, these questions are central to your work. Luckily, there are answers in the form of relative units of measurement, such as percent, em, and multiples. In this Lesson, you will learn how to apply relative units of measurement to optimize the display of images and text in different viewports and environments.

Lesson 03 - Creating Responsive Menus With Media Queries

Navigation menus are the road maps that help users navigate a website. They provide access to the site content, and they allow designers to lead users to engage with site content. So how can you make menus adapt to different browsing environments? Make them responsive, of course! In this

Lesson 04 - Responsive Color Schemes and Custom Web Fonts

As a Web designer, you probably think consciously about the right color schemes and fonts for a project. After all, color schemes and fonts are critical to "branding" your site. And they're important if you want your site to be engaging and inviting. But do the rules you follow for full-size site design apply to mobile sites as well? Maybe not! In this Lesson, we will talk about responsive color schemes and fonts that will ensure visibility and readability in a wide range of viewing environments. you will learn how to test color schemes for contrast value, and we will explore Google Fonts as a source of downloadable Web fonts compatible with mobile devices. No longer will you have to wonder whether visitors can read your site's text in different devices and lighting environments —you will have tried-and-true solutions to that challenge.

Lesson 05 - Responsive Page Layout

What should a responsive page look like? If you said it should look different in a tablet or smartphone than it does in a laptop, you are onto something! But how can we make pages display optimally in different viewports? In this Lesson, we will explore a basic strategy of applying a 3-2-1 framework with stacked columns. you will learn how to use media queries, HTML5's semantic elements, and logical operators to build pages that are user-friendly in devices of all sizes.

Lesson 06 - Providing Collapsible Content for Mobile

Mobile screens are tiny. So how can we fit all our website content onto them without making users scroll and pinch too much? In this esson, you will learn a simple way to collapse content into expandable blocks for mobile users, but present an alternate page layout for full-sized viewports. we will use the HTML5

and tags to make content that users can expand or collapse on a small screen. you will also use media queries to present the content in full-size viewports in columns rather than the expandable and collapsible blocks that work in mobile devices.

Lesson 07 - Making Images and Videos Responsive

Images and video present real challenges when we're designing responsive websites. Not only do we need to think about how these potentially large files display on small mobile devices, but we also need to consider how long users on slow connections will have to wait for multimedia to download. In this Lesson, you will learn an array of strategies for making sure photos aren't slowing down your responsive sites. we will talk about compressing images to reduce file size while maintaining image quality, building a cache file to make photos download more quickly for users on return visits, and managing image downloads with jQuery widgets. you will also learn what video hosts work best when designing responsive sites.

Lesson 08 - Using SVG Artwork in Responsive Design

Wouldn't it be nice if you could create or acquire images for the Web that were infinitely scalable, small in size, and showed no degradation in quality no matter what size they were viewed at? In fact, you can! The SVG (Scalable Vector Graphics) format allows images to be displayed at any size without loss of resolution. SVG is not an appropriate format for photos (that's why we cover how to work with JPEG photos in Lesson 7). But SVG format is perfect for icons, logos, backgrounds, maps, illustrations—pretty much any artwork other than photos. In this Lesson, you will learn to create and embed SVG images, and scale them responsively.

Lesson 09 - Designing Responsive Forms

When users visit our websites, we often want to collect something from them, be it contact information, a location, or order details. To accomplish any of those things, we need forms. Mobile and laptop/desktop users have very different requirements when it comes to accessible, inviting forms. In this Lesson, you will learn to recognize and appreciate those highly differing needs, and to design forms that are inviting and accessible in any environment. I'll show you how to use HTML5 input types to make forms easier to fill out in mobile environments, and we will once again use media queries to customize the look and feel of our form depending on the viewport. The best part is, we can do all of this without any complicated scripting.

Lesson 10 - Adding Widgets With Bootstrap

You do not need to know any complicated coding languages to build responsive websites. But what if you want to add interactive, animated widgets based on JavaScript? you are in luck! Thanks to the Bootstrap framework, you can add these widgets and customize them within your pages even if you do not know JavaScript. In this Lesson, you will get an understanding of how JavaScript-based frameworks, libraries, and widgets work, and how to implement them in your website. we will add custom buttons, navigation menus, and a carousel (automated slide show) using Bootstrap widgets—and yes, all of these components are responsive.

Lesson 11 - Providing an App-Like Experience With jQuery Mobile

A running theme in this course is that providing a truly responsive experience for users involves much more than scaling content to fit different viewports. In the final two Lessons of this course, we will expand our capacity to provide mobile users with an app-like experience. By that I mean integrating more styling and interactive animation. we will do that by connecting with a set of widgets and animated elements from the jQuery Mobile framework. we will also employ media queries to keep the full-sized viewport experience friendly—and best of all, we won't need to work with any complicated programming language to achieve an app-like experience in mobile devices.

Lesson 12 - Creating a Web App Interface for Mobile Users

What are mobile users looking for in a site's welcome page? Essentially, they want a set of navigation links that look and feel like an app. As we discussed in Lesson 11, native apps (custom-coded for specific operating systems) and Web apps look and feel very much the same to users, but Web apps are much easier to create. In this Lesson, we will continue to work with the jQuery Mobile framework to build a Web app welcome page that can serve as a mobile-friendly entryway into our site. we will also define and apply a media query so that users coming from laptop- or desktop-sized viewports see a more traditional navigation bar that works well with large screens. As we go, we will sum up what you have learned by building a home page to show off all the projects you have created in this class.

 

Subject Matter Expert

David Karlins is the author of more than a dozen books on Web design that have sold over a million copies worldwide, including HTML5 for CSS3 for Dummies. His articles have appeared in publications ranging from Macworld to Business Week. He has taught Web, graphic, and interactive design at San Francisco State Universitys Multimedia Studies Program and the University of California, Berkeley, Extension division. His Web design and consulting clients have ranged from Hewlett Packard to the Himalayan Fair

Got questions? Contact us below or call 877-881-2235

Why Choose 360training.com?

  • Fast and easy courses completion
  • Get an education faster than at traditional colleges!
  • 100% online - No classroom attendance required.
  • Unlimited 24x7 online customer support
  • Over 500,000+ certified nationwide.