Join Paul Trani for an in-depth discussion in this video Planning and designing a website, part of Dreamweaver CC 2015: Creating a First Website.
- Now it's easy to get excited, and you'll want to dive right in to creating a website, when really you need to take a moment and start planning out your website from a couple different angles. Quite frankly, you need to keep in mind the business requirements, the user requirements, technical specifications, and design requirements. And starting with the business requirements, well, it's like what are you trying to do, what's the goal of your site? Is it to sell something? Is it to show off your work? Is it just for fun? You need to define that up front, you'd be surprised how many people don't do this.
And from there, we wanna keep the user in mind, honestly the whole way through. What are they trying to do? Well, can they access the site? Is that the first thing they can do, if they type in say, Paul's Design Shop in Google, are they gonna get my site? Okay, so is it accessible, is it uploaded correctly, all that fun stuff. Does it meet the audience's needs? So when they go there, is it the content that they expect. Okay, and we just need to be true to the site, true to our content, and the end user will be happy as well.
And is it easy to use? So all in all, it's fun making cool graphics, and cool navigation, but is the navigation easy to use? Is it easy to also use on a mobile device? And that brings us to technical requirements. And this comes down to it being browser and device compatible. Is it gonna work across different browsers? And across different devices, from tablet, to mobile, to desktop? Is it formatted correctly for those different devices? It's a big thing.
And is it optimized for these search engines? As they type in Paul's Design Shop, is it going to come up? And not only that, does the content download fast? Okay, so it's easy to just work on your desktop and make a beautiful site, but this is where testing comes into play. And this really does bring us to our design requirements. Is the design appropriate for the content? If you're selling some fun items, let's make sure it's a fun site. If you're trying to be really straight-laced, let's make sure that design reflects that, everything clear down to the type that you use.
Does it fit on the user's screen, from desktop, to mobile, to tablet? Okay, we wanna keep it simple, and clean. We wanna make sure the navigation is easy to learn. And really the best thing to do here is just hand it to a friend, on an informal level, and just see how they experience the site and the content. And make sure that the text and links are legible, and you can differentiate between the two, it's easy to tell what's text and what are links. You do all these things, keep all these things in mind, and I have no doubt you'll make a successful site.
Just like this example you see here, you get clear notification of where you are, Paul's Design Shop. You can see okay, it's designed well, quite simple and easy to read. I can see the links versus the text. I have a nice hierarchy of elements. It fits on a screen just fine, which is gonna be 1280 by 800, okay. Don't worry, content can be longer, but the important content is within the first 800 pixels, okay and that's for desktop, and then also we have mobile.
We wanna make sure this content fits fine just on mobile and that content is easy to read.
Over the course of the training, you'll learn about building basic webpages; adding text, links, images, and navigation; and making your layout "flexible" on mobile devices. Each step provides another lesson on HTML and CSS, the building blocks of the web. Along the way, Paul shows how to add bonus features, such as animation from Edge Animate, a Twitter feed, and an interactive contact form.
- Planning a website
- Creating your first webpage
- Adding HTML5 content
- Styling content and the layout with CSS
- Adding images
- Creating navigation
- Building alternate layouts for tablets and mobile devices
- Adding animation and video
- Creating a contact form
- Uploading and testing the website