(606) 654-4241 contact@taterkakes.com

Being Responsive First

Responsive web design used to be an afterthought to the design process. The last thing that you thought about when you were getting ready to deploy. As with most of technology, it has ever evolved to the point where most websites are primarily viewed on mobile devices. Weather it’s a smartphone or a tablet, unless you take the screen dimensions into account your site will not function well or look very good on a mobile device.

We have already talked about CSS and the role it now plays in design, you can also use CSS to dictate styles and format for different screen sizes. With frameworks like BootstrapCSS it has become easier than ever to design with mobile in mind. Using predefined div classes and markup Bootstrap enables an easy grid-based design that is designed “responsive first” or some call it “fluid”.

When I say “responsive first” it simply means that you’re taking into account the way your site is going to look on multiple devices from the very beginning of your design. With or without a framework like Bootstrap you should still implement responsive features. It has became a modern requirement for web design. Keep your visitors looking by making sure it’s easy for them to navigate, no matter the device they are using to browse.

Using Max-Width

A great place to begin is using the max-width: CSS property. While you can still set a width to your element that will display on screens large enough, in the event that the container is not large enough it will direct how large the element is allowed to go. Use a percentage as your max-width and make sure that no one is having to scroll around to read your content on their phone.

So the above code would tell the container to be 300px wide when there’s enough room. In the event that there’s less than 300px available it will only take up 95% of the available width.

Using @media

While some older versions of Internet Explorer do not respond to media queries, it’s a very easy way to deal with different screen resolutions. It basically enable you to add a special ruleset (or style) to your pages when a certain resolution criteria is met.

The code above says that screens up to 320px in width should follow these style rules. You can add multiple rules within this “rule”.

What next?

There are many ways to make your website responsive. You can use scripts, additional css, and other techniques to make your site responsive and beautiful. Remember to test, test, test. If you don’t know what it looks like then it probably looks nothing like you think. Dive in, it’s the best way to learn!