5. Mobile First
Mobile First is the idea that web sites
should first be designed for mobile devices,
including only those tasks/items that website
visitors use most. Then as screen real estate
increases, add in tasks/features as needed
based on user priority.
http://www.digitalgov.gov/2013/09/30/mobile-first/
6. Mobile First
• For design and development, start with
the smallest size and work your way up
• Advantages:
– Focus on the content that you really need
– Faster performance for mobile
7. Mobile First Workflow
Starting with a small piece of the overall design:
1. Create sketches of the component at different
screen sizes.
8.
9. Mobile First Workflow
Starting with a small piece of the overall design:
1. Create sketches of the component at different
screen sizes.
2. Open the component in the browser at ~320px
and make it look good.
3. Make the browser wider until the component
looks bad. Use media queries to fix it.
4. Repeat step 3 until you reach the widest width.
5. Check to make sure all screen sizes still look
good in your browser.
6. Test in real devices. Fix any issues.
11. Start with the small screen first,
then expand until it looks like shit.
Time for a breakpoint!
Stephen Hay
12. Design Considerations
You may want to consider:
• Increasing base font size
• Making buttons bigger
• Providing secondary navigation
• Increasing width of desktop layout
13. Design Considerations
This is a good time to refactor:
• Inline styling
• Inline JavaScript
• Tables for layouts
• Text in images
• Replace image gradients and rounded
corners with CSS3
14. Internet Explorer 8 +
Responsive Design
• The problem:
– IE8 does not support media queries
– Only styles outside of a media query are
interpreted
– For mobile-first designs, they will get the
mobile experience
15. Internet Explorer 8
Using a fallback class
• Our solution:
– Use Modernizr to detect Media Query
support
– Add class ‘no-mqs’ to the <html> tag
– Repeat any styles that apply to desktop
using a .no-mqs wrapper
16. Internet Explorer 8
Using a fallback class
.nav-primary {
text-transform: uppercase;
}
@media (min-width: 768px) {
.nav-primary {
float: right;
clear: right;
margin-top: 9px;
}
}
.no-mqs .nav-primary {
float: right;
clear: right;
margin-top: 9px;
}
17. Sass + Breakpoint
Use Sass and the Breakpoint plugin to
quickly generate media queries and
.no-mqs fallbacks
22. Testing
Recommendations
• Use real devices as much as possible
• Test in a wide range of screen sizes
• Try portrait and landscape orientations
23. Suggested Browsers and
Devices
• IE8, 9 and 11
• Latest version of Firefox
• Latest version of Chrome
• Latest version of OSX Safari
• Safari on one iOS device
(iPhone, iPod, iPad, iPad Mini)
• Default browser on one or two Android
devices
30. Design is about making things
good (and then better) and right
(and fantastic) for the people who
use and encounter them.
Matt Beale
31. Recommended Resources
Responsive Web Design
by Ethan Marcotte
A perfect place to begin for
anyone who has never
implemented a responsive
design.
This is Responsive
by Brad Frost
Large collection of
responsive patterns and
resources.
Bootstrap
Responsive front-end
framework
Used sparingly in iMIS.
Great source of code
snippets and components.
RWD can be overwhelming
There is a plethora of devices out there
Wide range of capabilities and screen sizes
(page)
But… what does that mean? (page)
Mobile first means that when you are designing AND when you are coding, start with the smallest size and work your way up
This leads to better focus on good content
Better performance on mobile – only loads the styles it needs
Example sketches we created of the navigation controls in the Austin theme
Recommend sketching at least mobile and desktop size – middle will work itself out in the process
Try to get out of the design process fast
It’s easier to design for RWD in the browser – much more variable
Process is very straight forward if you’re starting with a mobile theme and working your way up
But also works for retrofitting a site designed for desktop (will show in demo)
Setup
Open Member Responsive with the Copy of Austin theme selected
Show that it is not responsive.
Set Responsive="True" in ThemeSettings.xml
Show that the grid are collapsing, but it's not resizing.
In masterpage-default.css, change width: 960px to max-width: 960px.
Show that it's now resizing.
Mention header – will come back to this.
Footer
Go to footer. Size down to min width of Chrome. Mention that it looks like crap.
Comment out lines 232 – 242 in masterpage--default.css. Show that the footer is now stacking.
Resize until it looks like crap (~500px?). Uncomment lines 232 – 235 & surround with media query
Mention that this means the style will be honored by browsers > 500px wide
Show in browser. Resize until it looks like crap (~768px?). Uncomment the rest of the footer layout and surround with media query.
Show in browser. Show that it looks good at all resolutions.
Header
Show that it's messy when it's small.
Hide social icons on screens < 768px wide
Uncomment lines 79 – 83 in ma 0sterpage-default.css
Mention that this query is similar to the hidden-xs, hidden-sm, etc. classes that are available out of the box.
Open Austin.skin. Remove PageNavR and PageSubNav controls and uncomment commented portion.
Mention the new MenuDisplayStyle option (Classic/Responsive)
Mention EnableEmbeddedBaseStyleSheets and class "rmNeedBaseStyles".
Toggle the responsive nav css files.
Demo in browser.
To summarize the whole process…
"Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!” – Stephen Hay
Some other design considerations you may want to consider
First 3 points – better for touch devices
Increase the size available for touch, so your users are less like to fat finger
Secondary nav – because drop-down functionality does not work on all touch devices – give your users another way to get to the secondary pages
Last point – take better advantage of large screen sizes
These things do not work well in RWD – time to refactor!
The problem:
IE8 does not support media queries
This means that for mobile-first designs, IE8 will only see the mobile version of the theme
For some people this is okay – but want to show our solution
The solution:
Several solutions available
We chose Modernizr + .no-mqs wrapper class
Repeat all styles that apply to 1024px width
Width greater than 768px => applies to desktop
Repeat styles from inside the media query, using the .no-mqs wrapper class
We recommend using Sass with the Breakpoint plugin to quickly generate fallback styles for IE8
Don’t want to spend a lot of time on this – link is provided on iC resources page
Sass
CSS preprocessor
Compiled into CSS
All CSS is valid Sass
We deliver our Sass – feel free to take a look
Breakpoint plugin:
Accepts 2 parameters:
The screen size being targeted
The fallback class name (‘no-mqs’)
Emulators are great for development and debugging, but cannot replace testing on real devices
Test as many devices as you can get your hands on
Borrow from your coworkers, friends, family – even Best Buy
IE10 is dying faster than any other version of IE, so you can probably skip it
Unfortunately, XP users cannot upgrade beyond IE8, so it is still a widely used browser
Each Android device is unique – try to test as many as possible
Chrome’s emulator function is great for quick looks and some debugging
Web Developer (extension for Chrome and FireFox)
Gives you a view of many different screen sizes on a single page
Ghostlab and Adobe Edge Inspect
Synchronized browsing
Hook up your devices to your desktop (via wifi)
Browse, scroll, etc. on all your devices simultaneously
Devices labs – open to the public – test your website on their devices for free
Find one in your area!
Responsive design is overwhelming. Take a deep breath.
Don’t panic about trying to make the website perfect in every single device, browser, situation
What’s important is giving your users the content they want
(page)
Focus instead on giving the best possible experience to the majority of your users