timthumb (2)

Creating a Website That Is Mobile Friendly

Posted on

Smartphones and tablets are everywhere, and they all have access to the Internet. As a business, it is in your best interest to take them into account, if your web page does not display correctly on these devices, you stand to lose customers. The buzz is “responsive design,” which is a way of creating?web design?so that web pages will respond to whatever device is used to view it.

Why use responsive design?

All you have to do is think of your desktop browser, the minimum width is probably 960 pixels, in most cases more. That’s all the room in the world for big images and columns of text. Now think of your smartphone; even in portrait mode it will at best be half the pixels found on your desktop monitor. If the page is designed for a fixed width of 960 pixels, it will display perfectly on the desktop and ridiculously small on a tablet and on a smartphone, odds are the visitor will have to scroll horizontally. Scrolling and difficulty in reading must be avoided to keep the visitor on your site.

Responsive?web design?works with any browser or any device used to visit the site. Responsive design identifies the device viewing the page, assesses its features and delivers the style that is ideal for the device.

Limit the content:

When mobile viewing devices are considered, the best web sites are those that limit the content to the most important issues. There is limited real-estate on a smartphone so cut right to the point. When designing responsive web sites, design for the smallest screen first. By doing this, as a designer you will be forced into determining what is important and get it up front and at the top of the page.

Use CSS to create the design:

Even though you are designing the site to display on different devices, there are certain basics that you want the same regardless. Things like the font, colors and icons can be set in your style sheet. Once the HTML has been written, you can use CSS to remove certain elements that you don’t want displayed when the site is viewed on a mobile device.

Once the small screen has been defined in the style sheet, move to the next screen size which will probably be a tablet. Even though a tablet can handle a desktop design, it is best to make a less complicated version for tablet viewing. When designing the tablet version you can begin reintroducing some of the elements that were not displayed on the smartphone due to potential distractions.

There is no escaping the future, it is with us now.?Web design?at its best takes any and all viewing platforms into account, and don’t think there will not be more in the future.

1 comment

  1. admin asddfa sdfas

Leave a Reply