If you finally got your website looking good on your desktop – fantastic. But how does it look on your coworker’s laptop, best friends tablet, or the cashier’s smartphone? Having a site that is optimized across all screen sizes and resolutions plays a critical role in getting your message out to the masses.
The mobile market (tablets and cell phones) have become the primary method people use to surf the internet. Over 60 percent of web traffic now comes from mobile.
Know your target audience and make sure you are displaying the best possible information to them.
Many different devices are used throughout the day. Smartphones tend to be the common “device of choice” in the morning and during weekday commutes while PCs tend to be a dominate choice during work hours. Tablets are the most popular device used in the evening.
If your site is developed to look fantastic on one device but not another you may lose a lot of possible website traffic.
We’ll give you a break if your site isn’t awesome at the watch level, but keep them in mind too.
In responsive design, we use things called “media queries” to break out styling rules for a web page when the viewing area hits critical sizes. Even with implementing media queries – in order to handle all the various sizes of screens – there is still a right and wrong way to use these.
While it is possible to write out many break points, the best policy is to keep them to the handful of most common resolutions. From the most common, you should be able to account for all of the spaces in between if you craft your code carefully enough.
Some telltale signs that you are doing responsive incorrectly are the need for the dreaded “!important” tags – included on lines of CSS. These should always be used with much reserve as they will make your markup sloppy, redundant, and reduce maintainability. If you are crafting your CSS well enough then “!important” should rarely need to be used. Many times the specificity of your selector, or line order, is all that is needed to get the proper style in place.
All experienced developers will tell you; keeping the code on the backend clean and concise is the ultimate goal for any web development project. It will make things run better and be easier to make future updates.