Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
It goes without saying, but before you start writing the code for your new theme, it's important to have a design in place. That way, you have something to refer to as you're creating the working version of your theme. When creating the design for your theme, I want you to keep three things in mind. Number one, design for all screen sizes with a primary focus on mobile. Number 2, design with the main content in focus. And number 3, create an overall style for your design and don't lock yourself down to very rigid pixel-perfect designs.
Because, the web is not pixel perfect and you have no control over how people view your content. So your design needs to accommodate all the different ways people can consume your content. The easiest way to achieve this is by starting with the smallest screen possible, like I did for this theme. Start with a vertical smartphone layout and figure out how to layout the important components of your site on a smartphone. Imagine someone scrolling through the content from the top to the bottom.
And make sure that your content is structured in such a way that they find what they are looking for right away and don't have to do a lot of up and down scrolling to get where they wanted to go. Once you've designed your site for a smartphone, it's much easier to expand out to accommodate bigger screens. Now you can start designing for a tablet layout, or maybe a full desktop layout. Now that you have more space, you also have room to move in content that was not available on your smartphone screen. That might mean adding larger images, and a sidebar on the right-hand side if you want to.
Or it could mean shifting content out from the main content grid to leave more focus on the main content itself. And when we speak about larger screens, you also have to consider very large screens, because more and more people have high resolution displays and also very large screens and some are even surfing the web on TVs now. That means, you have to consider what happens when someone opens your site on one of these screens, and make sure that the content isn't either shifted to the left, so that they have to turn their heads to read the content, or that the sidebar ends up floating loose in the middle.
So in the design I created for the site, the content always stays in the middle. When there's room, some of the content will shift out like this pull quote, both to the left and to the right hand side, and the sidebar will stick to the right hand side of the screen. So as you expand the view on your screen you'll see the sidebar sticking to the right at all times. All of this is accomplished using responsive web design techniques. If you want to learn more about responsive web design you should check out the Responsive Web Design Fundamentals course in the lynda.com library.
When you are in the design process for your theme, it's very easy to become focused on pixel-perfect design, and it is vitally important that you don't fall into this trap. Because like I said, the Web is not pixel-perfect, and if you create a pixel-perfect design where everything has to fit exactly, you'll have a very hard time getting that to work on the web. And then when you start expanding into other browsers, you'll be frustrated. A much better approach to design is to design for conceptual elements.
That way, when you create an overall design for your site, be that a single post like we have here or an index page like we have here, you know what the overall look of the site is going to be. And that way, when you encounter content you didn't consider in the design process, you'll have a design language that you can follow to make sure that that content flows naturally into your overall design for your site. One clever trick to help you along is to decide on a specific content width you want to stick to, design on specific fonts you want to use, and also design on any icon font libraries you want to use throughout the site.
That way, when you encounter new content, you know what font you're going to use, how wide it's going to be, and if there are icons that need to be put in place, you know where to get them. For the theme we'll be working with in this course, I've created the three basics designs you see here. One for the mobile screen, this is the one I've started with. One for a single post template. And one for an index page. Throughout the course I'll refer to these designs. And I'll also show you how to use them to make decisions on things I did not consider in the design process.
You'll see me doing a lot of the design for the site in the browser and this is exactly what you should be doing too. General design concepts can be done in Photoshop, but the real design work should always happen, with the real content in the browser.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.