Join James Williamson for an in-depth discussion in this video Providing fallbacks, part of Applied Responsive Design.
Throughout this series of exercises, we relied on jQuery to help us provide the functionality…we want for our menu across multiple screen sizes and capabilities.…But we've been ignoring one very important question, what happens if JavaScript isn't available?…And to prove that point I have our index. htm file here from the 03_13 folder opened in…a browser and I've disabled JavaScript.…Now a Desktop size, doesn't really matter, we've got a nice, HTML, CSS, driven dropdown…menu, doesn't rely on JavaScript at all.…
Nice clean works; no big deal.…However, let's go down to the mobile size.…At the mobile screen size or the small screen size, JavaScript being disabled, absolutely,…totally disrupts the experience.…The menu is hidden by default and relies on JavaScript to show it.…So, in this case that is not workable at all, same can be said if I go to tablet, we're…still okay, because we have our nice drop down HTML, CSS menu, but at the mobile screen…size that is going to be a bit of an issue.…
So, one of the things you really need to think about when you're planning any type of really…
Author
Released
3/7/2013- Creating mockups
- Structuring page regions
- Defining default styles and media queries
- Building desktop, tablet, and mobile layouts
- Structuring and styling menus
- Dynamically replacing menus
- Creating a responsive image gallery
- Adding phone functionality
- Testing responsive sites
Skill Level Intermediate
Duration
Views
Related Courses
-
Interaction Design Foundations
with David Hogue3h 19m Beginner -
Responsive Design Workflows
with Justin Putney1h 20m Beginner
-
Introduction
-
Welcome1m 2s
-
Using the exercise files1m 59s
-
-
1. Planning Responsive Designs
-
Content planning11m 21s
-
Creating mockups10m 38s
-
Planning responsive UX7m 24s
-
Structuring page regions6m 46s
-
-
2. Building Responsive Layouts
-
Controlling the viewport4m 59s
-
Defining default styles11m 18s
-
Defining media queries7m 41s
-
Refining desktop layouts10m 25s
-
Refining tablet layouts9m 59s
-
Refining mobile layouts7m 49s
-
-
3. Responsive Navigation
-
Structuring basic menus7m 7s
-
Styling basic menus10m 29s
-
Using CSS sprites in menus7m 53s
-
Structuring complex menus9m 42s
-
Preventing conflicts5m 28s
-
Providing fallbacks5m 5s
-
Dynamically replacing menus5m 39s
-
4. Creating Responsive Media
-
Creating fluid images11m 10s
-
Making video fluid6m 47s
-
Using CSS in place of images9m 52s
-
Image gallery overview3m 8s
-
Controlling gallery styling11m 43s
-
-
5. Enhancing Sites for Mobile
-
HTML5 form inputs4m 30s
-
Adding phone functionality6m 16s
-
Adding home screen icons5m 38s
-
-
6. Managing Resources
-
Loading resources with Modernizr10m 10s
-
Conditional resource loading8m 56s
-
Testing responsive sites3m 42s
-
Conclusion
-
Additional resources4m 10s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Providing fallbacks