Viewports and your website

Website Design for mobiles, tablets and computers

When you create your initial website design – wow it looks great on your computer screen.

Then you view it on your mobile phone or tablet – what happened?

Screen size has a huge impact on what you website will display and how it is displayed.

You have a few options here and all of them start with? What device is it being displayed on?

You can have a website designed for mobiles and it will look great on mobile phones but will be lacking on tablets and computers. You have to remember websites are viewed on different devices and you want everyone to love your website.

You can either have a web page that checks the screen size and redirects to custom web pages for that device. Downside for this is the search engines will not have a true indication of your website layout. You want the search engines to see one home page and not a home page for each device type.

You can have a web site that dynamically changes the content based on the screen size. So the web page address is the same but the style and function will change. e.g. You have a logo and menu buttons along the top of your web page on a computer and on a mobile phone the menu has been collapsed to single item which will expand into a drop down menu which is great for mobile phones. 

Below are examples of the dynamic changes based on the design:

Computer Screen Layout

Mobile phone with a collapsed menu

Mobile phone with an expanded menu

More on viewports and websites in our next article. . . .