CIS89A - 8. 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



Keywords

  • 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?


Assignments

Coding assignment

  • cis89responsive1 * fluid layout * media queries * scalable image * flexbox * grid layout * desktop layout * mobile layout * head, title, keywords, description * comments in html and css
  • include one or more of the techniques for altering the page display for different devices - smartphone, tablet and desktop
  • 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 - Learning Web Design - Chapters 17-19. 17. Responsive Web Design, 18. Transitions, Transformations, and Animation, 19. More CSS Techniques

  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. Vine videos are created with their mobile app and limits videos to 6 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. Read about the Creative Commons - the organization that develops, supports, and stewards legal and technical infrastructure that maximizes digital creativity, sharing, and innovation. Review the Creative Commons licenses to understand your rights to access and use images. This Attibute infographic is a nice visual summary.

  6. Play the Remix Game. Test your knowledge of the remix compatibility of different license types using interactive questions with detailed feedback for correct and incorrect answers.
    https://course.oeru.org/lida103/learning-pathways/remix-game/overview/
    If you need more help, find a resource that provides more information about copyright, Creative Commons and share the link.

    How did you do? Do you have a better understanding of the Creative Commons licensing structure and your options for using resources? Post a note about one new thing you learned about using and sharing online resources to the Copyright and Remix discussion.

  7. Responsive Wed Design - In a new coding project, use the assignment elements and tags to add responsive elements and place them within your page. You can use the images and text from the sources in the previous activities to demonstrate all the elements and tags within your page. Provide a description of what you are demonstrating, so the viewer knows what they are supposed to see in each example.
  8. Submit the link to your coding project to the Responsive Web Design assignment.
  9. Post a link to your coding project and any comments or questions about the assignment to the Responsive Web Design discussion.
  10. 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.

  11. Preview on multiple devices - Use a responsive test tool to view your page on multiple devices. Copy the link to your page and paste it into the web address input box and select a device to see what your page will look like on an smartphone or tablet - select a specific device from the drop down menu for the device type icon. What do you think? 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.

  12. 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.

  13. Web Literacy - PARTICIPATE - In the Web Literacy framework description, review the skills in the PARTICIPATE group. What skills you don't have yet or need to work on? Look it up. In the Web Literacy - PARTICIPATE discussion, post a link to a resource that improved your understanding and skills in these areas.

  14. 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 Success skills - Make it. 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.

  15. 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

Media


  • Textbook - Learning Web Design - Chapters 17-19. 17. Responsive Web Design, 18. Transitions, Transformations, and Animation, 19. More CSS Techniques


Mobile design

Screen Readers on Touchscreen Devices
People who are blind or have low vision must rely on their memory and on a rich vocabulary of gestures to interact with touchscreen phones and tablets. Designers should strive to minimize the cogni...
Chromium Blog: The Modern Mobile Web: State of the Union
"more than two billion AMP pages have been created and "PWA" has proved to be far more than a buzzword—it’s now the way that many businesses around the world are building for mob...
Customize your website software  |  Mobile Friendly Websites  |  Google Developers
"How do I make my site mobile friendly? If you know the software your website is built with, go directly to the dedicated guide:"
<p class="diigo-tags"><str...
Responsive Web Design Media Queries
"Always Design for Mobile First - Mobile First means designing for mobile before designing for desktop or any other device (This will make the page display faster on smaller devices). This mea...


Responsive Design

Responsive Web Design Media Queries
Always Design for Mobile First - Media queries page with rows and columns parts will behave differently on each side of the breakpoint look good on a small screen. display faster on smaller device...
How to create a responsive image gallery with CSS flexbox - LogRocket Blog
CSS flexbox is widely supported by modern browsers and partially supported in older browsers like IE 10 and IE 11. See browser support here.Browser Support CSS FlexboxThis extensive support makes C...
HTML5 and CSS3 Responsive design with media queries - YouTube
15:57 introductory overview of how media queries work and how they can assist you in making a responsive website. The pacing is kind of slow for the initial set up but the video starts getting int...


Creative Commons


2016.3 2496 . 2018.3 5457

Retrieved from "https://c.wikieducator.org/index.php?title=User:Vtaylor/CIS89A_Learning_Web_Design/Responsive_Web_Design&oldid=1069668"