The Do’s and Don’ts of Responsive Web Design
Being mobile ready in the modern online world is a must. With mobile browsing surpassing desktops in 2014 (as reported by comScore) it is no wonder that if you want to reach a wider audience you ought to be mobile friendly.
Seeing how developing an app for all three major mobile platforms (iOS, Android and Windows Phone) can be quite costly, the best practice is to use HTML5. It is easy, it is free and most of all – it is adaptable. The Responsive Web Design or RWD will be the topic of today’s discussion. Using the updated HTML script with CSS and the new media queries, you can create a responsive web site quickly and have it run on all major platforms and mobile devices (both smartphones and tablets). However, before jumping in there are several things to consider – some to abide to and other to completely avoid in order to maximize the benefits from the RWB.
Responsive Web Design Do’s
Let’s start with what you should do. The best strategy is to start with a design that will fit on a smartphone first. If you start with a desktop you might end with a whole line up of problems liek scaling, improper font and image size, etc. If you take the opposite approach you can scale UP everything for use on a device with a larger screen. Speaking of fonts, you should always go with a bigger selection (and we don’t mean type of fonts). If you think 12 point font on a desktop is big, try reading it on a smartphone or tablet (it is quite tiny). So, rule of thumb – use at least a 16px font and don’t be afraid to dream big (font-wise). Also, keep in mind that the average user won’t know whether your site is responsive or not so keep the engagement natural when designing your responsive site. Functionality always comes first so even if you think some feature might work better ask yourself if the user will benefit from it if it is implemented first. CasinoShorts.com is a site that has been converted to a responsive design. Font selection and sizing are key to this site being accessible and usable across all devices.
Another thing to note is not to over clutter the site – no one wants a mobile site that loads forever. Keep things light and up to the task. Avoid large, ultra HD pictures that might look great on a 27 inch desktop yet will load forever on a phone. Keep in mind that great optimization can do wonders for your visitors. Last but not least, test everything. This isn’t more a hint but a general rule of thumb. Before committing on a final design, log in from another device and test your design while still on a staging server. A good example of a site that has been built on these principals is XnetEntCasinos.com. Note the image sizes, yet they maintain quality and speed.
Responsive Web Design Don’ts
Now that we got the right stuff for your Responsive design strategy, let’s observe some definite no-noes. Right off the bat – don’t do it for the sake of doing it. Will your visitors really benefit from a responsive website? Will the additional work bring more users or is this just your personal preference? Do the math – sometimes overcomplicating things doesn’t mean it will help your overall goals. It is more important to have a clear vision than an additional feature which might not bring you anything.
We already stated you shouldn’t overburden your responsive design with extra features but that doesn’t mean it should be barren of the necessities which are included in your desktop version. With the excellent mobile prioritized strategy, you will be sticking to your basics yet implementing all the important elements of your website in no time.
Speaking of clutter, never try to make things more complicated than they should. Design-wise it is the worst if you “must” have a set of features like additional side bars or navigation buttons which lead nowhere. Stay clean and stay focused – the user won’t give a hoot about your loaded (and very useless) data.
Finally, try to be original but never go too far from the adopted design rules and conventions. Some things just work and while it is easy to experiment and add new things you think are cool, always remain vigilant and observe your work from a user perspective. This way you will create an original design that won’t stink of the “author” stench, i.e. a designer’s Lily.
June 17th, 2015
do’s are very helpful
thanks for sharing