Creating a Print Version of Your Website

Once upon a time, a user searches for “how to care for roses” in Google and stumbles upon your website. They see that your website contains a lot of valuable information, and they want to print off your page so that they can refer to it later when they’re gardening. So they hit the print button and go to their printer to collect the page… only to see that the page is weirdly formatted, runs off the page, and wasted a LOT of their printer ink. Needless to say, they’re a bit disappointed.

This problem could’ve been avoided if you had a print version of your website. This means optimizing your website so that when the user tries to print your page directly from the web browser they’ll have something they can actually use. In order to accomplish this, you’ll have to create some CSS styles that alter your webpages’ design only when the user hits print. Once you’ve created this optimized stylesheet (we’ll call it “print.css”), you’ll link to this stylesheet under your main stylesheet. This link would look something like this:

<link rel=”stylesheet” media=”print” scrc=”print.css” />

As you can see, the media is set to “print”; this tells the browser to only implement this stylesheet when the user tries to print, and no other time.

Now that we know how to link to this stylesheet properly, here are some tips to follow to create a stylesheet that formats your webpage properly for printing:

  1. Remove All Background Images/Colors: The quickest way to eat up all of the visitor’s printer ink is to leave in your background colors and images, and believe me, you DON’T want to do that to them. In your stylesheet you should override any “background-image” or “background-color” style with either “none” or “white”.
  2. Remove Color in General: In fact, you should try to avoid using any color altogether. Colored ink is much more costly than black ink, and so you should try to be mindful of that. Set all your elements to black or white, and maybe gray if you need some variation to maintain your design. Even if your logo is in color, you should have a black and white version that is print-ready.
  3. Remove Unnecessary Content: The reason that a visitor is printing off your webpage is that they want the important content that contains the information they were seeking, and that should be all you give them. Cut out any and all unnecessary elements such as your primary and secondary navigation, search box, social media icons, advertisements, etc. However, don’t go on a cutting frenzy and cut everything BUT the content; some elements you might want to keep or add in addition to your main content might be things like your website’s logo or a URL to the page they printed off so they can find you again.
  4. Readjust Font Sizes: More than likely you’re going to need to increase the “font-size” for your printed page. Your visiting gardening enthusiast may want to be able to read the page while their hands are full of dirt, and so having your content at an increased size is very helpful.
  5. Insert Page Breaks: One thing you might notice is that when you print off your web page, your content may break in weird places onto the next page. To avoid this problem add page breaks within your content by targeting them with the “page-break-before” or “page-break-after” properties in your CSS stylesheet. For example, if you want the page to break to a new page when reaching a new section of the page, you could add a style such as “page-break-before: always” that will tell the browser to always insert a page break right before this element.

Sources: [ Make Your Website Printable with CSS ], [ Make Your Site Printer-Friendly With CSS ], [ Optimizing Your Website Structure for Print Using CSS ]

Advertisements

Effectively Titling Your Website

Title tags (<title>My Website</title> for example) are a HTML element that defines the title of a specific page of your website. These titles appear in the “title bar” of your web browser (for this website it’s “PixelSheffield – Home” or “PixelSheffield – Effectively Titling Your Website” depending on which page you’re viewing this article on!) and are also visible when you view your website in a search engine results page. Since users first interaction with your website is very likely what they see on this search engine results page, it’s vital that you title your webpages effectively.

Here are some things to keep in mind when you’re titling your web pages:

  1. Make Sure EVERY Page Has a Title: The worst mistake you could make is to forget to even give your webpage a title at all! This may be difficult to ensure on a very large website with hundreds and hundreds of pages, but it’s vital that each page has one. If your page doesn’t have a title it won’t show up correctly in search engines (if at all), which will definitely result in a loss of potential visitors. Also make sure that each page has a different title and it isn’t using a default one provided by a WYSIWYG program.
  2. Utilize Relevant Keywords: If your website sells jewelry, you should definitely include jewelry-related keywords somewhere in your title tag. This could include relevant keywords like rings, necklaces, or even just jewelry! Having relevant keywords in your title will help users find you when searching for specific keywords, and the more people that can find you the higher your website will climb in the rankings. However, avoid keyword stuffing—most search engines can pick up on this and actually rank you lower.
  3. Be Accurately Descriptive: Your title tag should be descriptive of the page it’s representing. It makes no sense to title your page “Diamond Rings” if the page is all about sapphire necklaces. Make sure all title descriptions are accurate, while avoiding overly generic or verbose wording.
  4. Use the Optimal Length: If your webpage’s title is too long, search engines will actually truncate the title so that it fits on their results page. For Google the ideal title is between 50 – 60 characters long, and you should aim to for about this length. However, you should not sacrifice a good, descriptive title for the sake of squeezing under this character length.
  5. Don’t Forget to Include Your Brand: You should always include your brand name in the title tag somewhere; after all, you want to keep reminding visitors whose site they’re on! However, there is some debate as to where within the title tag you should include your brand name. A good rule of thumb is if your business is very well-known and the presence of that name can influence users to click the link to your website in the search results, put your brand name at the beginning of your title. Otherwise, add it onto the end.

Sources: [ Title Tag – Learn SEO – Moz ], [ Review Your Page Titles and Snippets ]

Hover Navigation: Yay or Nay?

You may have noticed that many websites utilizing a hover navigation system—this is when you “hover” over a navigation link with your mouse and this will usually result in some sort of animated transition or a drop-down list of subcategory links to appear. The question is: “Does using a hover-based navigation system do more harm than good?”

You’ll find that this a pretty divisive topic; some designers will swear that hover navigation is terrible and it’s use is on the decline, while others will defend its usefulness in high-content websites. Here are the pros and cons I see for using hover navigation in your website:

Pros

  • Hover navigation menus with drop-down subcategory links creates better website organization. Sometimes it’s very hard to narrow down the number of links in your main navigation, but you don’t want to have fifty links all vying for a spot at the top of your website. A great way to handle this is to have your main links on display while your subcategory links are hidden, discoverable with the user hover over the main category links. This allows you to keep all the links that you want, but display them in a more digestible and organized manner.
  • Another way to handle the organization issue is to have your main navigation link to a page with a list of your subcategory links. The drawback of this approach is that users are forced to load a new page, and this may increase time spent trying to find information in a not very positive way. Utilizing hover navigation reduces the amount of clicks a user has to do, allowing for quicker navigation to desired content.

Cons

  • It’s very easy to accidentally hover over your navigation, resulting in users opening up drop-down menus that may cover your content. This can surprise or disorient your visitor, confused as to why this navigation suddenly opened when they were trying to do something else.
  • Using hover navigation can force users into what is sometimes called a “hover tunnel”; this is the issue that is created when a user must navigate through a small space in order to reach a desired link. Accidentally moving away from the hover navigation can close up the drop-down menu, causing users to lose what they were looking for and having to repeat the process over again. Some drop-down menus are so small and tight that this is a very real issue, making clicking on a link a chore.
  • While hover navigation works well for desktop computers, it is nearly impossible to use for mobile devices. Tablets and smartphones rely on user touches and gestures; they don’t recognize “hovering”. Therefore, you’re forced to design an entirely new navigation for these mobile devices, which may mean you need to rework how you categorize your links.

So what do you think, which one is better? The best way to decide if hover navigation is right for your website is to test your website with real users before launching. When your website contains a large amount of information you may find that hover navigation is more beneficial, but never implement it at the cost of user satisfaction.

Sources: [ Why Hover Menus Do Users More Harm Than Good ], [ Hover is Dead, Long Live Hover ]

Basic Tips to Improve Your Website

Just by looking at a website’s home page you can tell if it was designed by an amateur or a professional. If you’re one of those that have a very amateur-looking website it’s hard to know where to start improving your design. You want a website that is clean, organized, optimized, and represents your brand.

While everyone has a different design process, here are some tips to help you get started in the right direction:

  1. Create Branding: Professional does not mean generic; while it’s true that some amateurish websites may have a bit too much personality, you certainly don’t want to lose your company’s identity. Create a sense of branding by having a unifying color scheme consistent throughout your website, complemented by a professional logo that represents your business visible on each page. You should also have this logo link back to your home page; not only is this expected by users, but it forces users to pay attention to your logo, helping to increase memorability.
  2. Invest in Professional Photos: Low-quality photographs can make your website look amateurish, so it’s best to try to find a professional photos for your website. While you may be tempted to take photos yourself in order to be cost-efficient, if you’re not a professional photography then it’s almost worse than having no photos at all. Either hire a professional photographer to take photos for you or try purchasing some stock photos from one of the many stock photography websites out there. If you invest in your website that investment will shine through, and visitors will read that as you caring about you business and product or service.
  3. Organize Your Navigation: There is nothing more frustrating for a user than not being able to find the information they’re searching for. When a website has confusing, unorganized, or hard-to-find navigation a visitor is almost guaranteed to hit the back button rather than waste anymore of their valuable time trying to figure out your problem. It’s best to provide clear navigation at the top of your page (this is where most users expect to find the navigation, so I don’t recommend straying from this pattern) that has no more than 7 or so main category links. If you have more sections than that, it’s best to have these as a secondary navigation lower down on the page or nested within a drop-down menu in the main navigation.
  4. Optimize Your Content: Another sign of a low-quality website is one where the information is cluttered, illegible, and out-of-date. Keep your content fresh by updating it at least once a week (once a month at the absolute minimum); not only does this encourage users to keep visiting your website for new information, but it also helps your website in search engine rankings. Be sure to use an adequate amount of whitespace and keep content concise and full of relevant information and keywords so that it’s easier for users to scan for the  information they want.
  5. Think About Responsive Design: Websites are not limited to your desktop computer anymore. So many users now own smartphones and almost all of these devices are used to look up quick information on the web. You’re possibly missing out on a large segment of your potential market if you don’t create a mobile-friendly version of your website. While mobile-friendly versions are not necessary for EVERY business, it’s worth looking into to see if it’s right for your company.

Sources: [ 5 Tips for Improving Your Web Designs ], [ 13 Simple Tips for Improving Your Web Design ]

Speeding Up Your Website

When you create a website the hope is that many users will visit your website and stay for a while, perhaps resulting in some sort of conversion like a product purchase or a newsletter sign-up. However, if your website doesn’t load quickly there’s a great chance that your visitors will immediately give up and hit the back button. In today’s technologically-advanced society users are expecting quick delivery of information and if your website doesn’t load within a couple of seconds you’re potentially losing sales. Studies from Amazon confirm this, reporting that a simple 100 millisecond improvement in speed increased their revenue by 1%.

With this information in mind, here are some simple tips to improve the speed of your website:

  1. Minimize HTTP Requests: With each piece that your website has to download (stylesheets, javascript, images, etc.) the more HTTP requests you have to make. Multiple HTTP requests result in longer render times, and so the best solution is to streamline all your content. Keep all your CSS styles in one stylesheet, reduce the amount of javascript your page uses and keep it at the bottom of the page (which allows for all your important HTML content to load first), and use CSS instead of images whenever you can.
  2. Enable Browser Caching: When someone visits your website, the elements of your webpage are stored temporarily on your hard drive in a process known as caching. Caching allows users to come back to your website without having to re-download those page elements, creating a much speedier experience. While this doesn’t speed up your user’s initial visit, it will certainly speed up any subsequent visits they may make to your site.
  3. Optimize Images: The easiest way to optimize images is to make sure your images are a reasonable size in the correct format. One of the quickest ways to have an unnecessarily large file size is to save a picture at 2000px by 2000px size when you’re only using it for a 500px by 500px space. Cut down on the file size by already exporting the image as the smaller pixel size. You can also make sure that your file is saved in the correct format; while the PNG format is my personal favorite it also exports at the largest file size, and so you’re better off sticking with the GIF format for small, flat graphics and the JPG format for your photographs.
  4. Optimize Stylesheets: There are two ways that you can implement CSS onto your website: 1) externally, through an external stylesheet dedicated to CSS code, or 2) internally, using inline CSS that is intermingled with your HTML code. Out of these two options, the best option is to use external stylesheets; it reduces the size of your code and you’ll avoid accidentally duplicating your code, especially if you keep all your CSS code in one stylesheet file.
  5. Reduce Redirects: There are at least three ways a redirect can occur: 1) you direct URL to a new, updated location, 2) you direct users to a mobile version of your website when on a mobile device, and 3) you leave off the trailing slash on directory-pointed links. Having too many redirects can greatly increase your website’s loading speed, so keep these redirects to an absolute minimum.

So is your website fast enough? You can get started by testing your website on WebSiteOptimization, which will give you a report on potential problems while giving you recommendations on what areas to improve on.

Sources: [ 10 Ways to Speed Up Your Website ], [ Speedy Web Pages – Tips for Fast Downloads ]

Floats vs. Column-Count

If your website contains a heavy amount of information, chances are that you’d benefit from having a multi-column design. You’ll be able to fit all of your information in sizable chunks without having the user scroll endlessly. Question is, how do you employ a multi-column design?

There are two ways to accomplish this: 1) you can use multiple tags and float them next to each other; or 2) you can use CSS3 column-count styling to set the number of columns you want for a certain block of text. Let’s examine the pros and cons of each.

Float Styling

Pros: Float styling has been around for a while, and so this particular style has a lot of browser support (even Internet Explorer 4.0+ supports it!), so you can be rest assured that anything you style with floats will work on almost everyone’s browser.

Cons: Floats—when it comes to creating multiple columns for text—are rather impractical. If your content doesn’t change often it’s not too bad, but if you know you’re going to be changing around your text a lot floated <div>s will quickly become a hassle to deal with. Adding or subtracting text can make your columns look weirdly uneven, and so you might have to go back and update your spacing so that it doesn’t break your design.

Column-Count Styling

Pros: One <div> tag styled with column-count is MUCH easier to maintain than multiple <div> tags styled with floats. This style automatically adjusts your content to fit into the multiple columns so adding or subtracting content is no problem.

Cons: This is still a relatively new style (just introduced with CSS3) and so there is not a whole lot of browser support for it. If your target audience includes those who don’t necessarily keep up with the latest browsers, chances are that column-count will not work in their browser, leaving your text as one huge block instead of your pretty multiple columns.


 

Conclusion: Which solution works best for you will most likely depend on who your target audience is. If you’re designing a website for an audience who are tech-saavy and like to use the latest and greatest technology, you’ll probably be safe using column-count styling for your content. However, if you’re designing a website for an audience that don’t use technology often (such as people 60 and older) or don’t have access to technology (such as people with low income), you want to avoid doing anything too fancy that is not supported by older browsers.

Simple CSS3 Transitions

If any of you have take a look at my portfolio lately, you may have noticed something new. If you haven’t noticed something new, or just haven’t looked at all, I encourage you to take a look at the portfolio page now. When you hover over one of the portfolio pieces do you see how the work title fades into a different background and font color? This was made possible with the help of CSS3 transitions.

You can do TONS of things with CSS3 transitions: you can change colors, heights, widths, position, shape, opacity, and more! If used effectively (don’t oversaturate your website with them) you can make your website more dynamic, interactive, and memorable.

Here’s a simple step-by-step tutorial on how I added CSS3 transitions to my portfolio to create a simple fade effect, but it’s easy to change these attributes to fit what you need for your own project.

  1. First, have your HTML elements set up: You can’t do any transitions if there’s nothing to transition! This is the setup I have for my code:

    <div class=”portfolio”>
    <a href=”#”><img src=”image.jpg” /><span class=”workTitle”>Work Title</span></a>
    </div>


    In case you can’t tell what’s going on, here’s the run down. I have an image (<img>) and a span tag (<span>) with the class of “workTitle” that present my portfolio piece thumbnail and my portfolio piece title. These two elements are encompassed within an anchor tag (<a>) which links the visitor to that portfolio piece’s individual page. All of this is finally encompassed within a div tag (<div>) that has the class of “portfolio”.

    Note: If you don’t know what these tags are, or what classes are, I highly recommend looking up some HTML tutorials before you continue.

     

  2. Style your HTML elements: There needs to be a starting point for our HTML elements; they need to have some basic styling that will serve as their “default” state. Since we’ll be changing our work title’s background and font colors, this <span> tag MUST have these styles already set. We’re going to set the background color to aqua and the font color to a dark gray:

    .workTitle {
    background: rgb(116, 204, 209);
    color: rgb(51, 51, 51);
    }


     

  3. Add your hover styles: We want the work title to change colors when the user hovers over the portfolio piece. This is a little bit tricky, because we want one element to change (the <span class=”workTitle”> tag) when we hover over another element (the <div class=”portfolio”> tag). Normally when you create hover-based transitions you’re changing the specific element you’re hovering over—in this example that would mean we change the <span> tag when hovering over the <span> tag specifically—but in this case that would mean the visitor HAS to hover over the work title for it to change. We want to be able to have the work title change colors even when the user is hovering over the image as well. Therefore we must target the <div class=”portfolio”> tag. In order to do that, here is the code we’ll be using:

    .portfolio:hover .workTitle {
    background: rgb(38, 38, 38);
    color: #FFF;
    }


    Basically we’re telling the browser that when the user hovers over the tag with the class of “portfolio” (our <div> tag), we want the background color and font color to change to these colors for the tag with the class of “workTitle” (our <span> tag).

     

  4. Add your transition: Now comes the fun part, adding your transition! The transition will be affecting our work title, so we must add the CSS3 style to the <span> tag with the class of “workTitle”:

    .workTitle {
    background: rgb(116, 204, 209);
    color: rgb(51, 51, 51);
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    }


    So what are we looking at? In order to make a transition we must call the transition property. The syntax of this property is as follows: style property > duration > timing. In this example, I am targeting the background property and I want it to change over 0.3 seconds with a timing of ease-in-out (this means it will have a slow start and slow end, speeding up in the middle). You can change these attributes to whatever makes sense for your project. You can change the duration to last for 120 seconds (I wouldn’t recommend it though) or you could change the timing to ease, linear, ease-in, ease-out, etc.

And you’re done! You now have a beautiful transition that will make your website more visually interesting. You can change most any step in this tutorial to make it work for your website, but be careful: do NOT overuse transitions! Using transitions sparingly is much more effective than using it everywhere you possibly can.

Responsive Web Design

It was much easier to design websites back in the day where the only thing you had to view your website was your computer. There was only one screen size available, and so there was only one screen size that you had to consider when developing your design.

That’s no longer the case. Nowadays the number of screen sizes are growing exponentially as more and more devices get released. You now have to consider a wide range of devices: smartphones, tablets, phablets, desktop computers, televisions, and much more. In order to optimize your content for all of these devices, you must employ responsive design on your website. Responsive Web Design (or RWD) is the process of designing and developing websites that are able to react to user behavior and adapt to changing mediums (screen size, platform, orientation, etc.). Using RWD is important because it allows you to deliver web pages of variable sizes to ALL of these devices without having to create a new website for each and every screen size, which would just be tedious and awful.

responsive design

You can type in “responsive web design” into a search engine and pull up thousands of resources that go in depth about RWD concepts. Here are some of those basic concepts:

  1. Set the Viewport: The first thing you should do is throw this into your <head> section of your website…<meta name =”viewport” content=”width=device-width, initial-scale=1.0″>What does this do exactly? The meta viewport tag modifies the virtual viewport of the device, which in turn changes the behavior of the browser. The width=device-width matches the width of virtual viewport of the device to the physical width of the device, and the initial-scale=1 controls the zoom level when the page is first loaded. In short, this will make your content resize appropriately on every device.
  2. Do not use fixed units of measurement: Back in the day you could design a website down to the last pixel, having a fixed width and height for every element. However, pixel units are not RWD-friendly. Avoid pixels and stick with relative units like percentages (%) or ems. These relative units will adjust based on the screen size you’re using to view the content; for example, a <div> box with a width of 70% will ALWAYS have a width of 70% no matter if the screen size is 1000px wide or 500px wide. Percentages are best used for boxes that wrap content and images, while ems are best used for font sizes.
  3. Use CSS Media Queries: Using fluid units of measurement will certainly help you create a responsive design, but it will only get you so far. There will be several points where your design “breaks” (called breakpoints) and you’ll likely have to change some of your CSS styling to fix these breaks. However, in order to have these fixes only affect your design when the design actually breaks, you’ll have to utilize CSS media queries. These media queries will query your device to find out information such as browser or devices width or height, resolution, orientation, and much more. Based on the characteristics they query, they will target that characteristics and only have style changes take effect when the conditions are met. For example, say you want the background to change from black to white once the screen size gets smaller than 500px. This would be the code you’d put in your stylesheet:@media screen and (max-width: 500px) {
    body {background-color: white;}
    }
  4. Mobile first?: You may here the term progressive enhancement used when designers talk about RWD. Progressive enhancement is the idea that if you start designing a website at a mobile size and work towards a desktop size, you will ensure that your website will look good across all screen sizes. Designing for mobile devices certainly has more restrictions than designing for a desktop computer, and it’s much easier to add content rather than subtract from it. However, I personally do not think it’s a necessity to design starting with mobile first, and actually I always design my responsive websites starting with desktop sizes and going towards mobile devices. I think it comes down to a matter of preference; if you’re more comfortable with adding content then start with mobile, if you’re more comfortable subtracting content then start with desktop. Despite this, I agree that progressive enhancement is probably the best practice.

There are some things to consider before deciding if RWD is right for your website. The biggest item you should consider is whether your content is appropriate for small screen sizes. If your target audience never uses smartphones to look up your content, it would be a waste of time and money to design for mobile devices. Sometimes you may find that it might be better to create a web app for mobile devices completely separate from your website. While responsive design is something that is becoming more and more necessary as new devices get released, do take the time to consider if it’s right for your website.

Sources: [ Responsive Web Design Basics – Web Fundamentals ], [ Responsive Web Design – A List Apart ], [ Responsive Web Design: What It Is and How to Use It ]

Designing for Mobile Devices

Before we have a discussion about responsive design (which we will have very soon), I thought it might be a good idea to first examine what it takes to have good web design for mobile devices. When dealing with mobile design, it’s a constant battle to fit all of your content on a very small screen. Here are a few tips that will help you figure out how to present all your information while keeping user frustrations to a minimum.

  1. Simplify and optimize core content: With a desktop website, you can put in as much information as you’d like without problem (well, don’t put in TOO much). With mobile devices, the screen size is much smaller, and so you need to be choosy with your content. Only present the most vital information in small, scannable chunks and cut out the rest. Doing this will benefit your website in several ways: 1) you reduce the amount of scrolling a user has to do; 2) you decrease the loading time for your website; 3) relevant information is much easier to find; and 4) you have more available space so you can increase font size, reducing user eye strain.
  2. One-column designs: When viewing websites on a desktop computer, it’s very likely that you’ve seen many designs that use multiple columns. This makes viewing information easy, but on a mobile device this multi-column design will only make your text extremely tiny and difficult to read. You want to reduce your design to one column only, that way your images and content can utilize all the available space possible.
  3. Make buttons/links BIG: It’s easy to click on tiny links on a desktop; you have a tiny little arrow that you can move with precision with your mouse or trackpad. On a mobile device it’s very unlikely the you have this kind of accuracy so you must accommodate. Make buttons big and text links long, as this will give users more area to hit with their fingers.
  4. Consider hiding navigation: While you could have a large, button-style navigation at the top of your page, another space-saving option would be to hide your navigation. This is usually done by having a small icon with a menu symbol (usually three horizontal lines) that opens up to reveal menu links when the user touches the icon. The advantage of this is that you can have the icon fixed on the screen so that no matter how far down the user is on the page they can easily access it without it being obstructive.
  5. Keep file sizes small: Mobile devices are not going to have the same connectivity that desktops have. Loading rates are going to be much, much slower, and so it’s essential that you keep your file sizes as small as possible so total loading time is reduced. File sizes can particularly spike when it comes to images, so consider optimizing your images to appropriate file types and sizes (although you should be doing this anyways!).
  6. Use a responsive layout: If you’re designing for mobile devices, chances are that you’re not designing for just one device. With a vast multitude of screen sizes available, it’s best to design a responsive website. This means using relative units of measurements like percentages (%) or ems, rather than absolute units like pixels. In particular, you want to have images that scale nicely across screen sizes. Responsive design will be covered in more detail in another article.
  7. Reduce user input: If there is one common aggravation that most users have experienced, it’s trying to fill out a registration or some other form on a phone. It’s tedious to type out your information, and it’s even more irritating when your session times out as you try to hit submit. Therefore, you should try to keep form inputs to an absolute minimum. If a user is trying to register to your website, have them only provide a name, username and password; if you need more information beyond that, have them fill it out at a later time so they can complete it at their convenience.

As always, there is much more to consider when it comes to mobile design than what is listed here. However, I feel these seven tips are probably the most important to keep in mind the next time you’re designing your website.

Sources: [ A Look Into: Designing for Mobile Devices ], [ Mobile Web Mastery: 25 Tips on Designing for Mobile Devices ], [ Mobile Website Design: 30 Pro Tips ]

How to Mock-Up a Website in Photoshop

This week I thought I’d share a video that I had created not too long ago:

This video is a two-minute tutorial on how you can create a visual mock-up for a website using only Adobe Photoshop. When working with a client, it’s important to have visual mock-ups of your design ideas that you can share with them. I personally believe that creating designs in Photoshop is very beneficial: 1) you are able to create designs very quickly, as you can see in this tutorial; 2) your mock-up will look clean and professional; 3) it’s very easy to go back and alter elements and present the changes to your client again, assuming you use your Photoshop layers properly.

Note: This video assumes that you are already familiar with how to use Adobe Photoshop. If you do not know how to use Photoshop, I recommend that you look up some other tutorials before watching this one.

I hope you enjoy the video!