CIS89A - 7. Responsive Web Design

From WikiEducator
Jump to: navigation, search
Hubble Peers into the Storm (29563971405)

Responsive Web Design

It's important to know how to develop pages that adapt to smaller screen sizes with responsive web design principles.

Learning outcomes

  • identify three components of a responsive design
  • understand scaling images
  • review HTML for the web page
  • CSS for mobile and desktop layouts


  • fluid, fixed, flexbox, grid, mobile viewport, template areas, 12-column grid

Reading guide

  • What are the three components of a responsive design?
  • What is the difference between a fluid and a fixed layout?
  • How is a flexbox used?
  • When would a grid layout be used?


Coding project

  • responsive web design - include one or more of the techniques for altering the page display for different devices - smartphone, tablet and desktop * head, title, keywords, description, image * comments in html and css

There are lots of options for providing support for many devices. Responsive design techniques include: fluid layout * media queries * scalable image * flexbox * grid layout * desktop layout * mobile layout * CSS reset, normalize.css

  1. Review the Keywords and Reading guide questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module.

  2. Textbook - online resources - see Media section below

  3. Responsive design and Progressive web apps - Visitors may access your site from big desktop monitors, tablets and/or phones. Developing truly responsive design is beyond the scope of this course. Learn more about "responsive design" - principles, coding requirements and working examples. Progressive web apps include the user interface and the server-side application processing as well. Post a link to a good resource and a brief description of what you learned to the Adapting to Devices discussion.

  4. Media to go - Mobile apps are available for viewing as well as creating images and video. There are lots of podcasts and audio apps. Videos are created with their mobile app and limits videos to 3-60 seconds. This is just one example of mobile media. How much do you use mobile apps for viewing images and video? Listening to podcasts? Do you record video and post these to social media or video sites like YouTube? Post a short note about mobile media resources, examples and your comments to Media to go discussion. Review 2 others.

  5. Responsive Wed Design - In a new coding project, add responsive elements within your page. Pick one or two of the techniques - NOT all of them. Include images and text to demonstrate responsive design elements within your page. Provide a description of what you are demonstrating, so the viewer knows what they are supposed to see in each example.
  6. Submit the link to your coding project to the Responsive Web Design assignment.
  7. Post a link to your coding project and any comments or questions about the assignment to the Responsive Web Design discussion.
  8. Review the work of 2 others and post a note with links to those projects, and a brief description of your observations - anything that you learned from looking at these? Any ideas you have for using in your own work in the future? Post to the Responsive Web Design discussion.

  9. Preview on multiple devices - Use a responsive test tool to view your page on multiple devices to see what your page will look like on an smartphone or tablet. Have you created a good viewing experience for someone using a mobile device to access your page? How important is it to accommodate mobile users? What could you do differently to improve mobile viewing? Post your comments and suggestions to the Mobile devices preview discussion. If you used a different viewer, please include a link and comments. Review 2 others.

  10. Site design - Do you know everything you need to know to build a site like a pro? Select a site you like - design, user interface, and review the html and css code. Is there anything in the code that is new that you would need to learn to build a site like this - general web design guidelines or information about implementing a specific design feature. Select a resource that provides web design information. In the Web Design discussion, post a link to the site you selected, identify what you need beyond what we have covered in this course and provide a link to a resource with the information you need. If we have covered everything you need, great! Say so.

  11. Personal information - As a online technology user, you are always at risk of being the target of someone who is trying to take your personal information. Detecting online scams and 'phishing' by employing recognized tools and techniques is important. To gauge your personal risk, and find tips for lowering it, take the Identity Theft Quiz: A Quiz for Consumers.

  12. Web Literacy - WRITE - Writing on the web enables one to build and create content to make meaning. Review the Web Literacy skills in the WRITE group. Also review Build from the prior version of the web literacy skills. What is one thing that you aren't sure you understand? Look it up. In the Web Literacy - WRITE discussion, post a link to a resource where you found the answer.

  13. Success Skills - Make it - Creativity and Innovation. Is it possible to learn to be creative or innovative? Many authors think so and provide some suggestions for getting those creative juices flowing. Review 2-3 articles from the Success skills - MAKE resources listed in the Media section below. Pick one article you would recommend from the selection list. Find another article online that would be appropriate to add to the selection list. Post a link and a brief summary of the reasons for each of your selections to the Success Skills - Make it discussion.

  14. Group Project groups discussions - Web Developer - Read this page of information about the career of Web development. What do you think? Are you interested in this as a career? Are you currently working in web development or working with web developers? Is this description accurate? Share with your group. Are there outstanding questions? Contribute one or more posts to the discussion for the group tasks. Ask a question about working as a group.

Icon multimedia.gif


  • Textbook - online resources


Responsive Web Design (2010 - first description)

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'
How To Make a Responsive Website [Best Practices 2020]
When building a responsive website, or making responsive an existing site, the first thing to look at is the layout.When I build responsive websites, I always start by creating a non-responsive lay...
A Guide to Responsive Design + Breakpoints 2019 - UX Tricks ~ UX Tricks
Fluid design means to design layouts that expand and contract to fit the device’s viewport. When layouts are fixed at a specific size, they’re very likely to undesirably overflow the viewport o...
Responsive Web Design – A List Apart
W3C created media queries as part of the CSS3 specification, improving upon the promise of media types. A media query allows us to target not only certain device classes, but to actually inspect th...
Responsive Web Design Patterns | This Is Responsive
A collection of patterns and modules for responsive designs."
<p class="diigo-tags"><strong>Tags:</strong> <a href='https&#58...


Mobile-Friendly Test

make sure your site is mobile-friendly.
Four Ways to Enhance Teaching via Mobile Learning in the Classroom - itslearning - Global %
students can participate much more actively in the learning experience. This gives them a sense of ownership and makes them more motivated to learn.Mobile learning allows students to research topic...
BBC World Service - World Wise Web, The mobile phone
In 1973, Marty Cooper made the first public mobile phone call using his newly invented cell phone. Now, there are more mobile phones on the planet than people. Fourteen-year-old Becky, from Norther...
Official Google Webmaster Central Blog: Using page speed in mobile search ranking
page speed will be a ranking factor for mobile searches.The “Speed Update,” as we’re calling it, will only affect pages that deliver the slowest experience to users and will only affect a sma...


10 Ideas for Creating Innovative and Unique Web Designs
Try at Least One Thing You Haven’t Done BeforeTaking advantage of your experience and building projects based on techniques that have worked well in the past tends to become a standard practice f...
How To Create Professional Graphics — Even If You’re Not a Graphic Designer
any one of us can design compelling images — even without a lick of graphic design skills.In a few moments, I’m going to show you which tools you can use to create professional graphics to enha...
A Comprehensive Guide to Web Design | Adobe Blog
create a great user experience for your website. We’ll start with global things, like the user journey (how to define the “skeleton” of the website) and then work down to the individual page...


Tips for Students: How to Contribute Positively to a Team - The Cengage Blog
be prepared to lead whenever necessary. Even if you don’t view yourself as a “leader,” you may find yourself in a situation that requires you to take on that role. Perhaps you have specific k...
Future skills: create with the web | British Council
Today, there is a greater range of free software for design and creation than ever before, and the amount of choice can be overwhelming. We have selected some of the most innovative and useful tool...
Creativity is a remix | Kirby Ferguson YouTube
Nothing is original, says Kirby Ferguson, creator of Everything is a Remix. From Bob Dylan to Steve Jobs, he says our most celebrated creators both borrow, steal and transform."


The Reuse Revolution is here - YouTube
For years, corporations and retailers have blamed each other for the plastic waste polluting our world. But it’s time for them to work together to create something beautiful—refillable and reus...
Setting S.M.A.R.T.E.R. Goals: 7 Steps to Achieving Any Goal - WANDERLUST WORKER
Goal setting is an essential part of life. We all need goals in order to help illuminate the road to our hopes and our dreams. They help to invoke a more visceral, tangible, and actionable path to...
SMART criteria - Wikipedia
SMART is a mnemonic/acronym, giving criteria to guide in the setting of objectives, for example in project management, employee-performance management and personal development. The letters S and M...

2016.3 2496 . 2018.3 5457