Mobile Design – Responsive Webpages – Mr. Chastkavich's Website

Shape of the Day:

https://www.xmasclock.com/ – the countdown is on!!!

Here are some questions to explore:

What is mobile design?
Why is mobile design important?
List as many devices you can that would access a website and use one.
What is responsive web design?
Is http://whatsonpoco.ca/index.html a responsive webpage or is http://www.sd43.bc.ca/school/terryfox/Pages/default.aspx? What is telling you that a website is responsive?
What are some ways to make a website “mobile-friendly”?
Check out these two examples of responsive websites – https://codepen.io/team/css-tricks/pen/meGOWx and https://mediaqueri.es/ – what happens when you adjust the screen size? Are there any specific style changes you notice?

Please show Mr. Chastkavich these questions once you have completed them.

Examine the two websites below on your phone and on the desktop like yesterday. Write down as many differences as you can between the two devices when looking at these two websites.
- https://www.tayburn.co.uk/
- https://www.dallasartfair.com/
Right click on one of the pages and click on inspect (or press ctrl+shift+I). Toggle the device toolbar by clicking the symbol beside elements on the top right (it looks like two squares, one is smaller and one is larger) or press ctrl + shift + M.
Note the menu at the top where it says responsive. Beside it there are two numbers, width and height. Click and drag the side bar to shrink the width and determine what amount of width pixels the website design changes.
Find a website that is responsive and one that isn’t on the internet. Show them both to Mr. Chastkavich.

Responsive web design is the attempt to change the appearance of a webpage in order to look good or better on a variety of screen sizes. There are multiple ways to create a responsive design webpage.
- The auto value for width and height – what happens when you use this value? What determines the width and height when the value is auto?
- Using percentages for margins and width/height values. Why would this approach be more responsive than pixels?
- Media queries: When changing CSS styles for certain screen widths, there are things that need to be considered: When does the design break? What CSS style changes would be made to adjust for certain screen widths? Common changes include the layout of the page, how the menu is designed, and the background images used.
- Frameworks: We will look at Skeleton and Bootstrap. What are these and why would people use them?
Mobile first idea: the idea of taking the approach of designing a website first for a small screen and then scaling it up
Website vs mobile apps – what is the main difference between websites and mobile apps?