One Size Fits All: Responsive Web Design

| September 5, 2012 | 0 Comments

We all know how essential it is for every business to have a website. A website connects a business with its customers through online advertisements, product displays, product reviews, and  purchasing capabilities.  Sometimes, having a clearly displayed address and phone number on the website is all it takes to bring together a business-customer union. Other times, the website isn’t just the company website – it’s the storefront, too.  In every case, the significance of having a user-friendly website is of utmost importance to the success of your business.  Coming in a close second is the growing need to  have a well-designed mobile site;  information in which many business owners are becoming privy to as the percentage of mobile traffic has increased 47%, according to ComScore.  As a result of all of these website inevitabilities comes the birth of a new idea: responsive web design.  Simply put, responsive web design (RWD) creates a website that can adapt to any size screen from desktop to mobile in a user-friendly, easy-to-read viewing panel.  Responsively designed websites can provide an affordable solution to businesses in need of building standard and mobile sites within a budget.

What is Responsive Web Design?

Responsive web design is not an entirely new idea to web designers, but the rapidly growing technology industry with net books, tablets, smart phones, laptops, and desktop computers with varying-sized browser screens is making RWD a more widely-discussed option when creating new sites.  With responsive web design, programmers include a single set of code that creates a fluid grid to all the elements in the layout in order for everything to re-size their widths in relation to one another.  In other words, as the screen size shrinks or expands,  the elements of the layout, such as the navigation bar or images, will re-order themselves while maintaining their respective aspect ratios.  However, none of that can be done without the help of CSS3 media queries.  CSS3 media queries gather data about the user and how the user is accessing the site (whether it’s through a desktop, tablet, or mobile device) in order to determine which cascading style sheet (CSS) to apply to the web page.  CSS3 is now compatible with most browsers, making RWD more obtainable and marketable to clients.  Look at the website for Food Sense, for example, and notice how their architecture fits neatly into each screen size with the most important information staying above the fold on the smallest screen size, along with easy navigation buttons.

 

Here we see the desktop version:

Food Sense RWD

 

In the smaller, tablet-sized screen, we can see they have elected to move the navigation bar horizontally across the top, rather than the 2-column display on the desktop version.

Food Sense RWD

 On the mobile-sized version, there is only one navigation bar which is layered above the logo. It’s important to notice their email newsletter registration form in the mobile version, which is the last element above the fold.  I speculate that they use the email newsletter as a marketing strategy as well as to track the number of mobile conversions.

Food Sense RWD

A Mobile Solution

With a nation that’s always on-the-go, businesses need to adapt and make their websites mobile, too.  According to Cisco’s  latest Global Mobile Data Traffic Forecast, “there will be 788 million mobile-only Internet users by 2015.” Clearly, having a mobile site is inevitable if a business wants to compete in the online arena, but building a separate mobile-only site can get pricey for businesses on a budget.  Building a responsive website offers a solution for businesses with tight budgets, as they’ll be able to reach users on all platforms.  It must be noted that owners should choose their site architecture wisely and be mindful of how the site will look as the screen size varies. For example, keep mobile-sized navigation and copy concise to maintain a positive user experience.  Also, keep in mind that file sizes on your desktop version will be the same file size on the tablet or mobile versions, too, because RWD only shrinks the appearance of images or logos not the file size. High-definition images, for instance, will cause a slower page speed on your mobile-sized version, which may be detrimental to your user-experience.   Although there are some drawbacks to building a responsive website for dual uses rather than a separate mobile-only site, RWD still offers an affordable way to remain competitive in mobile search.

As our technology continues to develop at an exponential speed, it can be difficult for businesses to stay abreast of competitive new trends.  Moreover, not  only is it challenging to keep up with the trends but it can prove to be expensive, too.   Building new sites with responsive web design offers business owners an economic way to stay ahead of the curve with a website that’s not only accessible through the desktop, but built to be used on a tablet or mobile device, as well.  With the simple implementation of size-point coding and CSS3 media queries, site owners can be confident that they’re providing a valuable, positive experience for their users, no matter the access device.  While responsive web design isn’t a new concept in the IT realm, it’s recent compatibility with most browsers and the demand for better mobile sites has re-introduced this concept as an alternative to separate site builds.  Online marketers should be on the lookout for this trend to emerge in the near future.

Category: Digital Marketing Guest Posts, Mobile Marketing

admin Digital Marketing Guest PostsMobile Marketing

We all know how essential it is for every business to have a website. A website connects a business with its customers through online advertisements, product displays, product reviews, and  purchasing capabilities.  Sometimes, having a clearly displayed address and phone number on the website is all it takes to bring together a business-customer union. Other times, the website isn’t just the company website – it’s the storefront, too.  In every case, the significance of having a user-friendly website is of utmost importance to the success of your business.  Coming in a close second is the growing need to  have a well-designed mobile site;  information in which many business owners are becoming privy to as the percentage of mobile traffic has increased 47%, according to ComScore.  As a result of all of these website inevitabilities comes the birth of a new idea: responsive web design.  Simply put, responsive web design (RWD) creates a website that can adapt to any size screen from desktop to mobile in a user-friendly, easy-to-read viewing panel.  Responsively designed websites can provide an affordable solution to businesses in need of building standard and mobile sites within a budget.

What is Responsive Web Design?

Responsive web design is not an entirely new idea to web designers, but the rapidly growing technology industry with net books, tablets, smart phones, laptops, and desktop computers with varying-sized browser screens is making RWD a more widely-discussed option when creating new sites.  With responsive web design, programmers include a single set of code that creates a fluid grid to all the elements in the layout in order for everything to re-size their widths in relation to one another.  In other words, as the screen size shrinks or expands,  the elements of the layout, such as the navigation bar or images, will re-order themselves while maintaining their respective aspect ratios.  However, none of that can be done without the help of CSS3 media queries.  CSS3 media queries gather data about the user and how the user is accessing the site (whether it’s through a desktop, tablet, or mobile device) in order to determine which cascading style sheet (CSS) to apply to the web page.  CSS3 is now compatible with most browsers, making RWD more obtainable and marketable to clients.  Look at the website for Food Sense, for example, and notice how their architecture fits neatly into each screen size with the most important information staying above the fold on the smallest screen size, along with easy navigation buttons.

 

Here we see the desktop version:

Food Sense RWD

 

In the smaller, tablet-sized screen, we can see they have elected to move the navigation bar horizontally across the top, rather than the 2-column display on the desktop version.

Food Sense RWD

 On the mobile-sized version, there is only one navigation bar which is layered above the logo. It’s important to notice their email newsletter registration form in the mobile version, which is the last element above the fold.  I speculate that they use the email newsletter as a marketing strategy as well as to track the number of mobile conversions.

Food Sense RWD

A Mobile Solution

With a nation that’s always on-the-go, businesses need to adapt and make their websites mobile, too.  According to Cisco’s  latest Global Mobile Data Traffic Forecast, “there will be 788 million mobile-only Internet users by 2015.” Clearly, having a mobile site is inevitable if a business wants to compete in the online arena, but building a separate mobile-only site can get pricey for businesses on a budget.  Building a responsive website offers a solution for businesses with tight budgets, as they’ll be able to reach users on all platforms.  It must be noted that owners should choose their site architecture wisely and be mindful of how the site will look as the screen size varies. For example, keep mobile-sized navigation and copy concise to maintain a positive user experience.  Also, keep in mind that file sizes on your desktop version will be the same file size on the tablet or mobile versions, too, because RWD only shrinks the appearance of images or logos not the file size. High-definition images, for instance, will cause a slower page speed on your mobile-sized version, which may be detrimental to your user-experience.   Although there are some drawbacks to building a responsive website for dual uses rather than a separate mobile-only site, RWD still offers an affordable way to remain competitive in mobile search.

As our technology continues to develop at an exponential speed, it can be difficult for businesses to stay abreast of competitive new trends.  Moreover, not  only is it challenging to keep up with the trends but it can prove to be expensive, too.   Building new sites with responsive web design offers business owners an economic way to stay ahead of the curve with a website that’s not only accessible through the desktop, but built to be used on a tablet or mobile device, as well.  With the simple implementation of size-point coding and CSS3 media queries, site owners can be confident that they’re providing a valuable, positive experience for their users, no matter the access device.  While responsive web design isn’t a new concept in the IT realm, it’s recent compatibility with most browsers and the demand for better mobile sites has re-introduced this concept as an alternative to separate site builds.  Online marketers should be on the lookout for this trend to emerge in the near future.