Developing websites for mobile has never been more important than it is today. While the stats vary a bit, the general consensus is that an increasing amount of people own or have access to a mobile device, and that one in five Americans use a mobile phone as their primary access to the internet. Some depend on their cell phones so much for internet access that they don’t even own a computer.

Despite this, I come across websites on an almost daily basis that are not designed for viewing on a mobile device. As a developer, I feel that it is important that we always keep mobile-friendliness in mind, and that a website’s mobile functionality does not take a backseat when working on a project. Rather, it should be the first and primary focus of web-development. If you are just starting out learning to code, I’m sure that you’ve already heard a lot about responsiveness and mobile-friendliness; it’s definitely not just a trendy term but a requirement in this day and age. This series is meant to give you some tips on how to make your website responsive and mobile-friendly and to help you get started on the right track to responsiveness. (Cue the Keurig…) Ok, ready? Let’s go. This is part 1 of 3.

The first topic I’ll tackle in this series is that of CSS Media Queries. CSS Media Queries were introduced with the release of CSS3 in 2012. The media query rule in CSS is important because it can help us design our website, or any browser-based project, for the mobile-web. Media queries display a certain set of CSS styles based on whether a certain condition is true. They are extremely helpful if you want to modify your website-based on screen resolution or browser viewport width. The CSS media query that I’m going to talk about in this article is the @media rule. There are a few different types of media we can target with the _@media _rule.

#css3-media-queries #css #mobile-web-development #web-design #web-development