The New Year will bring about changes for every web designer, and it is no surprise that this gets overwhelming. Between trying to recover from the holidays and getting started on that “new year new diet” mentality once again, it’s hard to keep up with all of the upcoming web design trends. For this reason, I leave you with one simple thought: Responsive web design. If you remember nothing else about the newest web design approaches, remember this term and give it your undivided attention.
Responsive web design is arguably going to be the most important thing for web designers to implement in the New Year. For those who are unfamiliar, responsive web design refers to a website that adjusts its elements to the particular screen size. Whether it be a big screen TV or a mobile phone, it’s important that a website looks right. There are a few things that will happen when you utilize responsive web design:
- Images will resize based on the screen size
- Buttons will be larger for those using a small screen
- The least important information will be moved to the bottom for those using a small screen (search bar, advertisements, etc.); therefore pulling important content to the top
- The layout will easily change based on the screen size (widescreen, tiny screen, etc.)
This aspect of web design will become extremely important in the near future because smartphones and tablets are growing in popularity. Now more than ever, people surf the internet, make purchases, and update their social networks on these smaller screens. According to Search Engine Land, more than 1/5 of all searches will be completed on a mobile device in the upcoming year.
Examples of Responsive Web Design
Consider the following example from The Boston Globe. Notice that on the tablet version (in the middle) the advertisement is found on the bottom. This allows the most important content to be seen at the top. The smallest version (on the right) has eliminated the advertisement on the initial search page and placed the picture on the bottom. Once again, the most important content is on the top.
Had they left the formatting alone, someone would pull up this webpage on their mobile phone and see nothing but a huge picture, and then they would scroll down and see nothing but a huge advertisement. In other words, they would have no idea what the article was even about (or if there even was an accompanying article).
Although most problems occur when going from a big screen to a small screen, the need to optimize does go both ways. Consider the poor example below from Elated. This website was obviously intended by the web designer to be viewed on a smaller screen such as a laptop or a tablet; however, someone viewed this page on a widescreen computer or TV. Because this website did not use responsive web design, the viewer sees a lot of white space wasted on the sides of the screen. This therefore causes the webpage to look a little bit strange.
Without responsive web design, it would be extremely difficult to keep up with so many different formats and screen resolutions. Unfortunately, getting started with responsive web design is a bit more complicated than simply changing the size of the font or coloring in some extra white space. However, once you know the basics getting started with responsive web design is actually quite simple.
Getting Started with Responsive Web Design
Before getting ready to dive into responsive web design, it is important that you understand CSS. If not, visit w3schools.com for a tutorial. Once you’re familiar with CSS, you can begin utilizing responsive web design. There are two aspects that are particularly important:
1. Meta Tags
Most browsers automatically scale HTML pages to a specific size. Therefore, you must disable this automatic scale by putting a specific Meta Tag (shown below) in the <head>. This will tell the browser to use the size of the device as opposed to the default scale.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
2. CSS Media Queries
This allows you to create rules that will only apply to certain size screens. In other words whenever a browser’s width and height are a certain size, your website will know what to do; it will change based on the rules you customized.
Responsive Web Design in Depth
Meta Tags and CSS Media Queries will get you started, but responsive web design is all about customization. As a web designer you will likely find that this is fairly simple; however it will be time consuming. It is important to do your homework and figure out exactly how you want your webpages to look when viewed on certain sized screens. This will depend on the original layout of your webpage, the number of advertisements, and the number of images to name a few.
For an in depth look at the behind the scenes tips for responsive website design, consider visiting Web Design Shock or Elated. Both offer pages and pages of detailed information. Although it may seem like a lot of information at first, this solution will save you a lot of headaches in the future. If web devices continue to be produced at the rate they did these last few years, it will be impossible to keep up. If nothing else, this project should keep your mind busy on optimization and away from those holiday cookies.
Photo Credit: bradfrostweb.com
Amanda DiSilvestro is a writer on topics ranging from web design to small business loans. She writes for an online resource that gives advice on topics including responsive web design to small businesses and entrepreneurs for the leading business directory, Business.com.