Session 1: This week we will begin looking at ways to make our templates responsive to devices with different dimensions like desktops, laptop, tablets, and mobile phones. One of the best techniques available are media queries. Essentially, media queries allow us to insert logic into our CSS that changes the properties assigned to certain rules when the maximum or minimum screen width goes above or below a specified value.
CSS Media queries allow you to target CSS rules based on – for instance – screen size, device-orientation or display-density. This means you can use CSS Media Queries to tweak a CSS for an iPad, printer or create a responsive site. Open the overview to see the complete list, and find for each media query if your browser applies these.
– cssmediaqueries.com
For media queries to work properly on mobile devices is it necessary to instruct the browser to identify the viewport width as the device width. This can be done by adding the following meta tag to your head tag in all of your HTML pages.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Relevant resources:
MDN: CSS media queries
Gallery of Sites Using Media Queries
Media Queries Explained on W3Schools
Session 2: Many more CSS properties and techniques can be used to enhance your work. This article from CSS-trick.com explores a wide variety examples. In addition to digging a little deeper into media queries let’s look at CSS variables “var()” and “position: fixed”.
https://css-tricks.com/lets-look-50-interesting-css-properties-values
After the demo the first of several Final Web Application Milestones are due (Final Web Application Milestone #1). Please be prepared to show me what you have produced for feedback during studio time.
http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
This link explains that with CSS2 one could specify solely the stylesheets for specific media types like screen or print. But for CSS3 with ‘media queries’ people are able to achieve desired screen sizes for various devices. We can also adjust the sites based on
height and width of the device, height and width of the browser,screen resolution and
orientation of the device. This article also talk about linking to different stylesheets using media queries.
http://protofluid.com/
To test how your website looks on different size devices one should use Photofluid which makes it possible to see how pages would look on different devices also including iPhone and iPad.
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries
This site explains what media queries are and how to apply them for responsiveness.
This site talks about ways to make your website
http://www.copyblogger.com/mobile-responsive-design-101/
This link talks about what t means for a website to be responsive. The website will adjust to the type of screen or device its on (cell phone, laptop, kindle, etc.) Also talks about the importance of having yur personal website being responsive.
http://quirktools.com/screenfly/
This site is a great way to copy and paste your website into the bar and it brings up the different devices and what your space will look like to the person viewing your site depending on what device they are operating.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
This site explains what media queries are and how you can compose them.
http://thenextweb.com/dd/2015/10/28/9-responsive-design-mistakes-you-dont-want-to-make/#gref
This is a list of “don’ts,” but I found it helpful because it outlines some of the big-picture issues of planning for a responsive design. Plus, it talks about current norms that may have changed fairly recently. Apparently it’s not the norm right now to hide full sections of content in a smaller device view, even though that was a fairly common practice just a couple of years ago.
http://www.visionpointmarketing.com/blog/entry/maximum-page-width-in-fluid-responsive-design
A lot of the material I found focuses on considerations for small screens, and this article takes the opposite approach – how big are the biggest screens right now, and what does design look like on them? The range is pretty big; the largest screens in professional settings have gotten larger as mobile devices have gotten smaller.
https://www.toptal.com/designers/responsive/introduction-to-responsive-web-design-pseudo-elements-media-queries
This blog post reiterates some commonly available information about response design and screen width, but adds some information I had not seen elsewhere: using pseudo-elements in CSS to tailor the responsive design. It only provides one example of how this might work, but also offers several links to more references on pseudo-elements.
http://www.adobe.com/devnet/archive/dreamweaver/articles/introducing-media-queries.html
This article provides an overview of media queries with examples. It also talks about the importance of using media queries in today’s media world.
https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
This article teaches you how to use media queries with lots of detail. It gives many examples of the different things you can do to make your mobile website the best it can be.
http://stephen.io/mediaqueries/
This article delves into the specifics for each platform your mobile website will be operating on; iPads, iPhones, etc. It gives several examples for each too.
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
This website discusses a mobile-first responsive design strategy and suggests defining the parameters of media queries in relative units (using ems rather than pixels). There are seven guidelines in total, but I thought these two were the most relevant to our class.
https://www.elegantthemes.com/blog/resources/generate-media-queries-for-specific-devices-with-this-insanely-simple-css-tool
This website walks you through an explanation of media queries and their benefits. It also directs us to a useful tool called Simple CSS (at simplecss.eu) to help with breakpoints for viewing screen sizes.
https://www.sitepoint.com/media-queries-width-vs-device-width/
This website clarifies the difference between width and device-width settings when coding CSS media queries. Ultimately, this website advocates for the use of width because it is “future-proof.” Width isn’t restricted to a specific device—instead, it’s a general, universal viewport size.
Given that we are starting to work on our final website, I figured this article would be helpful for picking colors and fonts. Also does a good job in explaining good layouts for the web.
http://www.websitebuilderexpert.com/how-to-choose-color-for-your-website/
This link isn’t really an article, but a good tool to have. This site allows you to select colors and type in a keyword relating to an image you are trying to find. This way you can find images that are related to your site as well as the colors used on your website.
http://labs.tineye.com/multicolr/#_
This article shows what almost every website homepage should have on it. Found this one to be helpful as I work on the final web application.
https://blog.hubspot.com/blog/tabid/6307/bid/31097/12-Critical-Elements-Every-Homepage-Must-Have-Infographic.aspx#sm.001f8v72o17sed8wz8m29y8fm4k0s
This source is great for learning about all of the different things you can do with media queries.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://www.tutorialrepublic.com/css-tutorial/css3-media-queries.php
This article gives you some background to what exactly media queries are and then also how you can make the layout of your page look. This also includes the code that you use to get to what they are explaining.
http://www.htmldog.com/guides/css/advanced/mediaqueries/
This article talks about how you can change how your page might look on different devices or window sizes. It not only gives you the code, but also explains the benefits to using each code for a specific device or browser window.
https://css-tricks.com/resolution-specific-stylesheets/
This also talks about how to make your page for different browser windows but specifically talks about doing it with jQuery and it also has video demos included.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
This article further teaches us the importance of Media Queries and how best to implement them in our coding. Gives specifics on how to use them with different media types like print or smaller screens.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
This website is very handy for giving the best dimensions for Media Queries for different devices. It actually has the specific coding that they believe is perfect for almost all of the different devices.
https://www.uxpin.com/studio/blog/media-queries-responsive-web-design/
This website describes the difference in Media Queries width for devices rendering surfaces and their actual surface size. It also shows proper ways to deal with Media Queries and images to format them in a way that looks good on all types of devices.
https://stayrelevant.globant.com/en/whats-this-all-about-css-media-queries/
This article is a good read for someone who is just learning about media queries and their usefulness. It introduces the different ways to use it and for which screens and devices. It also shows some examples of how it’s used depending on the parameters.
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
This article was really helpful in understanding a lot more about media queries. He had 7 helpful tips that he based the information on but then continued to elaborate even more thoroughly. For every tip that he had he also had other articles that he considered to be worth reading on the subject. Overall, there was a lot of good information in this website.
https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/
This article talked a lot about responsive design in 2018 and even what is to be expected in the future. She references her older article she wrote on media queries and how things have changed since. She also shows examples of how she uses them today and how they are helpful for different situations.
https://www.techopedia.com/definition/30449/media-query-responsive-web-design
This article is a solid starting point for students. It gives a clean definition of what a Media Query is, what it is used for, and how to use it.
https://designshack.net/articles/css/20-amazing-examples-of-using-media-queries-for-responsive-web-design/
After gaining the starting point, this article (2019) provides 20 examples how Media Query’s are used. In addition, showing code that was used for certain examples; also, demonstrates the that come along with implementing the code.
https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
After implementing Media Query’s, this article shows students the typical Breakpoints for phones, tablets, and laptops.
https://www.youtube.com/watch?v=X0t2tVUKNC4&feature=emb_title
Also, for students looking for a quick tutorial, the brevity of this video will be helpful.
https://www.crimsondesigns.com/blog/css3-media-queries-for-beginners/
This is a good article for beginners. It lays out the basics of what media queries are and how they are used. It gives examples of a couple that you can use. It also goes intot he different parts of media queries.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
This is really helpful because it gives the different dimensions for any specific device that you may use. It also gives you examples of coding used for each device.
https://alligator.io/css/media-queries/
This gives you an overview of what media queries are. The it goes over basic media queries, multiple media features and other advanced media queries. I think this is a god site to visit for the basics but also to further what you want to learn.
Google-Fu Assignment
https://www.freecodecamp.org/news/learn-css-media-queries-by-building-projects/
This website talks about what media queries are, they teach you how to implement a media query along with step to step process and the website also has cute pictures of an avatar to help guide you and keep you interested in the page.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
This website tells you all about the different devices and the coding required for the media queries. Along with all the different devices, the website also tells you all the size dimensions for the devices too.
https://www.folkstalk.com/tech/how-to-change-style-based-on-screen-size-with-code-examples/
This website tells you how to adjust your screen size through CSS. This website explains multiple screen sizes along with telling you how to work with your PC.
Google-Fu Assignment:
This source is a great beginners guide to media queries that keeps the information important but simple. It first explains what media queries are and why they are used. The article next gives some media types, rules, and lastly examples. The examples make it simple to understand for beginners.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
This next article is a much more hands on resource that gives real examples and ways to use media queries. This article gives a short step by step run through of how to write media queries that is super helpful. Lastly at the bottom of this article there are 40 other links to sites and articles that help with CSS.
https://www.webucator.com/article/how-to-use-css-media-queries-in-responsive-design/
The last source I found is titled a complete guide to CSS media queries. And like its name it really does provide a complete overview and explanation of media queries and the different ways to use them. It covers topics like accessibility, anatomy, value ranges, nesting, and more.
https://css-tricks.com/a-complete-guide-to-css-media-queries/
https://www.compress2go.com/compress-to-jpg
Our class, Web Design 358, has many tasks regarding putting images into our websites, so I wanted to make my Google Fu about three links for ways to compress images. That way, they will be easier to put on webpages. This first one is one I have been using for another digital media class I currently take, and is for compressing images to the JPG format.
https://www.giftofspeed.com/jpg-compressor/
This second link has a similar function as the first JPG compressor, and like the first one, is free. However, an important consideration is that this one is way faster, so is more time efficient.
https://tinypng.com/
This third link is similar to the first and second for the most part. Tinypng.com allows not only JPG images, but also WebP, and PNG images to be compressed, so in these ways, I would argue is the best of the three links, as it allows for the most types of images to be compressed.
https://www.codeinwp.com/blog/how-to-use-css-media-queries/#gref
This webpage is a great source on media queries for beginners. It provides an image that breaks down the parts of a typical CSS media query, and it describes various modifiers that can be used to further add to the queries. Then, the author gives code examples as well as some tips at the end regarding best practices for media queries.
https://www.smashingmagazine.com/2023/05/sticky-menus-ux-guidelines/
Last week, my group for mockup feedback was interested in different navbar features like sticky or fixed so that the navbar stays present as the user scrolls down the page, so I found some resources on sticky navbars. This source describes pros and cons to sticky menus and considers usability practices. While much of the article focuses on mobile devices, I think the information and tips are very beneficial to consider for our final webpages.
https://alvarotrigo.com/blog/sticky-navbar/
This link provides information on creating both sticky and fixed navbars, and it differentiates between what “sticky” and “fixed” mean in CSS. It is important to note that W3schools has pages for this as well, but the sticky and fixed pages are separate, so I chose to share this page where the information on both is on the same page.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
This article explains how media queries allow you to apply CSS styles depending on a device’s general type (such as print vs. screen) or other characteristics such as screen resolution or browser viewport width. It also has tutorials on how to 1. conditionally apply styles with the CSS 2. To target specific media for the , , , and other HTML elements with the media= attribute. and 3. To test and monitor media states using the Window.matchMedia() and EventTarget.addEventListener() methods.
https://www.w3schools.com/css/css3_mediaqueries.asp
This article talks about the history and development of media queries and CSS as well as The @media rule, introduced in CSS2, made it possible to define different style rules for different media types. It also talks about the relevance of browser support and compatibility.
https://web.dev/learn/design/media-queries
This website touches also a little on what media queries are and do. But the cool thing about this article is it has copy and paste common codes for media query issues and applications.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility
This article discusses how CSS media queries can be utilized to enhance accessibility for users with disabilities on websites. Specifically, it focuses on the “prefers-reduced-motion” media query, which allows developers to tailor the website experience for users who may have conditions such as ADHD, vestibular disorders, epilepsy, migraine, or scotopic sensitivity, which can be triggered by motion animations.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
This article is for beginners using media queries. Media queries in CSS allow you to apply styles based on specific conditions, such as viewport width or device orientation.
https://css-tricks.com/a-complete-guide-to-css-media-queries/
This is a guide to using media queries. CSS Media queries provide a versatile way to target browsers based on various characteristics, allowing for tailored styling or functionality. They are commonly utilized for responsive design, adapting layouts to different viewport sizes. Besides viewport width, media queries can target screen resolution, device orientation, operating system preferences, and more. While they are primarily associated with CSS, they can also be employed within HTML and JavaScript.
https://www.codewithfaraz.com/article/245/css-media-queries-breakpoints-for-responsive-web-design
This link directs to a web blog that gives a good breakdown of media queries, their Basic Structure, and how to apply them to different-sized screens.
https://code2care.org/tutorial/css-media-queries-tutorial-with-hands-on-examples/
This link leads to a more hands-on web page than the one above. This web page gives hands-on examples that you can run on the webpage and comprehensive practices for media queries.
https://contextqa.com/responsive-css-media-queries-for-responsive-design/
This last link focuses on understanding the concept behind media queries and their uses, with fewer examples and more contextual reading. It also has advanced techniques for media queries talk about at the end.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
This article explains media queries. It also shows you the css code of how to use it.
https://css-tricks.com/a-complete-guide-to-css-media-queries/
This article breaks down media queries and why they are useful. It also gives some examples to run and look at the css used.
https://www.wix.com/studio/blog/responsive-web-design?utm_source=google&utm_medium=cpc&utm_campaign=20954991244^160638040249^search%20-%20us&experiment_id=^^689640761932^&gad_source=1&gclid=Cj0KCQiA_9u5BhCUARIsABbMSPu5fy_o59d8cTcmzVlJiqQz_C1xMX6d1IVB0HEI89isdVRUn1J29q0aAmP4EALw_wcB
This link is a guide to responsive websites. It explains what it is and what you should think about when creating your own responsive website.