Industrial Training in Chandigarh | Web Designing industrial training

1. Msxpert Solutions - Industrial Training

2. Msxpert-Industrial Training Institute in Chandigarh Manoj is a senior Developer and MD at Achieve Internet. Over 8years 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 • <picture> • 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 user’s 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. If you have a laptop, and a smart phone and a tablet you can see what I’m talking about, by going here: • https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en • http://www.industrialtrainingchandigarh.co.in/web-designing-training-in-chandigarh/ What is RWD?

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: • You’re 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? • It’s 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 aren’t 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? • It’s convenient: • You’re 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? >>

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 restaurant’s page has all the bells and whistles you didn’t care for while browsing on your phone. • Beautiful rich imagery. • Mouth watering brain wash • All that super important messaging from the marketing agency. • The chef’s profile and his awards, etc.

24. Why is it relevant? • Avoids keyhole browsing. • You shouldn’t 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 @media queries is in fact the first @media query.

27. CSS3 & Media Queries In your CSS: @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: <link rel="stylesheet" href="this.css" media="(min-width: 960px)">

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 traditionalGraceful 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 M&M ) • 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 it’s 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 Boilerplate Omega

41. So… what else is new? The <picture> tag and therefore the Picture module. Vs: adaptive-image, aiscs_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 HTML5 Boilerplate (http://h5bp.com) Design Sketch Sheets(http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets) GoldenGridSystem.com Foldy960(http://github.com/davatron5000/Foldy960) 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 @FourKitchens’ @rupl) • http://www.leveltendesign.com/blog/mark-carver/responsive-drupal-theming-done-right-way-least-now-anyway

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@msxpertsolutions.com http://www.industrialtrainingchandigarh.co.in/