Programming for the Web – Types of programming – Browser Comaptibility

View Github Repository Open presentation in a new window

alexandercastillo

See all presentation from alexandercastillo

Programming for the Web – Types of programming – Browser Comaptibility

0 0

intro-to-web-development

Introduction to Web Development

On Github alexandercastillo / intro-to-web-development

Intro to Web Development

By Alexander Castillo

Source Control

  • GIT
  • SVN
  • TSF
  • Others

GIT

Tracking changes with GIT

Contributing to open source

  • Fork
  • Pull Request

Browser Comaptibility

Progressive Enhancement

Graceful Degradation

What is responsive web design?

 

 

A Responsive web/app responds to its viewing environment.

Approaches

  • Adaptive Layouts [multiple fixed layouts]
  • Responsive Layouts [multiple fluid layouts]
  • Mixed approach [Fixed width for large and medium][Fluid width for small]

Why is it so important?

Past

Present

Future

?

When to use it?

  • Website or Webapp?
  • Time
  • Budget
  • Content
  • Performance
  • Browser support

The Designer’s Role

Being Technology conscious

Keeping UX & Design consistent

Leveraging Progressive Enhancement and Graceful Degradation

Using native elements

Designing based on existing technologies

jQuery Mobile
SpinJS

Using Scalable Vector Graphics as much as possible

How to think responsive?

  • Mobile First?
  • Canvas vs. Browser
  • Systems not pages

Things to consider

  • Modular
  • Proportions
  • Navigation
  • Layout
  • Grid
  • Tables
  • Media Assets

Resources

Conclusion

Questions?

Homework

Build a Login form using HTML5 and CSS3.

Codepen.io is encouraged.

Thank you.