These days, any web page you create must be equally appealing and usable no matter what device it is accessed on. This can be quite a challenge when the same site has to cater for big-screen TVs and smartphones with screens only a few inches wide.
Generally speaking, the best approach is to build for the small screen experience first by assuming a narrow viewport and then scaling up each element accordingly to ensure its suitability for larger screens. This is called the principle of mobile-first development, which has become popular in recent years.
One vital initial step is to include a viewport meta tag – this is crucial to ensure your site will work on multiple devices, as it tells a browser that a page must be scaled to fit the screen. More sound advice on meta-tagging can be found online.
Don’t Over-Complicate the Styling
The fussier your site is, the more things can look wrong when screen sizes go up and down – so keep the styling simple, keep branding and color schemes absolutely consistent throughout and you won’t go far wrong.
The optimum layout for a narrow screen compared to a wider or larger screen is very different. For instance, a stacked linear display works best for a narrow viewport, but for a wider viewport, the horizontal screen space can be made use of, by moving elements next to each other.
Images on mobile devices are usually set to be the full width of the screen and vertically stacked – but obviously, this is not appropriate for a large-screen experience. To ensure they look right on a wider viewport, they need to be scaled to an appropriate percentage of the container width and arranged horizontally. Borders and shadows can also help images to look more appealing on larger screens, but they are not usually helpful on very small screens. Keep reading how to evolve snom.
Additionally, it may sound obvious, but don’t forget to take the encoding of the images into consideration. The internet was originally designed for screens of 96 dots per inch, so some images may be encoded to 96 dpi. But these days, the pixel density of screens has vastly increased, and laptops may now have Retina class displays – images encoded to 96 dpi will look very unappealing on high-dpi devices.
Get Professional Help
It’s so important to get your web presence right that it may well be worth investing in some expert help for your design, and of course your online marketing and SEO. The cost will more than pay off in the long run. You can get in touch with a London AdWords consultant that can advise you on optimizing the responsiveness of your site.
If you do decide to go it alone, stay patient as it is ultimately a process of trial and error. You need to keep iterating as you increase the width of the viewport to ensure the site looks right at each stage.