firefli media - blog - the basics responsive web design and mobile optimization

2
Aidan O’Connor The Mason Jar > Aidan O’Connor The Basics: Responsive Web Design and Mobile Optimization What is Responsive Web Design? Responsive Web Design (RWD) is an intuitive approach to website display and navigation. It allows designers to create one website that resizes itself according to type of device it is viewed on. With most consumers now browsing the internet across several electronics including laptops, smartphones and tablets, RWD is a popular component among website developers who have to consider these devices’ different screen dimensions. Using RWD, a website adapts to portray information in effective fashion while avoiding the frustrations of excessive scrolling, distorted images, and breaks in the intended layout that can arise when a desktop style website is viewed on a mobile platform. As an example, a responsive website with five columns of text on its desktop version will condense this information to two columns for a tablet format, or one column for a smartphone format. Alternatively, users can opt to open or expand areas of the site using a mouse click or touchscreen. How Does Responsive Web Design Work? Responsive Web Design uses fluid grids to size elements in proportion to one another. This differs from more traditional design methods that determine size by the number of pixels that websites and their graphics are made of. Each element, including images, is calibrated to fill a certain percentage of the screen, maintaining a similar layout across different device screens without compromising the website’s intended form.

Upload: aidan-oconnor

Post on 07-Aug-2015

39 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Firefli Media - Blog - The Basics Responsive Web Design and Mobile Optimization

Aidan O’Connor

The Mason Jar > Aidan O’Connor

The Basics: Responsive Web Design and Mobile Optimization

What is Responsive Web Design?

Responsive Web Design (RWD) is an intuitive approach to website display and navigation. It allows

designers to create one website that resizes itself according to type of device it is viewed on.

With most consumers now browsing the internet across several electronics including laptops,

smartphones and tablets, RWD is a popular component among website developers who have to

consider these devices’ different screen dimensions.

Using RWD, a website adapts to portray information in effective fashion while avoiding the frustrations

of excessive scrolling, distorted images, and breaks in the intended layout that can arise when a desktop

style website is viewed on a mobile platform.

As an example, a responsive website with five columns of text on its desktop version will condense this

information to two columns for a tablet format, or one column for a smartphone format. Alternatively,

users can opt to open or expand areas of the site using a mouse click or touchscreen.

How Does Responsive Web Design Work?

Responsive Web Design uses fluid grids to size elements in proportion to one another. This differs from

more traditional design methods that determine size by the number of pixels that websites and their

graphics are made of.

Each element, including images, is calibrated to fill a certain percentage of the screen, maintaining a

similar layout across different device screens without compromising the website’s intended form.

Page 2: Firefli Media - Blog - The Basics Responsive Web Design and Mobile Optimization

Aidan O’Connor

Why Is Responsive Web Design Effective?

Appeases Influential Stakeholders

The demand for Responsive Web Design has been led by some of the internet’s most influential outfits.

Top search engine Google has reasserted the importance of mobile friendly websites in providing high

quality content for an optimal user experience. The company has pledged to prioritize websites with

mobile interfaces in their search results, as a component of their page ranking algorithm.

Identifies a Growing Market

Recent research into the browsing habits of internet users has further validated the need for websites to

configure to mobile platforms. In January 2014, internet technology company comScore revealed that,

for the first time ever, web browsing Americans were using smartphone and tablet devices more than

their desktop PCs. The switch in browsing habits underlines the need for consistent user experiences

across different devices, or else visitors will bounce off the site in favour of more mobile friendly

alternatives.

As well as becoming more active, the market for mobile technology is expanding. A Pew study, also

from early 2014, revealed that 58% of American adults have a smartphone, while 42% own a tablet

computer. Both statistics continue to grow as modern society embraces the benefits of mobile

technology.

Addresses Physical Practicalities

Optimizing a website for mobile devices not only protects its layout from distortion, but also improves

speed performance. Graphic heavy websites often have slower loading times across mobile devices

depending on the device’s power and signal strength. Acknowledging this trend, RWD creates a more

simple interface that allows web pages to load faster, fostering a more positive user experience.

Responsive web design and mobile optimization also address the physical constraints of using a

touchscreen over a computer mouse. Catering to a touchscreen’s lack of precision compared to the

point and click mouse, web designers must consider the user’s capabilities when designing elements

such as spacing, icon size and number of graphics in their work.

Ultimately, RWD goes above and beyond the simple requirements of a typical website to provide a

product that respects the consumer and is conscientious of other demands in their life. This respect for

the user goes hand-in-hand with the principles that underline content and inbound marketing, creating

a platform on which businesses can genuinely engage with their customers.