responsive design & css frameworks
TRANSCRIPT
RESPONSIVE DESIGN & CSS FRAMEWORKS
(OR HOW TO MAKE YOUR WEBSITE LOOK AMAZING ALL THE TIME)
A little about me
I’m a Branding specialist that works in the intersection between
Branding and technology
a.k.a UX Design
currently:
WHAT IS RESPONSIVE
DESIGN?
RESPONSIVE WEB DESIGN MEANS DESIGNING YOUR WEBSITE SO THAT IT RESPONDS TO YOUR USERS ENVIRONMENT BASED ON SCREEN-SIZE,
PLATFORM AND ORIENTATION.
RESPONSIVE DESIGN IS A
‘WRITE ONCE’ RUN EVERYWHERE STYLE OF DESIGNING WEBSITES.
RATHER TO BUILDING SEPARATE WEBSITES FOR EACH WEB AND MOBILE DEVICE.
RESPONSIVE DESIGN USES MEDIA QUERIES AND OTHER CSS TECHNIQUES TO CREATE A SINGLE WEBSITE THAT ADJUSTS IT’S LAYOUT AND FEATURES BASED ON HOW ITS BEING VIEWED.
KEY BENEFITS:
CONTENT FOCUSED
COST EFFECTIVE
CROSS PLATFORM
EASY TO MANAGE
SEO FRIENDLY
FUTURE PROOF?
DAY BY DAY, THE NUMBER OF DEVICES, PLATFORMS AND BROWSERS THAT NEED TO WORK WITH YOUR SITE GROWS. RESPONSIVE WEB DESIGN REPRESENTS A FUNDAMENTAL SHIFT IN HOW WE’LL
BUILD WEBSITES FOR THE DECADE TO COME- Jeffrey Veen
YESTERDAYDesktop app, poor mobile interfaces
TODAYWeb App, Mobile, Smart TVs, Game Consoles
FUTUREWEAREABLES, IOT, ARTIFICIAL INTELLIGENCE
A DIGITAL EXPERIENCE, SAME CONTENT, DIFFERENT SHAPES
A DIGITAL EXPERIENCE, SAME CONTENT, DIFFERENT SHAPES
BUT BEFORE WE START..
WHAT OTHER OPTIONS EXIST?AND WHY SHOULD WE CONSIDER THEM?
STATICADAPTATIVERESPONSIVEAWDRWD SWD
COST EFFECTIVE
CROSS PLATFORM
EASY TO UPDATE
SEO FRIENDLY
PERFORMANCE
USER FRIENDLY
<CODE>
2X
RESPONSIVENESS STARTS AT RESPONDING FAST
OPTIMIZATION IS EVERTHING
OPTIMIZATION IS EVERTHING
BLAME THE IMPLEMENTATION NOT THE TECHNIQUE.
!
USER FEEL THAT THE SYSTEM IS REACTING INSTANTANEOUSLY. !
USER START FEELING DELAY !
!
!
USER'S ATTENTION IS GONE
OPTIMIZATION IS EVERTHING
0.1 SECONDS
1.0 SECONDS
10 SECONDS
OPTIMIZATION IS EVERTHING
PERFORMANCE IS A FUNDAMENTAL COMPONENT OF THE USER EXPERIENCE
PERFORMANCE NEEDS TO MATTER BECAUSE IT MATTERS TO THE USER.
RESPONSIVE STRATEGIES
FLUID GRIDS, FLEXIBLE IMAGES, AND MEDIA QUERIES ARE THE THREE TECHNICAL INGREDIENTS
FOR RESPONSIVE WEB DESIGN, BUT IT ALSO REQUIRES A DIFFERENT WAY OF THINKING.
-ETHAN MARCOTTE
RESPONSIVE STRATEGIES
A. BREAKING POINT
B. DYNAMIC FONTS
C. FLEXIBLE GRID LAYOUT
D. CONTENT COREOGRAPHY
A. BREAKING POINT
@media screen(min-width: 320px;) { .banner{color:red;} }
RESPONSIVE SRATEGIES
A. BREAKING POINTS
/*========== Mobile First Method ==========*/!! /* Custom, iPhone Retina */ ! @media screen(min-width : 320px) {! ! }!! /* Extra Small Devices, Phones */ ! @media screen (min-width : 480px) {!! }!! /* Small Devices, Tablets */! @media screen(min-width : 768px) {!! }!! /* Medium Devices, Desktops */! @media screen (min-width : 992px) {!! }!! /* Large Devices, Wide Screens */! @media screen (min-width : 1200px) {!! }!
RESPONSIVE SRATEGIES
B. DYNAMIC FONTSRESPONSIVE SRATEGIES
em pxfont-size: 1em; font-size: 20px;
SCALE DYNAMICALLY
DOESN’T SCALE DYNAMICALLY
em pxhtml { font-size: 1em; }!!h1 { font-size: 2.074em; }!!h2 { font-size: 1.728em; }!!h3 { font-size: 1.44em; }!!h4 { font-size: 1.2em; }!!small { font-size: 0.833em; }!!.box { padding: 1.25em; }!!!!@media screen(min-width: 1400px) {! html { font-size: 1.25em; }!}
html { font-size: 16px; }!!h1 { font-size: 20px; }!!h2 { font-size: 25px; }!!h3 { font-size: 30px; }!!h4 { font-size: 35; }!!small { font-size: 45px; }!!.box { padding: 15px; }!!!:(!!!
http://pxtoem.com/
B. DYNAMIC FONTSRESPONSIVE SRATEGIES
C. FLEXIBLE GRID LAYOUT
1 2 3 4 5 6 7 8 9 10 11 12
RESPONSIVE SRATEGIES
http://getbootstrap.com/examples/grid/
C. FLEXIBLE GRID LAYOUTRESPONSIVE SRATEGIES
D. CONTENT COREOGRAPHYRESPONSIVE SRATEGIES
RESPONSIVE DESIGN TOOLS
RESPONSIVE DESIGN MODE
NETWORK MONITOR
+ialt+FirefoxDEVELOPER
TOOLBAR
DEVELOPER TOOLBAR AVAILABLE IN FIREFOX, CHROME AND SAFARI
DEVELOPER TOOLBARRESPONSIVE DESIGN MODE
+ialt+
DEVELOPER TOOLBAR NETWORK MONITOR
CSS FRAMEWORK
BOOTSTRAP FOUNDATION
OTHER OPTIONS: SKELETON, GOLDEN GRID SYSTEM, MUELLER GRID SYSTEM, ETC.
OTHER LIBRARIES
http://simplefocus.com/flowtype/http://jqueryui.com/
http://fortawesome.github.io/Font-Awesome/ http://modernizr.com/ http://fittextjs.com/
