Creating an Adaptive and Responsive Layout in Axure
In this tutorial we'll learn how to use Axure's features to create a layout for web that is responsive and adaptive to different screen sizes on mobile devices. Software required: Axure RP Pro 7.0.
What you'll learn
In this tutorial we'll learn how to use Axure's features to create a layout for web that is responsive and adaptive to different screen sizes on mobile devices. We’ll learn how to create breakpoints, a responsive background, customize content to different screens and create a mobile prototype with a slide menu. Software required: Axure RP Pro 7.0.
Table of contents
- Setting up Our Project 4m
- Setting up the Framework 7m
- Setting up the Header and Footer 8m
- Creating a Responsive Background 5m
- Adding Content to the Framework 9m
- Adding External Content to the Framework 10m
- Creating the First State of the Slide Menu for Mobile 6m
- Creating the Second State of the Slide Menu for Mobile 8m
- Setting up the Prototype for Publishing 10m
- Previewing the Prototype on Desktop and Mobile Devices 5m
About the author
Antonia Anni is a freelance User Experience Consultant coaching individuals and startups on the importance of UX. Originally from Nigeria, she now lives and works in London, UK. Privileged to have worked on design projects for Ladbrokes, BBC, Audi, Gamesys, Mars inc., and Percy Hedley Foundation, she seeks to pass knowledge on by tutoring and mentoring. Some things she enjoys are blogging, drawing, video-gaming, debates, music, and books. Sometimes she publishes her thoughts on Medium. Antonia ... more