O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Overview : Responsive Web Design
Pankaj Bajaj
Agenda
• Background
• Overview
• Tools
• Major Components
• Benefits
Continuous learning is the minimum requirement for su...
Background
Continuous learning is the minimum requirement for success in any field.
Early Days
Today
Overview
Continuous learning is the minimum requirement for success in any field.
 Responsive design is a web design and ...
Tools
Continuous learning is the minimum requirement for success in any field.
Bracket Text Editor (You can
use any Editor...
Major Components
Continuous learning is the minimum requirement for success in any field.
 Media Queries.
 Flex grid/ Fl...
Media Queries
Media queries allow designers to build multiple layouts using the same HTML documents by
selectively serving...
Flexible grid is another feature of CSS3 which is used for Responsive web Design. Flexible grid
has following features whi...
Benefits
 Good User Experience: As the same application will use for all devices so that the user
will have consistent lo...
Próximos SlideShares
Carregando em…5
×
Próximos SlideShares
Clean Code
Avançar
Transfira para ler offline e ver em ecrã inteiro.

2

Compartilhar

Baixar para ler offline

Overview of Responsive Web Design

Baixar para ler offline

Overview of Responsive Web Design

Audiolivros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo

Overview of Responsive Web Design

  1. 1. Overview : Responsive Web Design Pankaj Bajaj
  2. 2. Agenda • Background • Overview • Tools • Major Components • Benefits Continuous learning is the minimum requirement for success in any field.
  3. 3. Background Continuous learning is the minimum requirement for success in any field. Early Days Today
  4. 4. Overview Continuous learning is the minimum requirement for success in any field.  Responsive design is a web design and development technique that creates a site or system that reacts to the size of a user’s screen.  It optimizes a user’s browsing experience by creating a flexible and responsive web page for the device that is accessing it.  The website have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
  5. 5. Tools Continuous learning is the minimum requirement for success in any field. Bracket Text Editor (You can use any Editor, Notepad+, Sublime
  6. 6. Major Components Continuous learning is the minimum requirement for success in any field.  Media Queries.  Flex grid/ Fluid Grid  Flexible images and media
  7. 7. Media Queries Media queries allow designers to build multiple layouts using the same HTML documents by selectively serving style sheets based on the user agent’s features such as the browser window’s size, Orientation ,Screen Resolution, Color. Continuous learning is the minimum requirement for success in any field.
  8. 8. Flexible grid is another feature of CSS3 which is used for Responsive web Design. Flexible grid has following features which help to make Responsive Design.  Have any number of columns: There is no fixed number of columns across a whole page. It can be change as per the need.  Scales to any width: Because it uses percentages or Relative unit (em), fluid columns will fit into any width. The margins (gutters) use percentages too.  Put the content first: Instead of fitting content to grid, it makes grid to suit your content. Continuous learning is the minimum requirement for success in any field. FlexibleFluid Grid
  9. 9. Benefits  Good User Experience: As the same application will use for all devices so that the user will have consistent look and feel.  Cost Effective: Earlier there are different applications for desktop and mobile which is very costly and difficult to manage. With Responsive Web design there is only single application for all kind of devices which is cheaper and easily  Improved SEO: responsive web design helps in optimize website for search engines. Instead of building links or optimizing content for multiple websites, we need to market a single responsive website only and the URL structure will remain the same on all devices, which improves search engine visibility and rankings.  Easily implementation: RWD can easily implement in your existing website which should be written with compliant HTML and CSS.  Additional benefits: There are many more device properties that you can access with media queries besides the screen width. These include: orientation mode, aspect ratio, colors, resolution, etc. Continuous learning is the minimum requirement for success in any field.
  • VineetKumar159

    Oct. 13, 2015
  • PankajBajaj7

    Oct. 12, 2015

Overview of Responsive Web Design

Vistos

Vistos totais

396

No Slideshare

0

De incorporações

0

Número de incorporações

46

Ações

Baixados

2

Compartilhados

0

Comentários

0

Curtir

2

×