Responsive Web Design Examples: Making a Site for Mobile

responsivewebdesignexamplesIt’s estimated that mobile device traffic will soon outpace desktop web traffic. This means that users are moving toward mobile devices as a preferred method for Internet browsing. To cater to this type of web traffic, you need responsive design implemented on your website layout. Responsive design works with HTML 5 and CSS3. Responsive design scales a website layout according to screen size using media queries.

Learn how to work with responsive design and Dreamweaver

How Responsive Design Works

One of the first smart phones on the market was the iPhone. The smart phone gave you the option to connect to the Internet with a data plan. The data plan was expensive, but so was the phone. The iPhone gave the user the option to browse the Internet over a cell phone plan. When these phones first came to the market, viewing websites was difficult. Images were too big, text was too small and the user was forced to scroll side to side to view content.

After Android came on the market, webmasters began to see the importance of website designs that catered to the smaller screens. Smart phones pass user agent when they access a website. Webmasters would use JavaScript to detect user agent and then resize content based on user agent. The problem with this method was that it wasn’t perfect and JavaScript isn’t always compatible with mobile device browsers.

When CSS3 was introduced, webmasters had the option of media queries. Media queries discover the screen size of the mobile device and let you resize the website based on the device screen. This means that webmasters could not only cater to an iPhone screen, but they could also resize layouts for Kindle, iPad, Android devices and any other device with a smaller screen than  your typical laptop or desktop computer.

Tips for Responsive Design

Responsive design is more than just resizing a layout based on screen size. You have to think about the way users interact with a mobile device. Mobile users also have less bandwidth, so it’s imperative that you consider connection and data transfer speeds.

Understand how to work with responsive design and your business at Udemy.com

First, desktop users work with a mouse and a keyboard. These components aren’t a part of mobile devices. Mobile device users use thumbs instead of mouse peripherals. This might seem like an insignificant issue but it’s an important part of mobile and responsive design. When you work with responsive design, you have to think about user interaction which is mainly thumbs. You also need to think about font sizes. You don’t want your users zooming into your pages. This makes your design frustrating. Make font sizes large and links and other user controls easy to work with.

The second issue is bandwidth speed. High resolution images can be megabytes of data. This amount of data must transfer to your user’s smart phone or tablet using a slow data cell phone data plan.  Large images greatly increase the amount of time it takes for users to load your website in their mobile device. To compensate for this issue, you can reduce your image sizes. Not just in size but in resolution as well. You can still have great images without high resolution on mobile devices.

Take a class and learn how to work with responsive design templates

Other ways to improve download speed and load-time is to reduce JavaScript files and CSS files. Some websites have tons of these files linked on their websites. Too many of these can slow down your website’s load time. It gets even worse when you host these files on an external website with a slow server. The best option is to store these files on a fast cloud server. For instance, Google offers cloud storage for jQuery files. You can use the cloud to boost performance when hosting external files. This will improve your website’s load time for mobile users.

Responsive Design Examples

When you think of mobile design, you probably don’t even realize you’re seeing a mobile design when you open one. Most websites are moving towards a mobile design and you can see this design when you open the website on your mobile device. A good way to judge the mobile device versus the desktop version is to open a website on your desktop and then open it on your smart phone or tablet.

One great example of responsive design with great, high resolution images is the Disney website. Disney is known for its image quality, and when you open the site from a desktop computer, you can see images of the company’s movies and cartoons. However, notice when you open the website from a mobile device.  Instead of seeing high resolution images for movies and cartoons, you’re given a list of games for a mobile device. Disney is a good example of a company that targets the viewer. When a user opens this site from a smart phone, they probably want a game or activities they can do on a smart phone.

Another great example is Food Sense, which is a foodie blog. Open the site from your desktop. You see a great blog with high quality images. When you open the same site from your smart phone, you see the same great images but you also see a better layout. The blog navigation is set at the top so you can easily see it. The posts are resized to fit to the screen, so you don’t need to scroll from the left and right to see content.  This site is a great example of resizing content for a smart phone while keeping the image quality.

These are a couple examples, but you can use these examples as a way to evaluate your own site. Does your site resize based on screen size? Do image scale based on bandwidth? You can draw in a number of users by simply catering to these types of users.