Make it Responsive — CSS3 Media Query
I recently had the opportunity to take a code assessment for a Software Engineer position I applied to. The challenge overall was not too bad to complete in terms of the logic involved. After submitting it I thought I did pretty well but part of the feedback I received on it was that the site wasn’t responsive enough. This was not an explicit requirement of the assessment which got me thinking why and how I needed to make it responsive.
Typically, when designing a website we need to keep in mind that viewers may be looking at our site on a variety of devices. By creating a website only intended for viewing on a computer we are forgetting about all the people who might only have a phone to view it on. Imagine squeezing all aspect of a full size website on a tiny handheld screen. That surely guarantees a poor user experience for mobile users and that just can’t be! That’s where responsive design comes in.
Considering that over half of web traffic comes in through phones we need to make sure to address responsiveness issues. You should think about this at the very beginning of your project. By utilizing CSS3 media queries you can control things like:
- width and height of the viewport
- width and height of the device
- orientation (is the tablet/phone in landscape or portrait mode?)
- resolution
These will allow you to design your website to specifically cater to different web viewing platforms. You can get as specific as having a different user experience between iPhone and Android users. How cool is that? You do need to make sure that the browser through which the content will be displayed supports media queries. These include Google Chrome, Internet Explorer, Firefox and Opera.
Once you write your media quarries, the browser will detect the screen/pixel size of the device and will determine the way the content is displayed based on that parameter. If you want to take a deeper dive into media queries and how to implement them take a look here. Happy Coding!
Source Used:
