Responsive Web Design

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...

The number of devices and the popularity of devices within all sizes has required web developers to plan and create web sites that are useful to all. It wasn’t long ago that a developer’s only concern was if a visitor was viewing a web page using a 1024 pixel display or a 1280 pixel display. Although there may have been others, the population was so small that taking extra time and effort for these users wasn’t warranted. Now, there are dozens of varying devices that can access your web site–from small iPod Touches (or even smaller smart watches) to large-scale tablets and even larger desktop/tv displays.

  1. Change 2 Columns to 1 Column with Media Queries
  2. Responsive Layout for Tablets
  3. Embed a Responsive YouTube Video on Your Web Page
  4. Responsive Web Design
  5. Use Meta Viewport for Responsive Web Design
  6. Create @Media Rules for Responsive Web Design
  7. Responsive Layout for Smart Phones and iPods
  8. Make a Simple Responsive Drop-down Menu
  9. Slide Away Web Page Exposes Side Bar Nav Menu
  10. Adding JavaScript to the Slide Away Web Page
  11. Starting the Mobile-friendly Cafe Site
  12. Finishing the Mobile-friendly Cafe Site


Developers have a few options…

  1. The site can have a supporting mobile application (app). Big sites like IMDb and Amazon encourage mobile users to download and install a mobile (or tablet-friendly) app to interact with their sites/stores.
  2. The site can have a mobile-friendly, sister site. While http://powersports.honda.com/ leads users to the desktop site for Honda motorcycles, users on mobile devices are routed (with scripting) to http://m.powersports.honda.com/, which is a mobile version of the site.
  3. The site can have a responsive design. Starbucks coffee and many other businesses have one web site that styles differently for large device users and for mobile device users. This type of site changes look and layout by responding to the user’s device characteristics.

For personal sites, hobby sites, small- and medium-sized business sites; The best option is #3 responsive web sites. It’s not practical to request that the customers of a local plumber install an app on their phone. And, a small business like this likely doesn’t want to pay to have two sites created and maintained. However, having one site that re-designs for mobile users is affordable, easy to set up, and easy to maintain.

Add Comment