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

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 - 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
   
   
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 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.
   
   
5. 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.
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. 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. 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.
    
    
12. 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.
    
    
13. 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.
    
    
14. 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/
    
    
15. 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.
    
    
16. 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.
    
    
17. 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.

Media

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

7. Responsive Web Design

Responsive Web Design PageThis is an example of a gridThis is the second item in the gr...

Responsive Design

Module 7 Responsive Web DesignThis site will change depending on the size of the window...

Crypto Currency Website

"Crypto Currency Home About Services Contact BitcoinLorem ipsum dolor sit amet,...

GRID

CSS Grid Layout - CSS: Cascading Style Sheets | MDN

CSS Grid Layout excels at dividing a page into major regions or defining the relationsh...

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, ma...

9 Biggest Mistakes with CSS Grid - YouTube

It's easy to make lots of mistakes with a new technology, especially something that...

RESPONSIVE

Mobile-Friendly Test

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

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

WEB DESIGN

UI Design Week

the small design decisions that have had an outsize impact on our lives. From simple card game browser UIs to deliberately complicated video game setups, all-too-forgotten accessibility options for...

Readability Matters | Technology for Better Reading

Readability is about the reader – the ease with which a reader can successfully decipher, process, and make meaning of the text read. Typographical features of the text are critical; letter shape...

The 37signals Manifesto (our original site from 1999)

The web should empower, not frustrateWe design visual interfaces (what people see and how they use it) for web sites and applications. We focus on making sure these sites are both useful and easy t...

PARTICIPATE

Our Super Simple Guide to Networking and Socializing Online | Vibe

"even though work offers some methods for socializing online through text apps and virtual meet-ups, you may be looking for other ways to talk to people.It’s also important to socialize with...

Career Coach - Teamwork - Making a Contribution

Celebrate your team's achievements. This will encourage cohesiveness and pride in what you are doing. For example, if your team has reached a new plateau in its performance, bring baked goods t...

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

MAKE

Creativity Rubrics | MyPBLWorks

2022 Creativity Rubric These research-based rubrics are designed to provide useful, formative information that teachers can use to guide instruction and provide feedback to students on their overal...

Scrintal is a great new tool for brainstorming ideas and projects

Map out a project. Organizing multistep projects can be challenging. Scrintal lets you easily focus on one element at a time. Create notes for pieces of your project, then step back and look at the...

With Just 2 Sentences, Steve Jobs Revealed a Beautiful Truth About Making Mistakes | Inc.com

beautiful lesson about success. You see, success isn't the pursuit of not making mistakes. Almost always, mistakes are the way you find your way to whatever you define as success. Mistakes are...

2016.3 2496 . 2018.3 5457 . 2020.11 5800