SlideShare uma empresa Scribd logo
1 de 9
What Is Responsive Web
Design 101

Created By Cygnis Media
http://www.cygnismedia.com/
Responsive Web Design
 Responsive Web design is the name given to a

wide range of methods targeted at creating
Website completely readable on any display.
This contains creating it easy for people to study
the material on the website and for them to
quickly get around through different web pages
of the website.
Responsive Web Design Technique

 Flexible elements

 Showing only the necessary content
 Built for touchscreens
Flexible Elements
 One of the greatest problems of mobile Web design is that

you simply cannot predict what monitor size to use. The
ever increasing popularity of mobile phones (with different
display sizes, specifications, standard web
browser, OS, among others) made web development more
challenging. Plus the fact that more and more new mobile
phones and other cellular phones are presented every day.
 Responsive Web style allows you to use the right scaled
pictures, use the correct structure and even change the
routing options, based on how big the mobile phone
display is.
 Images

 Text
 Layout
Showing Only The Necessary Content
 One of the many difficulties of dealing

with a compact sized display is that you
basically cannot put in too much material
or else it would look messy and
complicated.
 A very excellent example would be Web

email. On your PC, you would probably
discover a lot of details already available
on display such as the sender's name, the
e-mail topic, the time frame, the directory
where the email is situated and a small of
written text that reveals the first few
collections of the concept whole body.
 On a compact sized display, however, that

would look messy and it will not be very
useful for individuals who are on the go
and looking for details on their mailbox.
Built For Touchscreens
 Responsive Web design also requires into account that

most mobile visitors are now using touchscreen display
screen gadgets. So you must create sure that your style
is user-friendly. Your control buttons and hyperlinks
should be quickly utilized. Allow for four big thumbs and
keep your hyperlinks far apart so that people would not
have problems hitting them.
Benefits Of Responsive Web Design
 Responsive web design is something you already

know:
 When it comes to doing responsive design for your website, you

really do not have to understand a new set of development or a
development terminology. You would STILL be dealing with
HTML and CSS - resources you're already acquainted with as a
Web designer.
 What's more, if you definitely dislike remodelling HTML and
CSS, you can use a cms such as WordPress and be able to do
sensitive style quickly and quickly.
 Responsive web design makes your site future-proof:
 As more and more individuals are surfing around the Web on their mobile

phones, the near future is directing to having a Web design that would allow you
to show your website completely on these gadgets. In fact, if you only have a pc
edition of your Website now, then you might be losing out on some clients
because individuals these days are using their mobile phones more than their pc
PCs!

Responsive web design helps you save on

costs:
 Using responsive design, you only need one set of webpages for every possible

display that you have. This implies that you do not have to make individual
webpages for iPhones, tablets, Android operating system gadgets and other
displays. As you can think about, you would be programming less webpages
maintaining growth expenses down.
Thank You

Created By Cygnis Media
http://www.cygnismedia.com/

Mais conteúdo relacionado

Mais de Nelsan Ellis

Social media marketing trends for 2014
Social media marketing trends for 2014Social media marketing trends for 2014
Social media marketing trends for 2014Nelsan Ellis
 
The modern marketer
The modern marketerThe modern marketer
The modern marketerNelsan Ellis
 
Marketing campaign ideas
Marketing campaign ideasMarketing campaign ideas
Marketing campaign ideasNelsan Ellis
 
Social media trends 2013
Social media trends 2013Social media trends 2013
Social media trends 2013Nelsan Ellis
 
Application Development Tools For Android
Application Development Tools For AndroidApplication Development Tools For Android
Application Development Tools For AndroidNelsan Ellis
 
Web Application Security
Web Application SecurityWeb Application Security
Web Application SecurityNelsan Ellis
 
Social Media Strategy For 2013
Social Media Strategy For 2013Social Media Strategy For 2013
Social Media Strategy For 2013Nelsan Ellis
 
Top 10 Social Media Websites
Top 10 Social Media WebsitesTop 10 Social Media Websites
Top 10 Social Media WebsitesNelsan Ellis
 
Android App Marketing
Android App MarketingAndroid App Marketing
Android App MarketingNelsan Ellis
 
Social Media Marketing
Social Media MarketingSocial Media Marketing
Social Media MarketingNelsan Ellis
 
Facebook vs google+
Facebook vs google+Facebook vs google+
Facebook vs google+Nelsan Ellis
 
Facebook help to grow business
Facebook help to grow businessFacebook help to grow business
Facebook help to grow businessNelsan Ellis
 

Mais de Nelsan Ellis (13)

Social media marketing trends for 2014
Social media marketing trends for 2014Social media marketing trends for 2014
Social media marketing trends for 2014
 
The modern marketer
The modern marketerThe modern marketer
The modern marketer
 
Marketing campaign ideas
Marketing campaign ideasMarketing campaign ideas
Marketing campaign ideas
 
Social media trends 2013
Social media trends 2013Social media trends 2013
Social media trends 2013
 
Application Development Tools For Android
Application Development Tools For AndroidApplication Development Tools For Android
Application Development Tools For Android
 
Web Application Security
Web Application SecurityWeb Application Security
Web Application Security
 
Social Media Strategy For 2013
Social Media Strategy For 2013Social Media Strategy For 2013
Social Media Strategy For 2013
 
Top 10 Social Media Websites
Top 10 Social Media WebsitesTop 10 Social Media Websites
Top 10 Social Media Websites
 
Android App Marketing
Android App MarketingAndroid App Marketing
Android App Marketing
 
Iphone vs android
Iphone vs androidIphone vs android
Iphone vs android
 
Social Media Marketing
Social Media MarketingSocial Media Marketing
Social Media Marketing
 
Facebook vs google+
Facebook vs google+Facebook vs google+
Facebook vs google+
 
Facebook help to grow business
Facebook help to grow businessFacebook help to grow business
Facebook help to grow business
 

What is responsive web design 101

  • 1. What Is Responsive Web Design 101 Created By Cygnis Media http://www.cygnismedia.com/
  • 2. Responsive Web Design  Responsive Web design is the name given to a wide range of methods targeted at creating Website completely readable on any display. This contains creating it easy for people to study the material on the website and for them to quickly get around through different web pages of the website.
  • 3. Responsive Web Design Technique  Flexible elements  Showing only the necessary content  Built for touchscreens
  • 4. Flexible Elements  One of the greatest problems of mobile Web design is that you simply cannot predict what monitor size to use. The ever increasing popularity of mobile phones (with different display sizes, specifications, standard web browser, OS, among others) made web development more challenging. Plus the fact that more and more new mobile phones and other cellular phones are presented every day.  Responsive Web style allows you to use the right scaled pictures, use the correct structure and even change the routing options, based on how big the mobile phone display is.  Images  Text  Layout
  • 5. Showing Only The Necessary Content  One of the many difficulties of dealing with a compact sized display is that you basically cannot put in too much material or else it would look messy and complicated.  A very excellent example would be Web email. On your PC, you would probably discover a lot of details already available on display such as the sender's name, the e-mail topic, the time frame, the directory where the email is situated and a small of written text that reveals the first few collections of the concept whole body.  On a compact sized display, however, that would look messy and it will not be very useful for individuals who are on the go and looking for details on their mailbox.
  • 6. Built For Touchscreens  Responsive Web design also requires into account that most mobile visitors are now using touchscreen display screen gadgets. So you must create sure that your style is user-friendly. Your control buttons and hyperlinks should be quickly utilized. Allow for four big thumbs and keep your hyperlinks far apart so that people would not have problems hitting them.
  • 7. Benefits Of Responsive Web Design  Responsive web design is something you already know:  When it comes to doing responsive design for your website, you really do not have to understand a new set of development or a development terminology. You would STILL be dealing with HTML and CSS - resources you're already acquainted with as a Web designer.  What's more, if you definitely dislike remodelling HTML and CSS, you can use a cms such as WordPress and be able to do sensitive style quickly and quickly.
  • 8.  Responsive web design makes your site future-proof:  As more and more individuals are surfing around the Web on their mobile phones, the near future is directing to having a Web design that would allow you to show your website completely on these gadgets. In fact, if you only have a pc edition of your Website now, then you might be losing out on some clients because individuals these days are using their mobile phones more than their pc PCs! Responsive web design helps you save on costs:  Using responsive design, you only need one set of webpages for every possible display that you have. This implies that you do not have to make individual webpages for iPhones, tablets, Android operating system gadgets and other displays. As you can think about, you would be programming less webpages maintaining growth expenses down.
  • 9. Thank You Created By Cygnis Media http://www.cygnismedia.com/