Responsive web development using media query and bootstrap

  • Published on
    20-Jan-2017

  • View
    58

  • Download
    0

Embed Size (px)

Transcript

iFour ConsultancyResponsive with Media Query and Bootstrap

Software Outsourcing Company India - http://www.ifourtechnolab.com/1

Introduction to Responsive DesignMedia QueriesResponsive Web DesigningBenefits of Responsive DesignMedia Query Syntax : InternalMedia Query Syntax : ExternalIntroduction to BootstrapAdvantages of BootstrapExamples

INDEX

What is Responsive Design?An Approach to web design that provides an optimal viewing experience across a wide range of devicesA responsive website or email has a layout that changes configuration based on what size screen it is viewed on

C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/3

What is Responsive Design?4

Creating a catalog of Multi-Device Layout patternsC# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/4

Why should you care about media queries?Media queries will allow us to change our layouts to suit the exact need of different devices without changing the content.For example, we will be able to move away from One-size-fits-all solutions such as liquid, elastic and fixed width layouts

5C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/5

Responsive Web Designing or RWDProcess of designing a single website to be used and compatible on different portable or handy electronic devices.Also known as Adaptive Web Designing (AWD)Integrated approach of designing through which compelling and easy to use websites are built, to give an optimal viewing user experience across a wide variety of devices starting from desktop computers to mobile phones.

6C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/6

Benefits of Responsive DesignSmooth navigationEasy readingMinimum pinchingReduces scrolling and zoomingExcellent user experience

7C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/7

Why You Need A Responsive Website?Growing demand for smart phonesMultiple screen sizes and mobile browsersWide usage of InternetPermits wider browser supportCompulsory for getting good business

8C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/8

Adapting the Appropriate Layout Designers should use appropriate layout to suit completely different screen sizes.

9DevicesSizePhones480px and belowPhones to Tablets 767px and belowPortrait Tablets768px and AboveNote book990px to 1024pxMonitor1024px and above

C# Software Development Companies Indiahttp://www.ifourtechnolab.com/ http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/9

Media Query Syntax : Internal10Body { background : gray;}@media screen and (max-width : 500px) { body {background : blue; }}C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/10

Extend the existing media part of the link element or @import rule :

Media Query Syntax : External

@import url (narrow.css) only screen and (max-width: 500px);C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/11

Wide screen media query/* All the other styles up here */

Small screen media query

Media Queries@media screen and (min-width : 1200px) { /* styles for larger screens in here */}@media screen and (max-width: 760px) { /* styles for smaller screens in here */}C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/12

Wide screen media query/* All the other styles up here */

Small screen media query

Media Queries@media screen and (min-width : 1200px) { /* styles for larger screens in here */}@media screen and (max-width: 760px) { /* styles for smaller screens in here */}C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/13

What is BootstrapPowerful front-end framework for faster and easier web developmentIncludes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions.It gives you ability to create responsive layout with much less efforts14C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/14

Advantages of BootstrapThe biggest advantage is that it comes with free set of tools for creating flexible and responsive web layouts as well as common interface components.Here are some more advantages, why one should opt for Bootstrap:Save lots of timeResponsive featuresOpen SourceConsistent designEasy to useCompatible with browsers

15C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/15

ExampleAdd the following HTML code to index.html which will create a blank HTML web page with the required bootstrap CSS files and the bootstrap JavaScript plug-ins with jQuery.

16

C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/16

Example17Bootstrap header and responsive navigation barCreate a responsive navigation bar as part of this responsive template. Add the following HTML code within the tags in index.html.

TUTORIAL

  • Home

C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/17

ExampleCreating a bootstrap responsive footer

18

Footer section 1 Content for the first footer section. Footer section 2 Content for the second footer section.

C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/18

http://www.w3schools.com/css/css_rwd_intro.asp http://www.w3schools.com/html/html_responsive.asp http://www.w3schools.com/bootstrap/

ReferencesC# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/19

Questions?C# Software Development Companies India http://www.ifourtechnolab.com/

Software Outsourcing Company India - http://www.ifourtechnolab.com/20

Recommended

View more >