View
115
Download
1
Category
Preview:
Citation preview
A little about me
I’m a Branding specialist that works in the intersection between
Branding and technology
a.k.a UX Design
currently:
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
STATICADAPTATIVERESPONSIVEAWDRWD SWD
COST EFFECTIVE
CROSS PLATFORM
EASY TO UPDATE
SEO FRIENDLY
PERFORMANCE
USER FRIENDLY
<CODE>
2X
!
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.
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 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
RESPONSIVE DESIGN MODE
NETWORK MONITOR
+ialt+FirefoxDEVELOPER
TOOLBAR
DEVELOPER TOOLBAR AVAILABLE IN FIREFOX, CHROME AND SAFARI
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/
Recommended