CIS89A - 7. Responsive Web Design
From WikiEducator
.jpg)
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?
Contents
Assignments
Coding project - responsive web design
- grid layout
- 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
- 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.
- Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 16 Layouts with CSS Grid and Flexbox * Chapter 17 Responsive Design and Media Queries
- 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.
- Media to go - Mobile apps are available for viewing as well as creating images and video. There are podcasts and audio apps. Videos be edited to 3-60 seconds and published with mobile apps. How much do you use mobile 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.
- Responsive Wed Design - In a new coding project, add responsive elements within your page. Demonstrate the grid feature. Include one or two other techniques. Include images and text to demonstrate responsive design elements within your page. In the page display, include a description of what you are demonstrating, so the viewer knows what they are supposed to see in each example.
- Submit the link to your coding project to the Responsive Web Design assignment.
- Post a link to your coding project and any comments or questions about the assignment to the Responsive Web Design discussion.
- 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.
- 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. Review 2 others.
- 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.
- Responsive Web Design Podcast https://responsivewebdesign.com/podcast - The podcast series ended in 2018 after 157 episodes. The interviews with professional web developers are still relevant. Pick a random podcast - random number generator, listen to the podcast or read the transcript of the episode and summarize 2-3 key points made during the interview and why these are important and post to the Responsive Web Design Podcast discussion. Review the summaries of 2-3 others.
Random number between 1 and 157.
- View the video Did You Know 2023?. There are lots of facts and figures highlighting what is happening with technology. But what is the "big picture" message they are trying to make? What are some questions that you have that will be statistics in the future? Find a resource with information on one or more of the "facts" presented in the video. Post a link to the source of your information update and a comment about what you see as the main message to the Future... video updates discussion forum. Read 2-3 other reviews and comment on their updates.
- 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.
- Web Literacy - WRITE / Building - Writing on the web enables one to build and create content to make meaning. Review the Web Literacy skills in the Building group. 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. https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/write/
- 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.
- 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.
- I notice, I wonder... - Review your coding project and the projects from several others. What do you notice about Responsive design and how it is implemented? What one aspect of Responsive design do you still wonder about? Post your response to the I notice, I wonder assignment.
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 16 Layouts with CSS Grid and Flexbox * Chapter 17 Responsive Design and Media Queries
- 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
Examples
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x7responsive: Error parsing XML for RSS
GRID
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/grid: Error parsing XML for RSS
RESPONSIVE
- make sure your site is mobile-friendly.
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.'
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/responsive: Error parsing XML for RSS
WEB DESIGN
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/webdesign: Error parsing XML for RSS
PARTICIPATE
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/participate: Error parsing XML for RSS
MAKE
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/makeit: Error parsing XML for RSS
2016.3 2496 . 2018.3 5457 . 2020.11 5800
