Join Nigel French for an in-depth discussion in this video Mobile breakpoint considerations, part of Designing a Portfolio Website with Muse.
- [Instructor] So our strategy for a responsive site…has been to begin with the largest breakpoint…1,200 pixels in my case,…and then get everything right at that breakpoint.…And then see where the layout breaks down.…And for me, that was around 1,000 pixels…so that's where I added a second breakpoint.…And then a third breakpoint for the tablet.…And that's at 768, in my case.…And that did involve quite a major reconfiguration…of the content.…
As we also changed the menu type, we went from a standard…desktop menu to a hamburger menu accordion style.…And then I've added a fourth breakpoint…which is for mobile.…And I just want to point out some of the choices…that I've made there.…So when we get to this size, we really need to…simplify things as much as possible.…And we can see that with the thumbnails…formally arranged as a grid…that's not going to work, that would just make…them too small here.…
So I've arranged them as a single column stack…that the user can scroll through.…So it's all about simplifying the content…
- Starting a new portfolio website
- Making a header and footer
- Adding navigation
- Including social media icons
- Adding an autoplay slideshow
- Making thumbnail images and buttons
- Creating an About page and a Contact page
- Linking pages together
- Creating an accordion menu
- Adding breakpoints for responsiveness
- Testing and publishing a website
Skill Level Intermediate
Creating Icon Fonts for the Webwith James Williamson3h 56m Intermediate
1. Plan Your Portfolio
2. Set Up Your Site in Muse
3. Display Your Work
4. Add Pages
5. Make Your Site Responsive
6. Publish the Site
- 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.