2. Responsive Web Done Responsibly
4/17/ :49 PM
Responsive Web Done Responsibly
Lou van der Bijl
@synstalker
Senior Business Applications Consultant
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3. What is Responsive Design?
4/17/ :49 PM
What is Responsive Design?
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. Why Responsive is important?
4/17/ :49 PM
Why Responsive is important?
[The web] should be accessible by anyone, from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.
Tim Berners-Lee
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. 4/17/ :49 PM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6. “Find your balance between form, function and your user.”
4/17/ :49 PM
“Find your balance between form, function and your user.”
“Fit-to-size” ignores the actual content that is being presented in that layout
Follow John Maeda’s Law of Simplicity and thoughtful reduction
Mobile first means focus on the context.
Image by macrovector
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

7. Just because you can doesn’t mean you should
4/17/ :49 PM
Just because you can doesn’t mean you should
Simplify with the rule of 3
Scripts, Fonts, Renditions, Clicks
Remove unused scripts and CSS
Preload when you can
“Does it actual need a script”?
Jump to anchors are just HTML
Focus in on functionality
Build for the point without the fluff
kcgreendotcom.com
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

8. It has been built, use it HTML5 and CSS3 HTML Image renditions
4/17/ :49 PM
It has been built, use it
HTML5 and CSS3
HTML Image renditions
Bootstrap, Office Fabric
Use the right platform for the job
Minify *everything*
Load times and usability are the gateways to a happy user.
Image by rawpixel.com
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9. Get Real Use real content
4/17/ :49 PM
Get Real
Use real content
Get real users to test on actual devices on all connections
Web renders only get it right 90%
“If it exists, it needs a test case”
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

10. Join Us Keep Building Keep Learning Keep Pushing Boundaries
4/17/ :49 PM
Join Us
Keep Building
Keep Learning
Keep Pushing Boundaries
Join the Microsoft Developer User Group in Cape Town, Johannesburg and Durban
Xamarin, .NET and .NET Core, ASP .NET and ASP .NET Core, Visual Studio and Visual Studio Code, Visual Studio Team Services, Visual Studio App Center and Azure.
awpixel.com
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11. 4/17/ :49 PM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.