In the not too distant past, the main approach towards ensuring a great online experience for both desktop and mobile users involved creating completely separate pages.<\/p>\n
This was time consuming, required double the amount of work and resources, could lead to possible lapses in continuity across devices and offered poor scalability.<\/p>\n
This gave rise to responsive design, which makes it possible to create adaptive pages on the same domain, with the purpose of delivering the same user experience across different device types.<\/p>\n
However, in order to make responsive design work, do not forget that there are important differences regarding what works well on desktop devices and what works well on mobile devices. These differences are often overlooked!<\/p>\n
Here are some considerations on how to implement responsive design and make it work best for your business.<\/p>\n
If a desktop site is already available, it is very tempting to just use it as a basis and then try to make the contents fit onto smaller devices. It can be tough to slim down the contents as the device size gets smaller. It\u2019s usually better and easier to start \u201cmobile-first\u201d and to scale up to tablets and desktops. It\u2019s usually easier to fill up space, than to having to progressively cut down on content.<\/p>\n
The most common type of desktop-accessed website navigation is in the form of a horizontal bar that runs across the header of a page \u2013 and it\u2019s what most of us are familiar with. Sometimes however, we find desktop websites where functionality has been compromised for the sake of responsiveness. In these instances, a burger menu has been created in place of the horizontal menus.<\/p>\n
While it\u2019s good to embrace responsiveness as the way forward, it\u2019s important to realise that it cannot be a one-size-fits-all approach. When a page that is displayed on a particular device (e.g. desktop) looks and works like a page that was designed for a different one (e.g. smart phone), it is at the cost of overall user experience.<\/p>\n
The problem here is that too many established practices are being sacrificed for the sake of having a page that is easy to manage and which will work well (if only from a technical perspective) on all kinds of devices.<\/p>\n
A desktop page should still look and work like a desktop page and the same should apply to a mobile page. While creating long pages that are well suited for scrolling may be perfect for mobiles, it\u2019s not something which will necessarily work well for desktops as well.<\/p>\n
One approach would be to work with adaptable elements which can change form depending on the size of the screen. For example, content on a desktop device could appear in a carousel, but a long list could be used for mobiles. There are plenty more solutions that can be tried and tested but the key is to always remember that desktop and mobile users have different requirements.<\/p>\n
Responsive design brings along many benefits, but it also harbours plenty pitfalls. With the right knowledge and ideas, they can be overcome, paving the way for the ultimate adaptive user experience. Nevertheless the necessity of testing cannot be stressed enough.<\/p>\n
Every site is different and has different goals; moreover, each site attracts varying types of users with equally varying tastes and preferences. What works well on one site cannot automatically be assumed to work well on others. In all my conversations with customers and potential customers, I always stress and encourage frequent and continuous testing.<\/p>\n","protected":false},"excerpt":{"rendered":"
In the not too distant past, the main approach towards ensuring a great online experience for both desktop and mobile users involved creating completely separate pages. This was time consuming, required double the amount of work and resources, could lead to possible lapses in continuity across devices and offered poor scalability. This gave rise to […]<\/p>\n","protected":false},"author":1,"featured_media":420,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,399,420,404],"tags":[123,19,21,240,74,20,24,103],"class_list":["post-479","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-give-the-dog-a-bone","category-web","category-web-design","category-web-development","tag-give-the-dog-a-bone","tag-marketing-tips","tag-mobile-devices","tag-mobile-responsive","tag-online-marketing","tag-responsive-web-design","tag-web-design","tag-website-content"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t