Join Nigel French for an in-depth discussion in this video Start a new site, part of Designing a Portfolio Website with Muse.
- [Instructor] Alright, let's create our site in Muse. File, New Site. We're going to make a big decision here, the size of our page width, or our Maximum Page Width. There's no such thing as an optimum page width. Before responsive design became popular web designers would choose the page width according to what were the popular screen sizes of the moment and using this approach you could be sure that most of your site's visitors would see the site as you intended, but in recent years screens have got bigger and at the same time, they've got smaller.
So there are now so many popular screen sizes, so many standards that we just can't accommodate them all. So what we're going to do is create a responsive site with a Fluid Width page. Let me just pop over to my finished site here and I'll show you how this is responsive. As I reduce the size if my browser width we can see the content reconfiguring. Now in order to do this we need to have several breakpoints, but I want to take the approach of getting things right in our first breakpoint before we start working with multiple breakpoints, because that really is a recipe for a lot of confusion.
So we're going to get one right and then we're going to roll out that design and reconfigure it as necessary for the other breakpoints. So the 64,000 dollar question, what page width am I going to use? Well, I'm designing this for a desktop and I'm going to use a common desktop resolution or base it upon a common desktop resolution of 1440 by 900. So I'm going to set my page width at 1200, that's going to mean I'm going to have some space either side.
My other decisions here are far less critical, but I'm going to have 12 columns, because working with a column grid is going to suggest layout possibilities when I'm working in the first instance at this breakpoint, and also help me out when I need to reconfigure content on the additional breakpoints. My Minimum page Width I'll leave at 320. I'm going to set my Minimum Height to the seemingly arbitrary figure of 811.
This isn't a critical decision. As we add content the height of our page will grow or contract, but I'm starting out with this number because if my screen height is going to be 900 my viewport, my usable area, by the time I've removed the interface elements, is 811 more or less, because that number will vary according to what browser elements you have visible. But we have to choose one number and that's the one I'm going with.
I'm going to have a Margin of 20. And in my case I'm going to change my Language dictionary to English UK. And I want Sticky Footer checked, so that my footer is fixed to the bottom of the page. Let's just take a look at what the Home page looks like. There we see our 12 columns. On our breakpoint ruler we see our Fluid Breakpoint. We have the header as indicated by this guide. I'll need to scroll down to see the footer.
Now I said the viewport was 811, but to record this video I'm having to work at a smaller size, and that size is 768, but on a typical production machine I would be working at a much higher resolution. In choosing a Fluid Breakpoint we have denied ourself the use of Scroll Effects. If I click on the Scroll Effects panel we see this message.
So currently, and this is all subject to change of course, but currently at time of recording you cannot combine Scroll Effects, at least not without adding third-party widgets with a Fluid Width Breakpoint. If you want to see some examples of Scroll Effects scrolleffects.com has some interesting examples with the settings used to create them. And you can also download the necessary resources file to experiment with these elements yourself.
I should mention that it is possible to combine Fluid and Fixed Width Breakpoints in the same site, but I think that is over complicating things for our purpose. As I mentioned earlier, our portfolio is about our work, it's not about bells and whistles. There's one other quick chore that I'd like to take care of here, it's not critical that it happen at this stage, but since it's an option that resides in the Site Properties dialog box it seems to make sense to do it now.
So Site Properties, come to the Content tab, and I want to add a FavIcon. And the FavIcon is this icon to the left of the page name. This needs to be a 32 pixel square PNG file. So here I am in Illustrator and I have my vector artwork here in Illustrator. Its size doesn't matter, all that matters is that it's square. So I'm now going to come to the File menu and choose Export, Save for Web (Legacy), and I'll change the dimensions here to 32, it's going to be a PNG-8, and then I'll Save that.
Now I've already saved it, so to load it I'll just come and click on the folder, navigate to the file, and there it is. And while we're here I'm just going to uncheck the Convert Opaque PNG to JPEG, and that's because if I've saved a file as a PNG I've done so intentionally, I don't want Muse making that conversion for me. So there we are, one big decision and a couple of minor decisions, but we now have our website in progress and we're ready for the next step, which is to create our color palette.
- 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