responsive web design - the future of web designing
TRANSCRIPT
![Page 1: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/1.jpg)
Responsive Web Designing - A Future of Web
Designing
![Page 2: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/2.jpg)
Responsive Web Designing or RWD
RWD is a web design approach geared toward crafting sites to supply Associate in Nursing best viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a good vary of devices (from mobile phones to PC monitors)
Also known as Adaptive Web Designing (AWD).
![Page 3: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/3.jpg)
Trend of Growing Demand for Smartphones
Multiple Screen Sizes and Mobile Browsers
Due to more Increase in Usage of Internet
Compulsory for Getting Good Business
Why there is Need of Responsive Website?
![Page 4: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/4.jpg)
![Page 5: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/5.jpg)
![Page 6: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/6.jpg)
Important Guidelines
•Resizing images to fit the screen resolution
•Hiding non-essential elements especially for smaller screen
•Do not use web technologies that don’t work on mobile
•Make sure that website get loaded properly in seconds
•Optimize your page for vertical scrolling
![Page 7: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/7.jpg)
Responsive website designing is a modern approach of website designing. It comprises of four core elements.
1. Meta Tags
2.CSS3 Media Queries
3. Grid Systems
4. Frameworks
Major Components of A Responsive Website
![Page 8: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/8.jpg)
What are Meta Tags?
Meta tag is a coding statement in HTML.
Information provided in the meta tags is used by the search engines for page indexation.
Placed at the top of a web page as a part of heading.
![Page 9: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/9.jpg)
Types of Meta Tags
There are three different meta tags that work for old, new, and modern hand held devices like mobiles (all types) and tablets.
Example: Put these 3 lines in the head section of your site.
<meta name=”HandheldFriendly” content=”true” /> <meta name=”MobileOptimized” content=”320” /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0” />
A responsive designer needs to add these meta tags to make a website mobile optimized.
![Page 10: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/10.jpg)
What are CSS3 Media
Queries ?CSS3 Media Queries consists of a media type and zero or an optional expression to assign different style-sheets depending on browser window size using media features such as width, height, orientation, resolution, pixel aspect ration, and color etc.
Using CSS3 media queries, presentations can be tailored to a specific range of output devices without changing the content itself.
You can use media queries in different ways for different reasons.
![Page 11: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/11.jpg)
Frameworks of RWD
Frameworks can be defined as a set of tools, libraries, conventions and best practices that enable the designers to cut down their routine tasks into reusable generic modules.
CSS3 frameworks provide following benefits:1. Faster designing and building of creative websites.2. Designers can focus on crucial segments of website like- grid, browser compliance, creation of multiple layouts,etc.
![Page 12: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/12.jpg)
Some Common Frameworks
Following are the popular frameworks that web designers and developers used to develop responsive websites:
Skeleton
Foundation
Bootstrap
![Page 13: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/13.jpg)
Advantages to the Web Designers
Increases Return on Investment in long run.
Improved SEO rank
Better performance means better sales
Higher conversion rates
Key to create competitive advantage over the competitors
Increasing market share
![Page 14: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/14.jpg)
![Page 15: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/15.jpg)
Contact Us Address: 315 Atlantis, Opp. Vadodara Central
Mall,Nr. Genda Circle, Sarabhai Road, Vadodara 390 023. Gujarat, India
Email id: [email protected] Call : (+91) 8140088860
![Page 17: Responsive web design - The Future of WEB DESIGNING](https://reader035.vdocuments.site/reader035/viewer/2022062317/542dbc2c8d7f72e2408b7f3c/html5/thumbnails/17.jpg)
Thanks!