User:Vtaylor/CIS89A Learning Web Design/Responsive Web Design



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.


 * 1) Textbook - Learning Web Design - Chapter 17. Responsive Web Design


 * 1) 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.


 * 1) 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.


 * 1) 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.

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.
 * 1) 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.

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.


 * 1) 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.
 * 2) Submit the link to your coding project to the  Responsive Web Design  assignment.
 * 3) Post a link to your coding project and any comments or questions about the assignment to the  Responsive Web Design  discussion.
 * 4) 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.


 * 1) 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.


 * 1) 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.


 * 1) 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.


 * 1) 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.


 * 1) 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.

== ==
 * Textbook - Learning Web Design - Chapter 17. Responsive Web Design


 * HTML Dog HTML Beginner Tutorial
 * http://www.w3schools.com/
 * HTML/Elements - This is the list of HTML and related Elements from the past to the present. ** Great reference - all tags listed by type with link to explanation and examples

Responsive Design http://www.diigo.com/rss/user/vtaylor/responsive

Mobile design


 * Mobile-Friendly Test - make sure your site is mobile-friendly.

http://www.diigo.com/rss/user/vtaylor/mobile

Creative Commons
 * Wikimedia Commons - Reuse guide
 * Open content
 * Creative Commons licenses
 * Creative Commons develops, supports, and stewards legal and technical infrastructure that maximizes digital creativity, sharing, and innovation.
 * A Shared Culture (video 3:20) - some of the leading thinkers behind Science Commons describe how the organization is helping save the world from failed sharing through free tools that enable creators to easily make their work available to the public for legal sharing and remix. from 2008, still relevant
 * Wanna Work Together? (video 3:00) - using Creative Commons (CC) licenses to build a better, more vibrant creative culture.

PARTICIPATE http://www.diigo.com/rss/user/vtaylor/participate

MAKE http://www.diigo.com/rss/user/vtaylor/makeit

2016.3 2496 . 2018.3 5457