Join Brian Thurston Bralczyk for an in-depth discussion in this video What are adaptive views?, part of UX Design Tools: Axure.
In this last chapter of the course we're going to look at how to setup and use adaptive views in Axure. If you've been in the design industry for even a few months, you've almost certainly heard about responsive or adaptive web design. This is the really very nice idea that your website should be accessible on any device regardless of screen size. But to accomplish that goal, you'll need to design a site that resizes its layout and rearranges content as the browser window gets smaller or larger. So here we're looking at our Samoca homepage and it should be looking pretty familiar by now.
But if I make the width of my browser narrower to roughly the size of a tablet. You'll see that it snaps to a new layout. And if I make it really narrow, it snaps to a size that would work better on mobile. The key in all my layouts is that all the important pieces are still there. They're just presented in a way that makes them more accessible on whatever device the user is choosing to view your website on. When Axure released the latest version seven, the tool that allows you to create adaptive new designs was the most anticipated new feature and Axure really didn't disappoint with this one.
The new adaptive views tool set is great. While it doesn't allow us to create fully responsive designs, where the content would resize in real time and you resized the screen. It does give us the ability to create adaptive web designs, which snap to new layouts as they reach certain widths. It's arguably one of the most powerful features in the application now. And I know I've already been using it with really great results in my own projects. Axure allows you to set up several of what they call adaptive views. And if you're familiar with HTML and CSS, these are the same as what developers refer to as break points.
Basically, these are just vertical width markers that denote the edge of particular screen widths and cause the layout to snap to the next size arrangement. Once you've set up these width marks, you can then take your content and lay it out differently at each size. I think as we walk through this process step by step, you're going to begin to see how it works a lot better. So, let's get started now.
AuthorBrian Thurston Bralczyk
- Using and styling widgets
- Setting up interactions
- Creating hide/show options for content
- Creating an accordion menu
- Applying web fonts
- Using flow widgets
- Creating and placing masters
- Styling pages
- Adding form fields with widgets
- Building a slideshow with dynamic panels
- Setting up adaptive views
Skill Level Intermediate
Foundations of UX: Prototypingwith James Williamson1h 39m Beginner
1. Getting Started
2. Shape and Text Widgets
3. Adding Interactivity
4. Generating and Sharing Prototypes
5. Web Fonts
Setting up web fonts4m 7s
6. Flows and Sitemaps
8. Page Options
9. Form Widgets
10. Dynamic Panels
11. Adaptive Web Design
Next steps1m 12s
- 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.Cancel
Take 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.