Web Designing Training in Chandigarh

1
Msxpert Solutions - Industrial Training
2
Msxpert- Industrial Training Institute in
Chandigarh
Manoj is a senior Developer and MD at Achieve
Internet. Over 8 years of experience doing web
development and 4 doing Drupal exclusively.
Msxpert is a leader in advanced web and Android
platform development and Industrial Training
Institute in Chandigarh We Give Training In
Website Development in Chandigarh Web Design
Training in Chandigarh SEO Training in
Chandigarh We build rock-solid digital
architecture and we do it right so you can Enjoy
Quality with Excellence. We build high-traffic
websites, platforms and apps for the most
demanding environments.
3
Agenda

• What else is new?
• Themes
• ltpicturegt
• FlexSlider
• Bgstretch
• Things you can check out later.
• Questions

• What is RWD?
• Some examples
• From scratch or theme?
• Who needs RWD?
• Why is it relevant?
• The buzzwords.

4
What is RWD?
5
Responsive Web Design
RWD is the concept of developing a website in a
way that allows the layout to adjust according to
the users screen resolution (view port) using
media queries.
6
What is RWD? And Web Designing Training in
Chandigarh
7
What is RWD?
8
http//mattkersley.com/responsive/?http//sony.com
9
What is RWD?

• If you have a laptop, and a smart phone and a
  tablet you can see what Im talking about, by
  going here
• https//developers.google.com/web/fundamentals/des
  ign-and-ui/responsive/fundamentals/?hlen
• http//www.industrialtrainingchandigarh.co.in/web-
  designing-training-in-chandigarh/

10
Simon Collison
11
Food Sense
12
Clean Air Commute Challenge
13
FlexSlider
14
The big question
Do I build all my HTML CSS JS from scratch
- OR - use a Drupal Theme?
15
The big question
16
Who needs RWD?

• You need RWD if
• Youre starting from scratch.
• You want to keep costs low
• You want it to work even when new devices are
  released

17
Why is it relevant?

• 1.8 billion internet connections in the world
  today.
• 6.8 billion people in the world today.
• 3.4 billion people with mobile devices today.
  ( roughly ½ the population of the
  planet)

18
Why is it relevant?

• Its about people, not devices
• Yes your iPhone goes to great lengths to
  facilitate browsing full sites, but technology
  should be available to everyone, even those
  without smart phones.
• The most popular devices arent necessarily the
  most used devices.

19
Why is it relevant?

• 1.3 billion mobile internet users in the world
  today.( Includes WAP and real web )
• 1/3 of the global internet users access the
  internet only via mobile

20
Why is it relevant?

• The future is now
• Babies have an easier time interacting with an
  iPad than with a magazine. To them a print
  magazine is just like a broken iPad.
• Websites are not limited to laptops only.

21
Why is it relevant?

• Its convenient
• Youre not at your desk, you are hungry. In your
  email you have a coupon to this cool new
  restaurant. You pull up your phone, click on the
  link and
• What would you expect to see? gtgt

22
Why is it relevant?

• RWD allows us to tweak the layout and present the
  relevant information first
• Hours of operation
• Phone number
• Directions
• Perhaps a link to the menu.
• Everything else can wait / save bandwidth.

23
Why is it relevant?

• Meanwhile back at your desk, the restaurants
  page has all the bells and whistles you didnt
  care for while browsing on your phone.
• Beautiful rich imagery.
• Mouth watering brain wash
• All that super important messaging from the
  marketing agency.
• The chefs profile and his awards, etc.

24
Why is it relevant?

• Avoids keyhole browsing.
• You shouldnt need a magnifying glass to access
  web content on your phone.

25
Hello Media Queries and CSS3
In its essence a media query consists of a media
type and an expression to check for certain
conditions of a particular media feature. The
most commonly used media feature is width.
26
CSS3 Media Queries
The absence of support for _at_media queries is in
fact the first _at_media query.
27
CSS3 Media Queries
In your CSS _at_media screen and (min-width 480px)
.content float left .social_icons
display none // and so on...
28
CSS3 Media Queries
On the header of your website ltlink
rel"stylesheet" href"this.css"
media"(min-width 960px)"gt
29
CSS3 Media Queries
By restricting CSS rules to a certain width of
the device displaying a web page, one can tailor
the page's representation to devices with varying
screen resolution (view port).
30
Popular Viewport Sizes

• 320 x480 px Smartphone
• 480 x 320 px Smartphone in landscape orientation
• 768 x 1024 px iPad/tablet
• 1024 x 768 px iPad in landscape
  orientation/netbook
• Anything larger Desktop/laptop computer
• Anything smaller a feature phone

31
How do we design for RWD?
Simple Use the Mobile First Approach and favor
Progressive Enhancement instead of the
traditional Graceful Degradation
32
Mobile First Approach
33
Mobile First Approach
34
Graceful Degradation

• Focuses on building the website for the most
  advanced/capable browsers.
• Older browsers are expected to have a poor, but
  passable experience.
• Small fixes may be made to accommodate a
  particular browser ( they are not the focus )

35
Progressive Enhancement

• Focuses on the content. ( not browsers )
• Think from the content out.( Peanut MM )
• Peanut Content marked up in rich semantic
  (x)html
• Coated with rich creamy CSS
• Added JS as the hard candy shell

36
Progressive Enhancement

• Progressive Enhancement consists of the following
  core principles
• Basic content and functionality should be
  accessible to all web browsers.
• Sparse, semantic markup contains all content.
• Enhanced layout ? external CSS.
• Enhanced behavior ? external JavaScript.
• End-user web browser preferences are respected.

37
Progressive Enhancement

• Benefits
• Accessibility PE pages are by nature more
  accessible.
• SEO Since basic content is always accessible.
• Performance Responsive means fast

38
So what else is new?
RWD has been around for a while, but its far
from being passé.
39
So what else is new?
Here are some of my favorite new developments in
Responsive Web Design
40
So what else is new?
Zen Zenstrap Bootstrap Zurb-Foundation Boilerpla
te Omega
41
So what else is new?
The ltpicturegt tag and therefore the Picture
module. Vs adaptive-image, ais
cs_adaptive_image, responsive_images and
resp_img, rwdimages
42
So what else is new?
The FlexSlider module Like a views_slideshow but
fully reponsive and touch enabled. It supports
the picture module, too.
43
So what else is new?

• fit_text
• fitvids
• responsive_embeds
• backstretch

44
Some you can check out later

1. HTML5 Boilerplate (http//h5bp.com)
2. Design Sketch Sheets(http//jeremypalford.com/arc
   h-journal/responsive-web-design-sketch-sheets)
3. GoldenGridSystem.com
4. Foldy960(http//github.com/davatron5000/Foldy960)
   
5. FitText (http//fittextjs.com/)

45
Homework

• http//www.w3.org/TR/css3-mediaqueries.
• https//developer.mozilla.org/en/CSS/Media_queries
  
• https//github.com/fourkitchens/train-rwd(via
  _at_FourKitchens _at_rupl)
• http//www.leveltendesign.com/blog/mark-carver/res
  ponsive-drupal-theming-done-right-way-least-now-an
  yway

46
Credits

• My first approach to RWD was at a training given
  to the folks at Msxpert Solutions
• Make sure you check out our training programs at
  Industrial Training in Chandigarh

47
Contact Us
0172-460-2200 SCF-77, Top Floor, Phase 11,
Mohali info_at_msxpertsolutions.com http//www.ind
ustrialtrainingchandigarh.co.in/