As you have probably noticed, home and office computers aren’t the only type of computer hardware with web browsers anymore. To address this reality, responsive web design has evolved to allow web designers to create websites in order to accommodate the varying screen sizes of devices such as the BlackBerry, iPhone, iPad, netbook, Kindle and of course, the laptop and home computer.
Most web designers understand that it’s not practical and oftentimes impossible to create a website version for every kind of device. Responsive web design approach suggests that website development and design must respond to the environment and behavior of the user, based on screen size, platform and orientation. This approach consists of a mix of flexible layouts, images and the use of CSS media queries.
Fluid Grid Allows Webpage to Resize
One of the key elements of responsive design is the fluid grid. Traditionally, web designers have used fixed width layouts, where the web page consists of a fixed number of pixels or a percentage value across and then centered on the page. A fluid grid allows the web page to stretch across a huge high-resolution screen or be squeezed onto a tiny mobile device. All of the elements of the page will re-size their widths in relation to one another. As a user switches from laptop to iPhone, the website should automatically adjust to accommodate the particular device being used. You can explore a tutorial on fluid grids on the 1stwebdesigner website.
Responsive Images
The jury is still out on the best practices to use in placing images on a web page that will adjust to resolution or size of a particular device’s screen without distorting the image. Some web designers seem to feel that the use of adaptive images will solve the problem. The adaptive image method uses one htaccess file, one php file and one line of javascript. The htaccess and php files are placed in the root directory and the single line of javascript is placed in the head of the index file. It’s supposed to work. A good article on images can be found at the Web Designer Depot.
CSS Media Queries
Media queries enable a web designer to create stylesheets based on width, height, color, and orientation. Examples of the many media queries available can be found on the official w3c website.
In Ethan Marcotte’s introductory article about the responsive web design approach, he states: “Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”
Kansas City Website Design creates 100% custom and responsive web designs. Many Kansas City web designers buy and modify prepackaged WordPress templates or produce low-quality Front Page-style websites. All of our designs are created to your specifications by experienced website designers. If you are planning to re-design or develop a new website, this could be the most important decision your company makes this year. Contact us and find out why so many KC businesses are choosing our firm and why we may be the best partner for your company.
