Evaluating a Web Design
So the first thing we'll do is create a project which will be the root folder of our project. And a lot of web developers and designers will use the term root. Root just means it's the project that houses everything else that's part of our project. So on my desktop here, I'm just gonna create a new folder, and I'll just call this my first web page. Once I have that created I will move this over to the right a little bit. Let's go back into our project files. Let's open up the starter files. And in here we have three files. There's an index.html file, and then we have two style sheets in here. We have a style underscore print, and a style underscore screen. We're going to be putting all of our print styles into a separate CSS file, 'cause it'll be a lot easier when we're building our project to switch between print and web, or print and screen, rather, when we're creating our project. So I'm gonna select all three of these files and copy and paste them or if your on the Mac you can opti...
on drag them into the my first web page folder. So now let's come in here and let's take index.html and let's open this up in our text editor. So inside of our project we have our beginning HTML tag. Everything that we do in an HTML file starts in an HTML tag. Inside of the HTML element we have a heading element. This consists of our metadata. The metadata first for the character set, which is the type of code we're gonna be placing into this document. Most of the time you're gonna use UTF eight. This will support things like using M dashes and accented characters, anything that goes beyond the ASCII character set. And then down here, the view port, this is where we set the initial scale and the device width. And again you can use this HTML project for any web project that you're working on. So you don't have to type all of this each time. But basically what this does is it sets the device width and the initial scale, and by setting this we're basically telling the browser no matter what the device you're on, we wanna set a one-to-one ratio of the HTML to the screen. This way when we write responsive design queries later, using CSS media queries, it will be able to gauge itself based on this initial scale. So if we write a CSS rule for screens under 600 pixels, for example, this is the tag in the HTML that will tell the browser, pay attention to the width so we can make those changes later. Finally our title this is the title of the document. This is used by search engines to catalog your site, along with a few other things that we'll be talking about. As well as this will become the text for the bookmark. So you wanna make sure that this is very descriptive for the content on the page. And then inside the body, this is the presentation area. This is everything that we see in the browser, and this is where we're gonna be focusing most of our day today. So with that we have our HTML file open, we're ready to start writing some HTML, but the first thing that I do before I start writing the HTML is to evaluate our design and figure out what are we going to need in our library of HTML elements in order to structure our content. So if we can switch back over to our slides, we'll take a look at the strategy for our design. So we'll start by looking at the final design. At the point when we get to, or the time we get to the point where we are going to start writing our HTML, the assumption here is that we've already gone through the design phase. We actually built this design in our other course on sketch. And we assume, assumably have client approval, so this is the design that the client likes and everybody's approved it. So now to begin building this we need to evaluate what's going on here. So if we start looking at the different sections we start to sort of draw little boxes or areas of what we need for our HTML. So what we'll typically do is look at all of these different pieces here and assign some HTML labels or elements to some of these sections. So we'll need a header, and that will encompass everything that we're gonna have up in the top are here, for the header. We're gonna have a navigation piece that's actually gonna be outside of the header but we're gonna position it over top so we'll get to use some positioning properties in CSS. And then we're gonna have two sections. One section where we define the content. Another section where we defined different choices, so these are more promotional type areas. And then we're gonna have a main section here, which is going to be the main sort of article or information of the site. And then we'll have the footer information down here. So again, we'll just sort of use this as our guide for all the different pieces that we're going to need. There's another behavioral part of this site and that is the content that we have in the page, we never want the content to get wider than a certain amount. So if it got more than around 1200 pixels, it'd be hard to read. Especially some of the sentences here that would go the full width. So the other behavioral change we're gonna have here is we're going to set this up so that regardless of the width of the browser, we'll have some elements like the header and the choices section and the footer, go the full width, but the interior pieces, the internal spots here that contain the content are only gonna go to a certain width. And so what we're gonna do is we're going to add a div element, which stands for division, inside of each one of our main containers. And we're going to lock the width of the content there. That's gonna give us a desired behavior when we're looking at the final project. And that will give us the ability to keep readability but also keep the design, fill in the entire browser and giving us that experience of having the design really sort of fill the space that we're working with. Yes?
Is there any best practices for the width of a web site? The container of it anyways?
What happens after your web design comp is approved? How do you create the web graphics from Photoshop, Illustrator, or Sketch? How is design translated to HTML and CSS?
This course will walk you through the process of evaluating, planning, and creating a web page from a design comp. We’ll explore strategies for setting up your HTML, slicing and saving web graphics, and applying CSS rules that will re-create your design vision in a browser.
When we’re finished, we’ll have a working web page that will respond to varying screen sizes, as well as paper. Choose to follow along with the video, with the provided project files, or simply evaluate the final project as you watch the instructor.
What you’ll learn:
- How to evaluate aspects of a design for conversion
- How to structure the HTML
- To make decisions how the graphics should be created
- What graphical formats you should use
- How to add fonts and style text in CSS
- Using CSS for layout
- Incorporating graphics with HTML and CSS
- Using media queries for screens and paper
Software Used: Panic Coda 2017