A hands-on introduction to Responsive Web Design presented by Mario Hernandez at Socal CodeCamp 2012, San Diego .Net User Group 2013, San Diego SoCal CodeCamp 2013 at UCSD & SoCal CodeCamp 2013 at USC, Online Webinars throughout 2014.
3. Agenda
Session One:
SEO
Best practices, How does it relate to RWD
HTML
Introduction to HTML5 and CSS3
Progressive Enhancement and Graceful Degradation
CanIUse.com
Fonts
Pixels vs. EMs
Problems with EMs
Converting Pixels to EMs
4. Agenda
Session One:
Grid Systems
What are grids and how they apply to web design
Fixed vs Fluid vs. Responsive grids
Manipulating grids in web design (rows, columns, offsets,
source order, etc)
Media Queries
What are they?
What role do they play in responsive design?
Working with Breakpoints
12. What search engines are looking for
Content
Performance
Authority
User Experience
Source: http://searchenginewatch.com/article/2259693/SEO-Basics-8-Essentials-When-Optimizing-Your-Site
19. IT’S NOT ONE BIG THING
How can I start using HTML5 if browsers don’t support it?
20. IT’S NOT ONE BIG THING
How can I start using HTML5 if browsers don’t support it?
You can’t detect HTML5
support but you can detect
support for individual features
(video, canvas or geolocation)
21. You don’t need to throw anything away
If your web application worked
yesterday in HTML 4, it will still
work today in HTML5. Period.
HTML5 allows you to improve your
website
23. GRACEFUL DEGRADATION
Graceful Degradation is a widely used
term which ideology is basically using
the latest technologies first, and then fix
anything that needs fixing for older
browsers.
25. DOM
The Document Object Model (DOM) is a cross-
platform and language-independent convention
for representing and interacting with objects in
HTML, XHTML and XML documents.
27. DOCTYPE
A Document Type Declaration, or doctype for
short, has traditionally been used to specify
which particular flavor of markup a document is
written in.
Source: Book: HTML5 For Web Designers by Jeremy Keith
28. DOCTYPE
The doctype for HTML 4.01 looks like this (line
wraps marked »):
<!DOCTYPE HTML PUBLIC »
"-//W3C//DTD HTML 4.01//EN" »
"http://www.w3.org/TR/html4/strict.dtd">
Source: Book: HTML5 For Web Designers by Jeremy Keith
29. DOCTYPE
Here’s the doctype for XHTML 1.0:
<!DOCTYPE html PUBLIC »
"-//W3C//DTD XHTML 1.0 Strict //EN" »
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
Source: Book: HTML5 For Web Designers by Jeremy Keith
31. What is RWD?
Responsive Web Design is the approach to
design that allows websites to adapt to ideally fit
with screens of different shapes and sizes to
provide an optimal viewing experience.
Source: 3seven9.com
http://www.alistapart.com/articles/responsive-web-design/
43. Fonts - EMs
Base font size is based on M
1em = Browser default body font size = 16px
1em = 100% the default body font size
44. Fonts - EMs
Base font size is based on M
1em = Browser default body font size = 16px
1em = 100% the default body font size
2em = 32px
45. Fonts - EMs
Base font size is based on M
1em = Browser default body font size = 16px
1em = 100% the default body font size
2em = 32px
EMs can be used for anything: width, height,
margin, padding, etc.
47. Fonts - EMs
Problems with EMs
The cascade/compounding problem, em's are
relative to font size of parent
48. Fonts - EMs
Problems with EMs
The cascade/compounding problem, em's are
relative to font size of parent
li {font-size: 1.5em;} = 24px;
A list in a list is not 24px it's a 32px
50. Fonts - REMs
REMs like EMs, but based on root HTML
element size
Supported by all modern browsers
CodePen Demo
51. Fonts - REMs
REMs like EMs, but based on root HTML
element size
Supported by all modern browsers
Need to specify fallback for IE 8 and below
h1{font-size: 16px;font-size: 1rem;}
http://caniuse.com/#search=rem
57. Media Queries
Media Queries is a CSS3 module allowing to
adapt the rendering of web pages based on
conditions such as screen resolution. It was first
drafted in 2001 by the W3C and became a
recommended standard in June 2012. It is a
cornerstone technology to RWD.
59. Common Breakpoints
Label Layout Width
Smartphones 480px and below
Portrait Tablets 480px to 768px
Landscape Tablets 768px to 940px
Desktops 940px and up
Large Screen 1210px and up
71. Addressing Issues
● Internet Explorer and HTML5 elements
● Internet Explorer and Media Queries
● Proactively implementing fallbacks
72. What’s next?
● Versioning control
● Putting your site up on github
● Accessing your website on the web
● Additional resources (review relevant
resources and information)
Search engines want to do their jobs as best as possible by referring users to websites and content that is the most relevant to what the user is looking for. So how is relevancy determined?
Is determined by the theme that is being given, the text on the page, and the titles and descriptions that are given.
How fast is your site and does it work properly?
First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
\n
\n
First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
\n
First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\n
Regardless of what approach you take, you should always consider &#x201C;Mobile First&#x201D;.\n\nCoined by Luke Wroblewski. He wrote a book with this title and highly recommend it.\n\n\nStarting with mobile first forces you to prioritize what&#x2019;s important.\n\nThis is our approach. Every time a new application or even single functionality is introduce to our team. We always ask ourselves, How is this going to work on a mobile device?\n
This is the challenge. Never before has the work of Web Designers been so hard and complicated.\n\nHow do you design for for all these devices?\nDo you have the staff and resources to develop for all of these devices? Do you have the budget?\n\nDo you do native apps or web apps? There isn&#x2019;t a one approach solution.\n
You evaluate. You no longer have the luxury of all the real-estate you want. YOu are forced to prioritized and think of content in a more practical manner.\n\nIf you properly think about serving your content the best way possible on a smart phone, graduating to a tablet, notebook or desktop will be that much easier because you are already addressing what&#x2019;s important up-front.\n\nAt first this seems backwards but if you really think about it. The less space you have to work with the better use you&#x2019;ll attempt to make of every pixel available. This is not the case if you start with the desktop because you have all the space in the world.\n
\n
Introduce Neil and tell the audience how he was able to incorporate what we have done on Drupal into .Net\n
Introduce Neil and tell the audience how he was able to incorporate what we have done on Drupal into .Net\n