I recently began the task of converting each of my websites to use a responsive design layout. Google recommends using responsive design and says:
This means that your website serves the same HTML code to all devices along with different CSS style rules to optimize the site’s interface on desktops, smartphones, and tablets.
You may choose to develop your own responsive layout, buy a template that is responsive or use an add-in/extension for your particular web editor. Since I own both Dreamweaver and Expression Web, I decided to give the Dreamweaver extensions developed by Project VII a try. The two I have been using are Affinity with its included Drop Menu Magic program and CSS Page Builder Magic 2. They are both excellent additions and I wish they were available for Expression Web but sadly they are not. Since I am not as familiar with the workings of Dreamweaver, I switch between the two programs.
Details of recommendations
Google gives the following details on its recommendations:
- Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.
- Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
- Sites that have separate mobile and desktop URLs.
Examples: Each of the sites listed below us a responsive layout. You can test them by opening the site in your browser and resizing the browser itself.
You can read the full article Building Smartphone-Optimized Websites on Googles Web Developers site. You might also be interested in Building Mobile-Optimized Websites.
