SlideShare a Scribd company logo
1 of 16
client
-
            java script -
               mobile -
Responsive Web Design -
HTML5Css3

cut the rope –        IE
        angry birds
JavaScript

         JavaScript
jQuery, jQuery ui, jQuery template frameworks
         WEB
                                  OOP JavaScript
Mobile

     iOs,
                                 windows7 android

html5 Css3 JavaScript
      phoneGap
Responsive Web Design

   layout
Responsive Web Design

                  css3 html5
Css3 Media Queries -
Css3 Media Queries

  media screen and (max-width: 600px ){
.Class
  background: #ccc
Css3 Media Queries
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />




@media screen and (min-width: 600px) and (max-width:
900px) {
  .class {
    background: #333;
  }
}
Css3 Media Queries
@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}
Responsive Web Design



                          http://colly.com/
        http://www.anderssonwise.com/
                http://stephencaver.com/
                 http://seesparkbox.com/
Responsive Web Design - IE

CSS3                         IE
       min-width max-width        IE7
          IE6-IE8
- Responsive Web Design



   div   html5 figure ,article   –
Frameworks

IE


                         CssGrid •
                  Lessframework •
                     Foundation •
                   Mqframework •
- Responsive Web Design

 push and pull
Client   responsive design

More Related Content

What's hot

What's hot (20)

Css responsive
Css responsiveCss responsive
Css responsive
 
Web Application Security and Modern Frameworks
Web Application Security and Modern FrameworksWeb Application Security and Modern Frameworks
Web Application Security and Modern Frameworks
 
Front-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPressFront-End Performance Optimization in WordPress
Front-End Performance Optimization in WordPress
 
Modern browsers
Modern browsersModern browsers
Modern browsers
 
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
Designing an Enterprise CSS Framework is Hard, Stephanie RewisDesigning an Enterprise CSS Framework is Hard, Stephanie Rewis
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
 
The RAW stack
The RAW stackThe RAW stack
The RAW stack
 
Structure style-story
Structure style-storyStructure style-story
Structure style-story
 
Nodejs
NodejsNodejs
Nodejs
 
Make your website 2 times faster
Make your website 2 times fasterMake your website 2 times faster
Make your website 2 times faster
 
Coding Ui
Coding UiCoding Ui
Coding Ui
 
Building High-Performance applications with .NET 5 and Vue JS 3
Building High-Performance applications with .NET 5 and Vue JS 3Building High-Performance applications with .NET 5 and Vue JS 3
Building High-Performance applications with .NET 5 and Vue JS 3
 
Jquery
JqueryJquery
Jquery
 
Website Visibility- Here is SEO Tips To Enhance Search Engine Ranking
Website Visibility- Here is SEO Tips To Enhance Search Engine RankingWebsite Visibility- Here is SEO Tips To Enhance Search Engine Ranking
Website Visibility- Here is SEO Tips To Enhance Search Engine Ranking
 
CC 2015 Single Page Applications for the ASPNET Developer
CC 2015   Single Page Applications for the ASPNET DeveloperCC 2015   Single Page Applications for the ASPNET Developer
CC 2015 Single Page Applications for the ASPNET Developer
 
How Sass Can Simplify Responsive Design
How Sass Can Simplify Responsive DesignHow Sass Can Simplify Responsive Design
How Sass Can Simplify Responsive Design
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Dictionary by phoneGap
Dictionary by phoneGapDictionary by phoneGap
Dictionary by phoneGap
 
Web technologies practical guide
Web technologies practical guideWeb technologies practical guide
Web technologies practical guide
 
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and ProgrammableThe Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
 
Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011Responsive Design - WordUp Edinburgh 2011
Responsive Design - WordUp Edinburgh 2011
 

Similar to Client responsive design

Be German About Your Frontend
Be German About Your FrontendBe German About Your Frontend
Be German About Your Frontend
Arush Sehgal
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인
Daum DNA
 
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with GrailsGR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
Zoe Gillenwater
 

Similar to Client responsive design (20)

Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Krishnakumar Rajendran (1)
Krishnakumar Rajendran (1)Krishnakumar Rajendran (1)
Krishnakumar Rajendran (1)
 
The Modern Web, Part 2: HTML5
The Modern Web, Part 2: HTML5The Modern Web, Part 2: HTML5
The Modern Web, Part 2: HTML5
 
Responsive content
Responsive contentResponsive content
Responsive content
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Be German About Your Frontend
Be German About Your FrontendBe German About Your Frontend
Be German About Your Frontend
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
RESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side ComponentsRESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side Components
 
Coding the UI
Coding the UICoding the UI
Coding the UI
 
Responsive web designing course in Chandigarh
Responsive web designing course in Chandigarh Responsive web designing course in Chandigarh
Responsive web designing course in Chandigarh
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
 
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with GrailsGR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
 
Digibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerDigibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David Walker
 
HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすもの
 
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
 

Recently uploaded

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 

Client responsive design