CSS and Media Queries

Overview

In Module 4 we learned more about how to make a website responsive. We explored frameworks and learned about media queries and the concept of mobile first.

Part 1: Bottom Up Design Project Challenge

Description

In this project, the goal was to get more familiar with the mobile first concept. We created a sample page and focused on thinking about and designing for the mobile user. This means optimizing the user-experience, faster loading times, simpler designs, intuitive navigation, larger interactive areas (think buttons, quantity areas, etc), and improved readability.

Practice

Reflection

I watched a video that said to "Distill Your Offer", that statement helped me wrap my head around the best way to approach a mobile first design. Going through the process of really thinking about what I hate about being on a mobile site and what I like about some mobile websites helped me to clarify the mobile first concept and "distill my offer".

Part 2: CSS Media Query Project

Description

Using my grid design from an earlier project, I worked on making it reponsive by adding media queries for larger screens like desktops, tablets, and mobile phones.

Practice

Reflection

I already knew quite a bit about responsive design and media queries. Landscape orientation was new to me but I can see how it would be useful on larger screens, especially when designing for mobile-first.