Brief

Reflect on your learning about mobile web design. Using the tutorials shared in the previous step, create at least one alternate layout for your site. Take a screenshot of your site-in-progress or a photograph of your mobile wireframes to share it to give others a better understanding of your plans.

Reflection

The assignment this week required us to create an “alternative layout” for our sites. To begin with I started creating a mobile layout for the Juvo site I am currently redeveloping for this course.

However, on the day we had our live class, Adobe made a huge change to how you approach creating webpage design for different layouts. Muse now adopts the responsive design approach as opposed to the fixed width approach in earlier versions.

The basics of this new approach were demoed in the live class, plus Adobe create an excellent, and really enticing tutorial video: https://helpx.adobe.com/muse/how-to/create-responsive-website.html?set=muse–get-started I just had to give it a go.

Now I’m used to responsive design. I’ve been designing sites this way for years (although not so much recently), but I was interested to see how Muse visualised this approach and how it handled the continuity between content and breakpoints.

Initially I was confused because I tried to design for certain resolutions, which was the way you planned and visualised it using this approach. However, whilst reacquainting myself with responsive design and after watching that video (above) 3 or 4 times, it quickly became apparent I was looking at it the wrong way around!

Instead of worrying about where to place your breakpoints in relation to the ridiculously diverse array of screen sizes currently out there, you look at your design and add a breakpoint when your design “breaks”. This was a revelation and although that was the way the industry has been looking at it for a few years, its only when I used Muse’s interface to visualise when and where the design breaks did I really see how useful this approach is.

After some playing about with the scaling and pinning options, I decided to start updating my original pages to the new fluid width as part of Muse’s responsive design update. I have to say that coming from a coding implementation to a visual one was very different (and sometimes not as intuitive as I had imagined), but for a beginner coming to this approach, I think Adobe had nailed this with their update to Muse.

If you wish to the site in action and have a play: http://s584403783.websitehome.co.uk/staging/try resizing the browser 🙂

I updated the home and contact pages, while left the other blanks for future assignments or for when I have time to populate them. If you don’t wish to visit the site above take a peek at the attached image below as it shows the site at all breakpoints as well describes how I managed the appraoch for each breakpoint.

Once I had understood the way Muse implemented responsive features, I really enjoyed making my web pages look good across all sizes of screen!