Do you tap your desktop screen with a finger? Do you click a mouse on a mobile device? The needs of desktop and mobile users are different and the old solution was to provide a copy of an existing site to provide mobile features for mobile users. This was so 2011, maintaining two websites so your mobile users were not frustrated and quick to click away from your site.
Introducing the new one-size-fits-all approach to web design. We have combined a variety of features and controls to allow site owners to create one site that will adapt and adjust for any screen size. Using responsive design we can achieve this, when a visitor loads your site the backend code checks what screen size they have from a widescreen desktop or laptop to the smallest phones, and displays your site re-sized to fit nicely.
Flexible and Responsive Web Design
Now we can make a site display properly but what about controls? Mobile device users do not use a mouse and pointer to click links or navigate around your site, they simply use tap or touch features built in to many mobile devices. This creates a problem for the one site does all approach as often when a site layout scales down for small screens the text links are too small to tap with a finger. The solution is to include media queries in the site design to detect what the visitor is using to view your site. If they are on a tablet or phone the regular navigation bar will convert to an expanding tap to view menu optimized for touchscreen devices.
Content For Touch Screens vs Desktop Screens
Another issue that arises is that often you will want to display different content or change the layout of content for the mobile users. This is accomplished with media inquires as well. Using css stylesheet selectors we can display or hide site elements to achieve a best case scenario where mobile features appear for mobile users or desktop features hide or display as needed.
