[PDF] Responsive Web Design - Siteloft

PDF document for free

1. PDF document for free

64725_3siteloft_responsive_e_book.pdf

Responsive

Web Design

The world has gone mobile

siteloft.com© siteloft 2015

Jackson Hills, Richard Dobson & Anton Babkov

ContentsSummary

Responsive sites also:

A bit about Siteloft

03 07 14 1704
09 15 21
19 23
25

Introduction

A brief history

How it works

The mobile explosion

ƪ

Responsive vs adaptive

ƪ

Google loves responsive

Performance

Measuring the return

Wrap up

There's a surge of new mobile and tablet devices on the market. Responsive web design is a new way of designing websites so they can be viewed on every device and screen size without the need for seperate versions of the same website, or an app. Increase the impact of your web presence through positive SEO Ʃ Help your website to perform faster and better on any device. Future-proof your website to work on an exploding collection of new devices. Make your site look clean and modern; a necessity for great usability and site conversion. We're Siteloft - a team of passionate designers and developers building kick-ass websites for real estate agencies. Our philosophy is simple; create products that last. We're constantly up - dating our templates to keep up with the latest technologies - and they're designed to work on any device. Our customers can rely on us to keep their heads above the tech waters. I wonder what you're using to read this right now. A printed page? A desktop computer? A tablet? Your smartphone? Hello

The world has gone mobile. Gone

are the days when the web was exclusively the realm of the mouse and keyboard. The recent rise in mobile browsing means your site needs to work on tablets, phones, desktop computers - everything.

To make matters worse, we're all

accustomed to websites of an extremely high standard. Boring, plain websites send visitors running as fast as they can in the opposite direction.

What you need is a website that

looks stunning on every device.

You can't weigh up your options

Ʃ

losing visitors on one device for ƪƩƪbleeding, desperately trying to custom-make solutions for every new device that comes to market.

But there is a solution.

Responsive web design allows

pages to function beautifully on anything. By resizing and reorganizing content and images without custom coding for each platform or screen size, one stunning website is all you need for visitors to browse with ease - whenever, wherever, however. One

ƪƪ

03

A brief history of

responsive design

Older websites were optimized for just one

Ʃ a mobile experience free from the problems involved in loading a desktop site onto a teeny- tiny display you'd need a whole new website or costly mobile application. Responsive design eliminated the need for all that tedium.

In this age of gizmos and gadgetry, that's

awfully useful.

Desktop computers are connected to

progressively large and high-resolution monitors. Smartphones are striving towards screens almost any size except the one they had last generation. We have the iPad; the world's most expensive, electronic rectangle -

and the iPad mini; a slightly smaller electronic rectangle. We have smart watches and those glasses from the future that inject the Internet directly into your eyeballs. They even tried some bizarre phone/tablet hybrid - the phablet; a monstrous creation Dr Frankenstein himself would be too ashamed to pull the curtain back from.

04 designed with the utmost consideration for mobiles. He was early in understanding the capabilities of smartphones, and their imminent

We're living in a future he predicted.

His 2009 article, ‘Mobile First' introduced the seminal idea that websites should be clean and free from excessive, unnecessary content, so

they could be easily viewed on a phone.As a matter of fact, the Internet has become so popular and useful that they're banging it into just about everything now-a-days. PlayStations, Xboxes and even GameBoys are all web-enabled so you don't have to reach for your phone. And as if we weren't completely inundated already, Samsung's RF4289 fridge boasts a eight-inch, Wi-Fi enabled touch-screen that's been cunningly nailed into the door - something humanity has been crying out for since we pulled ourselves out of the primordial slime, apparently.

But even before we got so carried away,

Luke Wroblewski knew that technology was

advancing in dog years, and was conscious of the veritable device explosion to come. Back then he proposed that websites should be ƪ a start, but in practice it ended up being kind of like a chocolate peanut stripped of its chocolate coating.

You're just left with a peanut.

05

Ethan Marcotte saw Wroblewski's point, but

wanted the best of both worlds. What's the good of cake if you can't eat it? It wasn't feasible to try to load a nice chocolaty web page designed for a computer monitor onto an iPhone screen - they're two very Ʃ a rather elegant solution in 2010; why not

ƭƪ

ƪ loved it. In the years since Marcotte's article, the use of his responsive web design has exploded. His suggested framework bridged the extensive gap between the staggeringly diverse collection of devices and platforms for browsing the Internet. design number two in ‘Top Web Design

Trends'. Mashable named 2013 The Year of

Responsive Design.

100%

Marcotte's (aptly named) article

Śś

units, (percentages rather than pixels or points), websites could be designed to last

ŝƫŞ

06

How does

responsive web design work? In a nutshell, Marcotte's approach is based on two core principles:

Media queries identify the device

Essentially, this is the website asking the device, “how big is your screen, and what rules do you run with?" Once it's apparent what kind of screen it's working with, the magic begins. ƫ Ʃ ƪ

ƫƫ

ƪ of the screen. There's no more of that pesky panning and

śƩ

1 2 07

We literally have the

Internet in the palm

of our hand 08

The mobile explosion

Initially we liked our smartphones for their on-the-go appeal, portability, and admittedly, the fun little games. They were handy - though in a way, somewhat gimmicky. You're no doubt within reach of your phone now - go on, touch it. A US study found in 2012, the average person spent 109 minutes a day on their smartphone. In 2014, only two years later, the smartphone overtook television as the most popular American screen - with 177

ƪś

waking lives. 109
minutes a day on their smartphoneIn 2012, the average person spent

Despite everyone's obvious newfound

love for mobile devices, most people had previously stuck to their desktop computers for the bulk of their browsing. However, Mary

Meeker (notable Emerging Technologies

Analyst) predicted in her 2010 ‘State of the

Internet' report that mobiles were set to

overtake computers as the main mode of

Internet consumption.

A US

study found 09

Mobile browsing is

sky-rocketing

2 billion

0.4 billion

2007
2015

Studies have shown they're rapidly becoming

the preferred method of browsing the Internet. literally have the Internet in the palm of our hand.

Mobile internet users versus desktop internet

users over the last eight years users year 10

177 minutes

a day on their smart phoneIn 2014, the average person spent

18.75%

of their waking lives staring at this screenThat's 11 27%
37%
of consumers will leave a site if it's not optimized for mobile of consumers are more likely to purchase on a mobile optimized site 54%
of consumers believe ƪ information on mobile optimized sites 2011
52%
424.9
more tablets were shipped for sale than notebooks rise in tablet sales in 2013 million tablets expected by 2017 In their ‘2014 Mobile Behaviour Report', Salesforce released a number of interesting statistics on the behaviour of mobile users.

The following are a few pertinent highlights:

12

It's just not feasible anymore to have a website

that only works on a desktop. Mobile and tablet devices hold massive (event dominant) shares in Internet use. Unless you're keen to ignore a market segment that represents more than you're going to need to provide mobile and tablet users with a website of a standard they're accustomed to.

You need to be

accessible on a mobile, yet you don't want to lose your website's chocolate coating - and ś design is king.

It's entirely possible to

worlds. 13

Are you prepared for

the next device?

That means every phone, tablet, desktop,

games console, watch or Internet fridge, Ƭ with down the road.

When the iPhone 7 comes out, a responsive

web page will ask the phone how big its screen

Likewise, even when the iPhone 17 is released,

śScreen density is a measured by how many ƪƪƪ

Screen size

Screen density

?

20072011201320142016

or something), your webpage will still work ƪ they don't just change size; they also change

density. ƪdpi - precisely double, (meaning it has twice as many pixels in the same area). A picture on an

without a responsive design strategy.

Thankfully, the nature of responsive design's

‘relative units' means that dpi is taken into

consideration, and the perfect content for your device size and density is displayed no matter

Śƪś

design's biggest advantages. The times they are still a-changing, and a web page that ƪ 14

ResponsiveAdaptive

vs. ƪ could be boiled down to its ability to ƫ screen size. is limited to just the screen sizes it's been built to accommodate. 15 ƪ brought into the light of day, adaptive design was created along similar principles. Both allow websites to be viewed on various screen sizes, Ʃ problem.

We'll forget about the iPhones 7 through 17 for

example. Let's say you optimise your website ś inch of screen, suddenly your site isn't really all that optimised anymore. Thankfully, the nature of relative units allows responsive web pages to ƪ

ƫśƫśresponsive. Responsive and Adaptive are often misused interchangeably, despite the Ʃa responsive website - be absolutely certain śƫ

You don't want to miss out on having

your page available on Dacor's new

Wi-Fi connected oven, now do you?

misused interchangeably, despite the stark Ʃ Ř

śƫ

16 ƪ

Responsive web design isn't just about getting

ƪŘśƪ

engine optimization (SEO). It may well be one of ƪ

SEO is essential to positioning your website

higher up in search engine results so it can be easily found by potential clients.

Search engines aren't easily deceived thanks to

their extraordinarily clever algorithms. If you're Ƭ your site to its seams with highly-searched buzzwords like ‘Miley Cyrus', you're not going Ƭ trickery ages ago. You can't coax a pig into climbing a ladder.

Thereby increasing your

rates of enquiry and monthly supply of beer dollars. 17 ƪ engines. According to ComScore's October 2014 ś

Google as kingmaker

67%
33%
searches using Google searches using all other search engines 18

Google loves responsive

local real estate agent

Your website on top

Your competitor

https:// yourwebsite .com https:// yourcompetitor .com

Mobile-friendly

look at you all the way up here. Goodness gracious, your competitors must be jealous. pages so much they rank them higher in their search results. ƪ the authority on SEO. In 2014, Google outright said “Responsive design is

Google's recommended design pattern".

Google already pushes sites with faulty mobile redirects down in search results, issue a warning if a site uses Adobe Flash (which isn't supported on iOS or Android versions 4.1 or higher), and labels websites that work on mobile devices as ‘Mobile-Friendly'. But they haven't stopped there. “As more people use mobile devices to access the Internet, our algorithms have to adapt to these usage patterns," explained Google in a recent blog post unveiling their next big change.

Two weeks prior to publishing this paper,

Google announced that as of April 21,

2015, mobile-friendliness will become a

ranking signal that contributes to your site's 19 ƪ it runs better too. 20

Having separate sites for desktop and

mobile also incurs the problem of duplicity.

By splitting your could-be/should-be single

page into two you're risking bringing visitors to the wrong version of your site.

Don't split your

Ƭ ƪ someone looking for something they found on your desktop site who's returned later on a mobile or tablet.

ƪƪƩ

to your main page, it's likely they'll just go somewhere else. Responsive websites don't have this problem. There's just one URL, and no less content. It's the same

ŘƩ

Performance

Evidently this jubilee of nippy electronic

stimuli has taken our attention spans out the back to send them the way of Old

Yeller, and as a result, anything less than

ƪ other goal, your mobile experience should be lightning fast. Tachyon fast if you can manage it. thumbnails on a mobile device, or maybe you far faster load times. mobile experience should be lightning fast.

Tachyon fast if you can

manage it.

Responsive sites dynamically modify the

image payload that is delivered to the device.

This computer-babble can be translated to;

‘it uses a suitably sized image for the device ś load these up on a mobile device, it could take forever to load, and cost a lot of your phone plan data or credit.

Loading times are of tremendous importance.

seconds for a webpage to load before abandoning the site.

6 to 10 seconds.

21

Responsive makes

you money 22

Measuring the return on

responsive web design If you're using social media for an inbound marketing strategy, there's absolutely no doubt that you're attracting mobile users to your website. In 2013, ComScore reported that 55% of social media access is via a mobile device. Mobile users are a huge and growing demographic. Building brand

ƪś

A responsive website will no doubt save time by eliminating the need for a separate mobile site, (another costly code to maintain). Building customer loyalty with a high-quality, consistent experience on all their devices is excellent business. Designing a site responsively will also help it to climb the ranks in search engine results pages. Increased customer acquisition and retention is

pretty close to the perfect combination. There is a clear cost in building a responsive site for your agency, or converting to a responsive provider. śreturn on investment. So, how could a

ƪ 1 $ 2 3 4 23

Building a website once,

śƪ

Plus, if you have a mobile version of your website already, and a separate department to write it, it could save you a lot of money.

If you're struggling

to keep up with every device, then it's wise to make the switch24 ƪ They look great, and enhance user experience tenfold by maintaining the simplicity and ease the Internet was created for. First impressions really do matter, and if you want to give your web page curb appeal on every device, design it responsively. Optimizing your website's search footprint will strengthen your web presence and attract more people to your site over your competitors. A future-proofed website will save you time and money, not to mention the headache of having to keep up with the back-to-back advances in the techno-world. Device awareness is tantamount for marketing - it's the key to boosting web presence and staying ahead of competitors. What with the continual rise in mobile browsing, the increasing popularity of tablets and iPads, and ƪ We'll leave everyone else's non-responsive websites to be broadcasted proudly in these amazing Japanese, Wi-Fi-enabled baby diapers where they belong - if only they could be viewed on every device. and money, not to mention the headache

Wrap up

25
siteloft.com

1300 459 445

Web Design Documents PDF, PPT , Doc

[PDF] above web design

1. Engineering Technology

2. Web Design

3. Web Design

[PDF] above1 web design agency

[PDF] after web design what can i do

[PDF] antialiasing web design definition

[PDF] antiques web design

[PDF] are web designers in demand

[PDF] bayou web design plus

[PDF] best web design roundup

[PDF] brackets web design download

[PDF] codehs web design answers pdf

12345 Next 200000 acticles