# How to check what an Evolve course looks like on mobile/tablet

**URL:** <https://community.evolveauthoring.com/t/how-to-check-what-an-evolve-course-looks-like-on-mobile-tablet/258>\
**Category:** General Help\
**Tags:** design, responsive, developer-tools\
**Created:** [October 5, 2018, 11:30am UTC](https://community.evolveauthoring.com/t/how-to-check-what-an-evolve-course-looks-like-on-mobile-tablet/258 "2018-10-05T11:30:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![appitierre](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/appitierre/32/10_2.png) [@appitierre](https://community.evolveauthoring.com/u/appitierre)\
**Post date:** [October 5, 2018, 11:30am UTC](https://community.evolveauthoring.com/t/how-to-check-what-an-evolve-course-looks-like-on-mobile-tablet/258/1 "2018-10-05T11:30:56Z")

</div>

As many of you will know already all published courses in Evolve are responsive by default.

That means that based on the device your learner accesses the course on the course will automatically adapt and flow the course into the available space with no intervention needed from the user or course author. See links at the end of this article for more information on responsive design in general.

More traditional authoring tools usually require a number of alterations to the course before it is able to display correctly on tablets and mobile devices. Evolve’s published courses use standard web technologies (HTML5, CSS and Javascript) to deliver the content and just work. You do, of course, have the option to use theming to change the default look and feel and tailor it according to device size but that’s for another day.

If you’d like to get a good general idea of how your Evolve course will look then you have a couple of options available;

### Preview using Developer tools and look like a tech wizard.

- Build your course
- Run Live Preview

#### In Chrome:

- Open Developer tools in your browser. In Chrome you do this by going to **View \> Developer \> Developer tools** Don’t be alarmed if it all looks a little technical. Most of what you’re seeing is available to web developers who want to be able to test, alter and explore the software they’re developing. It’s a way of ‘looking under the hood’ at what’s going on. What we’re interested in most is the little icon at the top of the tool bar.

![39](https://canada1.discourse-cdn.com/flex031/uploads/evolveauthoring/original/1X/fe5fa9af89173af18b4baa7743d802b9b68e4f14.jpeg)

- Toggling this icon will switch your browser into an emulation mode. Effectively the browser will display your course as if it were on the device you select.
- There’s a list of devices above the course. Clicking the arrow will show you this list. Select one and you’re course will now be displayed _as if it were on the actual device_. Cool? Probably not. Useful? Definitely.

### Resize the browser window

- Run Live Preview
- Switch to the course that’s opened in a new tab
- Using the your mouse click and hold on one corner of your browser window and resize it. You’ll notice that the content rescales automatically.

### Additional resources and useful links

[https://responsivewebdesign.com/](https://responsivewebdesign.com/)

> **[The Many Faces of 'Mobile First'](http://bradfrost.com/blog/post/the-many-faces-of-mobile-first/)**
>
> We see the phrase 'mobile first' everywhere. Luke Wroblewski definitely struck a nerve when he coined the phrase a few years ago and created an important battle cry as we head into this multi-screen future. Luke's definition of mobile first consists...

  
[https://www.lukew.com/ff/entry.asp?1436](https://www.lukew.com/ff/entry.asp?1436)  

> **[Responsive Web Design (RWD) and User Experience](https://www.nngroup.com/articles/responsive-web-design-definition/)**
>
> Responsive design teams create a single site to support many devices, but need to consider content, design and performance across devices to ensure usability.

---

<div class="post-metadata">

**Author:** ![appitierre](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/appitierre/32/10_2.png) [@appitierre](https://community.evolveauthoring.com/u/appitierre)\
**Post date:** [October 8, 2018, 7:09am UTC](https://community.evolveauthoring.com/t/how-to-check-what-an-evolve-course-looks-like-on-mobile-tablet/258/2 "2018-10-08T07:09:57Z")

</div>

A post was merged into an existing topic: [How to request an enhancement to Evolve](https://community.evolveauthoring.com/t/how-to-request-an-enhancement-to-evolve/17/69)
