CIS89A - 7. Responsive Web Design
From WikiEducator
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.
- 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.
- 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.
- Voyager public web page - Voyager is a file server. Any html, css and media files in your public_html directory can be viewed as web pages from any web browser. This is similar to what you do with any web host. This is the most basic part of web development. This process is often facilitated with development tools so you don't see this level of detail. For this course, setting up an FTP application and transferring files to your Voyager public_html directory for web browser access is required. See Voyager FTP for additional information.
Set up your Business/Computer Systems Account - If you haven't done this already, see How to Set Up Your Linux (Voyager) Account for more information. Follow the instructions to create a DeAnza Windows account. You will also be saving work to the DeAnza web server using the same username and password to login to Voyager.
To access your Voyager account, you will need an FTP application (File Transfer Protocol) installed on your computer. Keep reading...
- HTML and CSS files for uploading to Voyager - Any html and linked css file can be used to demonstrate the file transfer to Voyager.
Create a simple HTML file and CSS file and upload them to your public_html directory in your Voyager account. These must be text files with the type .html and .css.
You can create html and css files from your CodeCraft Works projects. Display full screen view of your project - the Share URL for the coding project. Access the source code (see Module 1 if you forget how). Save the source code as text file with file type .html. Follow the link for the style file in the head section of the source. Save this as a text file with file type .css.
- Place html and css files onto the Voyager web server public_html directory with File Transfer Protocol (FTP) - For pages hosted on Voyager, transfer the HTML code text file with suffix .html and the associated .css file to your Voyager public_html directory. Voyager is an SFTP server. See Voyager FTP and textbook Chapter 21 Getting Your Website Online - Making Your Site Live for information about transferring files to the web
There are several ways to transfer files to Voyager. You can use any FTP application or web page development tool that provides file transfer to move your page source text file from your computer to your Voyager public_html directory.
- For the transfer, make sure the File protocol is "SFTP" otherwise you will not be able to connect to the server.
* Check that your transfer was successful and you can access your page from your account on Voyager. Some functions work fine with either http: or https: in the web address. Other sites will work with one but not the other. Try each one if you are having problems.
* Check that you have uploaded the .css file for your project and that it is "found" - you may need to change the relative link in your html file to access your css file on Voyager.
- Post a link to your web page in your Voyager account to Link to Voyager discussion.
example : http://voyager.deanza.edu/~vtaylor/m18index.html
Your ~username is a shortcut to your public_html directory in your Voyager user directory. Your ~username is always all lowercase. To access your web page files stored on Voyager - just http:// (not https://)
- Submit the Voyager page web address to the Voyager web page address assignment.
- 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 the articles from the Success skills - MAKE resources listed in the Media section and find an online example of this skill being used. Post a link and a brief summary of the reasons for each of your selections to the Success Skills - Make it discussion.
- 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.
When there is a temporary problem with the resource updates. Resources for all modules are available here.
Link to list of resources for this module
https://byxbee.wordpress.com/2024/03/24/cis89a-resources-24-4/
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
.jpg){kind=link}