Please notice that this article is targeted at newcomers to the industry rather than seasoned designers and developers. The point of the article is to provide a general guide to building meaningful, future-friendly websites today, including strategies, techniques and tools that most Web designers are used to today. — Ed.

A long time ago in a galaxy far, far away… a young designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take in order to stand proud with their peers in this wide world we call the Web. Yes, I’m talking about creating your own portfolio website.

I recently redesigned my own portfolio website. It was a challenging but enjoyable experience that I really learned a lot from. My goal was to create a unique online presence that represents my personality and displays my design work in detail, while of course serving as a promotional medium to gain more exposure and business.

A look behind the scenes of my design and development workflow

After receiving a bunch of emails asking me about the design decisions I made during the redesign of my website, I decided to write this article to give a peek at my journey and some of the things I learned along the way. I’ll discuss best practices in modern Web design and go through the entire design and development workflow that I followed to create my website, from the initial planning stage to the final live website, including these steps:

• project planning,
• branding,
• wireframes,
• responsive design and flexible grids,
• LESS and SASS,
• high-definition screens,
• flexible images,
• content animation,
• WordPress development,
• testing and analytics.

I hope this helps and inspires other designers out there who are looking to create their own unique portfolio website. We’ve got a lot to get through, so let’s get started.

Plan The Project

Define Your Brief

The first thing I do with any project is figure out exactly what I want to achieve, and I write it down. What is the purpose of the project? What problem am I trying to solve? My goal was to create an online profile to promote my design work and gain more exposure. I needed to be able to write articles, display my design work and have people contact me easily. I also wanted it to be unique and memorable, while representing my personality.

At this point, we simply need to figure out our ultimate goal; we’re not worried about how we will get there. Write down your goals, and look back at them in later stages of the project to ensure that you’re on track.

Initial Research and Idea Generation

Do some initial research to get the creative juices flowing. Inspiration can come from anywhere and can strike at any time, often while you’re in bed and on the verge of falling asleep (with, of course, not a notebook in sight). Sometime you might want to look at other sites for inspiration, but sometimes not looking at what other designers have done is best, because once you’ve seen it, thinking of your own ideas can be hard.

Instead, make a cup of tea, find a comfortable spot and brainstorm your own solutions to the problem at hand. All you need at this stage is a pen, a sketchbook and your thoughts. Hopefully, you’ll come up with something innovative that hasn’t been done before. You can employ plenty of methods to generate ideas. Have a think about your personality and what makes you unique as a designer. What are your interests? How are you different? Do you have a particular design style? Do you specialize in a certain aspect of design? Do you have unusually big ears? Find an angle that represents you and integrate that into your design.

Justin Aguilar illustrates his workspace in his portfolio.

Meng To gets straight to the point with his case studies.

Stephen Burgess is a developer but shows a great understanding of design and UX with his unique website.

After some initial research, I wrote down a few ideas and elements to include in my portfolio:

• My skill set is a mix of both coding and design, and I wanted this to be prominent.
• I’m a big fan of minimalist design and wanted to stick with a mainly black and white palette to allow the design to shine through.
• I wanted to use my own photo as a hero image to inject some personality into the website.
• I enjoy the experience of seeing animation as I scroll down a page.
• I’ve never liked the way in which one Web page jerks to another, so I wanted my transitions to be smooth.
• I like a generous amount of white space and a full-width layout.
• Responsiveness is important to me because I want mobile and tablet users to also have an optimal experience.
• I wanted my case studies to tell a story about my design process, rather than just be a gallery of random images without context.

Create a Timeline

Once your ideas are together and you know which direction to head in, draw a rough timeline. I’m not talking about strict deadlines or anything, but more of a guide to help you organize tasks and stay productive and motivated. Simply list the tasks that you need to do, and estimate the amount of time each will take. This will give you a rough estimate of how long the project will take, as well as create a task list to work from. Of course, some of your estimates might be a little off, but that’s fine; you can adjust the timeline as you go. A bit of organization goes a long way, so get into this habit.

Design

Design Your Brand

Your brand is basically the visual language that describes who you are and that determines how others see you. I wanted to convey a clean, sleek and minimal look and feel. I kept things quite simple and decided to create a logo mark from my initials, using a minimal black and white palette. I sketched some ideas and experimented with typography and letter arrangement before deciding on the final logo (which I drew in Adobe Illustrator). If you’re having trouble coming up with a logo, you might want to read “A Systematic Approach to Logo Design.”

My final logo design

As part of my branding, I also wanted to design an avatar for my website and various social media platforms. It would need to represent me as a designer and developer, while being unique and memorable. After countless hours of brainstorming (more like procrastination), I finally had an idea that makes sense. The idea was to take a photo of my face and cut it in half. One side would depict the creative designer in me, while the other would show my logical coding side. After numerous sketches and a lot of fiddling in Photoshop, I was finally happy with the concept. I used pastels, grunge-style brushes and masks to achieve the aesthetic I was after.

My final avatar

Create Content

Many designers leave content creation until the end because they’re more interested in layout and aesthetics (the fun stuff). Create content early on in the project because it will determine the design. What information do you need to convey to visitors? Think about what you want to say and how to say it. Should a given point be written as simple text, or would it make more sense as an image or diagram?

Be concise and friendly in your copy. I like to write in the first person to make it feel more personable. Break your copy into small chunks to improve readability and scannability. I wrote a draft of my content and broke it down into six main parts: home page introduction, a bit about me, places I’ve been featured, my design work, my blog, and my contact details.

Show Your Work

Your work is the most important piece of content in the portfolio because it is what most visitors have come to see. Gather your best projects, and explain the process and workflow behind each. Nothing is worse than a vague portfolio of random images with no context or explanation. Including only the type of work you’re looking to do more of, rather than all of your work, will help you target the right clients.

Your potential customers will want to see your work in as much detail as possible, so don’t shrink it to a small size. I decided to keep the actual sizes if possible to make it easy for visitors to quickly navigate my work. I also decided to talk about the challenges I encountered and how I tried to solve them. Design is all about solving problems, so letting visitors know why a design looks and works the way it does is very useful, and it also gives you an opportunity to reflect on your work and your design process and perhaps improve it next time. Remember that you’re telling a story, so it’s been important to me to make it as interesting and informative as possible.

Soft Facade has beautiful, in-depth case studies.

Now that our content is figured out, we can move onto sketching wireframes.

Sketch Wireframes

The approach I take to wireframes is simple but effective, and all you need is a pen and sketchbook. I first list all of the elements to include on a Web page. I then group related elements, before prioritizing these groups according to importance. Here is my list of elements for the contact page.

List of elements for my contact page

Once the page’s elements are grouped and prioritized, arranging them on the page will be much easier. Place more important elements towards the top of the page, and use white space to create groupings. I took a desktop-first approach because I wanted to focus on displaying my work in detail on large screens. When we come to write the CSS later on, we’ll take a mobile-first approach, which will simplify the code (we’ll get to that shortly). I usually sketch my wireframes with pen and paper, but you can use tools such as Balsamiq or even Photoshop or Illustrator. Below is a wireframe for my contact page. It doesn’t need to look pretty — it’s simply a plan of a Web page to work from.

Contact page wireframe

Responsive Design and Flexible Grids

I wanted to make my website responsive to ensure an optimal experience for visitors on desktop, tablet and mobiles. When designing websites, I like to use a grid because it provides a structural foundation, while making the development process easier and more efficient. Joshua Mauldin sums up a grid pretty well:

Think of it like a house’s foundation. With a solid foundation, the house is stable, and building on it is easy. With a solid grid, your design can easily be adapted to accommodate whatever changes come along.

Some designers find a grid to be limiting, but it really depends on the design. I find that it results in a neater and more organized design. My design is quite simple, so I used a custom 12-column flexible grid, but a 16-column grid would give more definition and accuracy. I also defined a maximum width of 1040 pixels to ensure that the design doesn’t look stretched on larger monitors.

Using a flexible grid (rather than three separate fixed widths for mobile, tablet and desktop) enables a website to scale dynamically to fit any device width. Below is the CSS for my responsive grid, but feel free to create your own to suit the design. Use tools such as Gridpak, Responsive Grid System, Golden Grid System and Responsify to create your own responsive grid. I’ve used ideas from a few of these tools to create my own custom flexible grid.

    /* 12-column responsive grid */
    
    .row {
        clear: both;
        max-width: 1040px;
        margin: 0 auto;
    }
    
    [class^="col-"] {
        float: left;
        margin: 0 3.84615384615% 0 0;
        list-style: none;
        position: relative;
    }
    
    [class^="col-"]:last-child {
        margin: 0;
    }
    
    .col-1 { width: 4.8076923077% }
    .col-2 { width: 13.4615384615% }
    .col-3 { width: 22.1153846154% }
    .col-4 { width: 30.7692307692% }
    .col-5 { width: 39.4230769231% }
    .col-6 { width: 48.0769230769% }
    .col-7 { width: 56.7307692308% }
    .col-8 { width: 65.3846153846% }
    .col-9 { width: 74.0384615385% }
    .col-10 { width: 82.6923076923% }
    .col-11 { width: 91.3461538462% }
    .col-12 { width: 100%; margin: 0 }
    

Upon looking at the CSS above, you might be wondering how the [class^="col-"] CSS selector works. It’s actually called a substring matching attribute selector, and all it does is select any class that begins with the string col-. You can also use substring matching to select other attributes that end with a certain string, or even those that contain a certain string. Substring matching is a handy way to create more complex and powerful CSS selectors, and they’re well supported, too, going as far back as Internet Explorer 7.

The HTML is quite simple, too, consisting of rows and columns, much like a table. Here is a simple two-column responsive grid that I use on my website. The left column spans five columns, while the column on the right spans seven.

    <div class="row">
        <div class="col-5">Content spans five columns</div>
        <div class="col-7">Content spans seven columns</div>
    </div>
    

Set Logical Breakpoints

When you design a responsive website, at certain widths the layout will break or the text will become squished and difficult to read (45 to 75 characters is a comfortable length per line). These special widths are known as breakpoints, and they’re often set to common device widths, such as 320 to 480 pixels for mobile, 768 to 1024 pixels for tablets, and 1024 pixels and up for desktops. The problem is that “common” widths don’t really exist anymore with the growing number of devices, so this solution doesn’t scale well.

Setting breakpoints based on content rather than device width is a more scalable solution. For example, rather than blindly setting a breakpoint at 768 pixels wide for tablets, I instead looked at my content and found that it looked fine until it got squashed under 600 pixels. I thus set a breakpoint at 600 pixels to change the layout to ensure that the content remains legible at and below this width. Yes, you will need to optimize the presentation of your website for various devices, but your content should always determine where the breakpoints lie. These are the four breakpoints I needed for my design: 320, 600, 1024 and 1140 pixels.

When writing the CSS media queries for my website, I took a mobile-first approach. This basically meant writing the mobile styles first as my base, followed by the tablet and then the desktop styles. Mobile styles are generally simpler than desktop styles, so writing them first makes sense. They form the foundation of your styles, and we can then add more complex styles for wider screens. Cascading your style sheet in this way keeps your code clean and DRY (“don’t repeat yourself”).

Here are the media queries I used:

    /* Mobile styles go first, without media queries. */
    
    @media only screen and (min-width: 321px) {
        /* Larger mobile styles (wider than 320 pixels) */
    }
    
    @media only screen and (min-width: 600px) {
        /* Tablet styles (wider than 600 pixels) */
    }
    
    @media only screen and (min-width: 1024px) {
        /* Large laptop styles (wider than 1024 pixels) */
    }
    
    @media only screen and (min-width: 1140px) {
        /* Desktop styles (wider than 1140 pixels) */
    }
    

With the breakpoints defined, I could sketch the tablet and mobile wireframes. Sometimes hiding or omitting content on small devices makes sense, but I wanted as much content to be available across all devices as possible. Why should mobile users miss out on valuable content? People are used to scrolling on phones anyway, so think first before you remove or hide content. The easiest solution isn’t always the best one.

Design High-Fidelity Mockups

Once the desktop and mobile wireframes were sketched, I moved into Photoshop and started mocking up the website in more detail. I don’t like spending much time in Photoshop because it slows down the development process. Don’t worry too much about creating a pixel-perfect design; you’ll have time to refine it during the coding process. Instead, simply mock up the main page templates, along with any other design elements and assets you need. I mocked up the header and footer, along with the basic elements of the “About me” page below, to make sure I was happy with the aesthetic.

“About me” page mockup

Similarly, I didn’t mock up any mobile or tablet designs in Photoshop, because I find that simply coding these based on the wireframes to be quicker. I did, however, spend some time on details such as icons and textures, which can make a big difference in the polish of the final website.

Develop

Now that our website is planned and all of our image assets are ready to go, it’s time to start coding. So, get your headphones and favorite text editor! My text editor of choice is Sublime Text. It’s simple, fast, powerful and easy to use. If you’re a Windows user, I’d recommend Notepad++.

I usually start from the top of the Web page and build each element one by one. Let’s start with the header navigation. I like to write out the HTML for the element first, and then move on to the CSS. Remember that we are actually creating the mobile version first to reduce code bloat. Depending on the complexity of the project, you can either code from scratch or use a framework such as HTML5 Boilerplate, Foundation or Compass.

CSS Preprocessors (LESS/Sass)

If you’re not yet familiar with CSS preprocessors such as LESS and Sass, definitely familiarize yourself with them because they’ll save you a lot of time and effort and will streamline your CSS. A preprocessor gives you more power when coding CSS, enabling you to use object-oriented programming practices when writing styles.

LESS and Sass CSS preprocessors

We’ve all wished that we could use variables in CSS, define functions and reuse code snippets without having to continually copy and paste. CSS preprocessors enable you to do that and much more, while keeping your styles clean and organized. Your LESS or Sass code is then compiled and outputted as regular CSS.

I used LESS to create the CSS for my website. However, after experimenting with both LESS and Sass, I feel that Sass is more powerful, so I’ll be sticking with it from now on. Chris Coyier compares LESS and Sass and shows the subtle yet important differences between the two. The deciding factor for me was that Sass uses Compass and gives you access to a library of useful and well-maintained mixins; LESS doesn’t. Feel free to play with both to see which you prefer.

Progressively Enhance With Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser and adds those features as classes to the <html> element. We all want to take advantage of the latest CSS3 and HTML5 features, but what happens in older browsers that don’t support them? Modernizr basically tells us which features are supported in the visitor’s browser, allowing us to write conditional CSS and JavaScript for each situation. Thus, we can easily progressively enhance, providing everyone with basic features, while enhancing the experience for those with modern browsers.

Create Flexible Images

Flexible images are a simple yet important part of any responsive website. To make your images flexible, simply place them in your responsive grid container and add the CSS below to your style sheet. Insert them using the <img> tag, although there are ways to achieve flexible images using CSS background images, too. If you want to get more technical and serve different images according to the device being used (for example, serving small images to phones to conserve bandwidth), you can look into certain techniques for serving truly responsive images and avoiding duplicate image downloading.

    img {
    	max-width: 100%; 
    	height: auto !important;
    }
    

Use CSS Image Sprites

We all know to combine our icons and image assets into CSS sprites, rather than leave multiple individual images to load one after another. This decreases loading time and makes it easy for you to edit and maintain image files later on. I usually create several sprites for the different sections of a website. For example, one of my sprites contains all of my icons, while another contains global elements (including logo, header icons, navigation background and footer icons).

When creating sprites, think about how your website will load. If a bunch of icons are only used on a single page of the website, then separate them from the main sprite. This will ensure that they’re loaded only when needed, while keeping your main sprite small. Using sprites will also make it easier to prepare your images for high-definition screens later on. The process can be cumbersome, so use a handy tool such as Sprite Cow to create them quickly and easily. You can also use a combination of Sass and Compass to generate sprites automatically from separate images.

Catering to High-Definition Screens

To ensure that your website looks crisp on high-definition (or “Retina”) screens, use CSS as much as possible for presentation. Remember that some of the newer CSS styles won’t render in old browsers — this is where progressive enhancement makes sense. In most cases, you won’t be able to build the website completely from CSS; you’ll need images. Luckily, preparing your images for high-definition screens is not hard.

Basically, you’ll need to create larger versions of your images to be used on high-definition screens. Because our images are contained in a sprite, all we need to do is create another version of the sprite that is exactly twice as large. Let’s say our sprite is named sprite.png; we would name our high-definition sprite sprite@2x.png. To decrease loading time (especially on mobile devices), compress your images using JPEGmini, TinyPNG or, if you’re on a Mac, ImageOptim.

Simply create another image twice the size of the original for high-definition devices.

Once you’ve created the larger images, simply use media queries to show the large images on high-definition screens. Be careful with your media queries because iPhones aren’t the only high-definition devices around at the moment. There are other mobile phones, along with Retina iPads and MacBook Pros, too. I use two high-definition media queries on my website: the first for high-definition mobile devices, and the second for tablets and laptops.

Here are the media queries to target high-definition screens:

    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
        /* Target all high-definition screens. */
    }
    
    @media 
    only screen and (min-width : 600px) and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min-width : 600px) and (min--moz-device-pixel-ratio: 1.5), 
    only screen and (min-width : 600px) and (min-device-pixel-ratio: 1.5) {
        /* Target high-definition devices with screens wider than 600 pixels. */
    }
    

Wouldn’t it be great if we could eliminate the need for media queries and separate high-definition images altogether? An even better way to cater to high-definition screens is to use images that are vectors, which will scale to fit any screen size and look crisp on any device. You can draw your images or icons in Illustrator and export them as scalable vector graphics (SVG) files. The SVG file basically consists of XML-based code that describes the image to the browser.

Another clever way to get scalable vector icons that look crisp on high-definition devices is to use icon fonts, such as those from IcoMoon and Font Awesome. I didn’t use these methods on my website, mainly because I don’t have many icons or vector images. But if you’re looking to use vector images and icons more heavily on your website, then these techniques will come in handy.

Page Transitions

I’ve never been a fan of the abrupt way in which one Web page jumps to another. When the user clicks a link, there’s usually a sharp jump, followed by images loading awkwardly on the page in no particular order. I wanted to control the way my content appears, to create a smooth transition from one page to the next as the visitor navigates the website. When a visitor clicks a link to another page, the current page should fade to white before the next page loads. The next page would start from a white background, and then the content would animate smoothly onto the page. This makes for a pleasant and consistent user experience.

To achieve this transition effect, I needed to use a jQuery preloader plugin, such as jPreLoader or QueryLoader2. This ensures that images load before being animated onto the page (otherwise, the animations would occur before the images have loaded). When it comes to Web development, jQuery plugins shouldn’t be your first option because you rely on jQuery and it’s a performance hit. It’s always a better idea to search for more lightweight, single-purpose JavaScript libraries and use them instead. You could also use CSS transitions in some cases.

I’m not a fan of preloaders in general because the user has to wait until the page loads to see anything, but using one is necessary to achieve the effect I want. I’m going to experiment with hiding the preloader when the page loads quickly, and introduce it only on long page loads. This means that most people would simply see one page seamlessly fade to the next, without a preloader being shown. I’d be interested to hear of any other methods to achieve page transitions without the need for a preloader.

Here is a simple jQuery function to fade out the page when the visitor clicks a link:

    /* 
    * Function to animate leaving a page
    */
    $.fn.leavePage = function() { 	
      	
    	this.click(function(event){
    
    		// Don't go to the next page yet.
    		event.preventDefault();
    		linkLocation = this.href;
    		
    		// Fade out this page first.
    		$('body').fadeOut(500, function(){
    			
    			// Then go to the next page.
    			window.location = linkLocation;
    		});      
    	}); 
    };
    
    
    /* 
    * Call the leavePage function upon link clicks with the "transition" class
    */
    $('.transition').leavePage();
    

I want the leavePage animation to happen when visitors click on a link to another page of my website, so I simply added a transition class to the appropriate links. When a visitor clicks on any link with the transition class, the leavePage animation is triggered. This example is simple, but you can build on it for more complex animation.

So, the user has clicked a link, the current page has faded out, and they’ve landed on the next page. What happens now? Our jQuery preloader takes care of the rest. The preloader basically displays an overlay that covers the page as it loads. Once the loading is complete, the overlay fades away to reveal the page. Of course, you can create your own custom animation to animate content onto the page in a more interesting way.

I won’t get into much detail because there are many ways to animate content onto the page. You could slide content in from the side, one element after another, or fade in elements from top to bottom. Basically you just need to write a function to animate content onto the page, and then call this function once the page has completely loaded. Luckily, both jQuery preloaders mentioned above have callback functions that enable you to call an animation function after the page has completely loaded.

Prevent Flash of Unstyled Content

One of the most annoying issues I faced in trying to achieve the smooth transition between pages was the flash of unstyled content (FOUC) before the jQuery preloader had even started. It wasn’t always there, but every now and then I saw some content flash onto the page before the animation had even started. Luckily, I found a clean and simple way to prevent FOUC that works perfectly.

Animate Content on Scroll

I love the idea of including subtle animations as the visitor scrolls down the page. It’s become a bit of a trend recently, and I think it improves the user experience and adds a touch of polish. I use a simple yet powerful jQuery plugin called Waypoints to create the on-scroll animations. It enables you to trigger animations at different page scroll distances.

If you’re looking for an easy way to do more complex animations on scroll, then check out the SuperScrollorama jQuery plugin.

Custom WordPress Development

I decided to build my website in WordPress, mainly because I’m familiar with it and wanted blogging functionality. Being able to easily install plugins to add functionality is also a nice time-saver. Installing WordPress on a server and turning static HTML pages into a WordPress theme is a pretty simple process. If you’re not familiar with WordPress, you could always use another platform, such as Drupal. Or feel free to just build from scratch in PHP (depending on the complexity of the website).

Because some of my pages have quite varied layouts, I needed a few custom page templates. For instance, I couldn’t use a standard WordPress page for my home page because that design is quite different. So, I created a custom template for the home page. Creating a custom page template in WordPress is quite easy. I also created custom templates for my portfolio item pages and contact page.

In order to separate my portfolio item posts from my blog posts, I created a custom post type especially for my portfolio items. You might be able to get away with displaying your portfolio items as blog posts and categorizing them in a “portfolio” category, to separate them from standard blog posts. I needed the flexibility of a custom post type with a different layout. I won’t get into any more detail about WordPress development because plenty of great WordPress documentation is already out there.

Testing and Analytics

Test Across Browsers

I’m sure you’re all aware of the importance of testing to ensure that your website renders correctly across relevant browsers. You’ll notice that I didn’t say “all browsers,” because you really only need to ensure that your website renders properly for your particular audience. If you know that all of your visitors will be using modern browsers, then you don’t need to spend valuable time and effort supporting old ones.

Test your website on the major browsers.

So, how do you test a website across all relevant browsers? If you’re on a Mac like me, then just download all modern browsers, including Chrome, Safari, Opera and Firefox. But how do you test Internet Explorer on a Mac? One simple and free way is to set up a virtual machine running Windows.

You can also use an Internet Explorer emulator, such as IE Tester. Or sign up to a service such as Spoon or BrowserStack, which allows you to test the website on all major browsers, including Internet Explorer 6, 7, 8, 9 and 10. Rather than leave cross-browser testing until the end, test the website every now and then during the development process.

Set Up Google Analytics

Add Google Analytics to your website to collect valuable statistics on visitors. You’ll know the location of visitors and whether they’re arriving via Google searches or from referring websites. One of your blog posts could get mentioned on another website; if you’re not monitoring your traffic sources, you might not even know about it. Analytics also help you build a profile of visitors, including their country of origin and browser. You can use this data on an ongoing basis to optimize the website for visitors. Setting up Google Analytics on your website is free and takes only a few minutes. Simply sign up, copy and paste the small JavaScript snippet into the footer of your website, and you’re ready to go!

Time To Launch

So, we’ve designed, built and tested our new portfolio, and we’re finally ready to launch — high five! This is one of those experiences you simply shouldn’t miss out on as a designer. I had a great time creating my website and learned a lot in the process. Sure, there were hurdles along the way, but isn’t that what makes design so interesting? I’d love to hear about your experiences in creating your own portfolio.

Hopefully, hearing about my journey will help and inspire you to create your own website or to finally start that redesign you’ve been contemplating for the past few years. So, get out your headphones, knuckle down, and start pushing those pixels. I wish you all the best on your epic quest ahead. Good luck, and may the force be with you.

(al)

© Adham Dannaway for Smashing Magazine, 2013.

A long time ago in a galaxy far, far away… a youngling designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take, in order to stand proud with their peers in this wide world we call “The Web”. Yes, I’m talking about creating your own portfolio website.

I recently re-designed my own portfolio site, it was a challenging but enjoyable experience that I really learned a lot from. My goal was to create a unique online presence that represented my personality and displayed my design work in detail, while of course acting as a promotional medium to gain more business and exposure.

Behind the scenes look at my design and development workflow.

After receiving a bunch of emails asking me how I designed and built my site, I decided to write this article to give a behind the scenes look at my journey and some of the things I learned along the way. I’ll discuss best practices in modern web design and go through the entire design and development workflow I used to create my site, from the initial planning stage to the final live website including:

• project planning,
• branding,
• designing wireframes,
• responsive design and flexible grids,
• using LESS and SASS,
• catering for high definition screens,
• creating flexible images,
• animating content,
• WordPress development and
• testing and analytics.

I hope it helps and inspires other designers out there looking to create their own unique portfolio website. We’ve got a lot to get through, so let’s get started.

Project Planning

Defining your Brief

The first thing I do with any project is figure out exactly what I want to achieve and write it down. What is the purpose of the project? What problem am I trying to solve? For me, my goal was to create an online profile to promote my design work and gain more exposure. It needed to allow me to write articles, display my design work and also allow people to contact me easily. I also wanted it to be unique and memorable while representing my personality.

At this point we simply want to figure out our end goal, we’re not worried about how we will get there. Write down your goals, and make sure you look back at them at later stages in the project to ensure that you’re on track.

Initial Research and Idea Generation

It’s always a good idea to do some initial research to get the creative juices flowing. Inspiration can come from anywhere and it can strike you at any time, usually when you’re in bed and on the verge of falling asleep (and of course there’s not a notebook in sight). I like to check out websites like Awwwards, Dribbble and Creattica for inspiration. But sometimes it’s best not to look at what other designers have done, because once you’ve seen it, it’s sometimes hard to think of your own ideas.

Instead, I’d suggest making a cup of tea, finding a comfortable spot and brainstorming your own solutions to the problem at hand. All you need at this stage is a pen, a sketchbook and your thoughts. Hopefully that way you’ll be able to come up with something innovative that hasn’t been done before. There are plenty of methods you can use to generate ideas. Have a think about your personality and what makes you unique as a designer. What are your interests? How are you different? Do you have a particular design style? Do you specialize in a certain area of design? Do you have unusually big ears? Find an angle that represents you and integrate that into your design.

Justin Aguilar illustrates his workspace in his portfolio design.

Meng To gets straight to the point with his design case studies.

Stephen Burgess is a developer, but he shows a great understanding of design and UX with his unique site.

After some initial research I wrote down a few ideas and elements that I wanted to include in my portfolio site.

• My skill set is a mix of both coding and design and I want this to be shown prominently.
• I’m a big fan of minimalist design and want to stick with a mainly black and white colour palette to allow my design work to shine through.
• I’d like to use my own photo as a hero image to inject some personality into the site.
• I enjoy the experience of seeing animations happen as I scroll down a page.
• I’ve never liked the jerky way in which one webpage jumps to another, so I want to make sure my site transitions smoothly from one page to another.
• I like generous amounts of white space and a full width layout.
• Having a responsive site is important to me as I want mobile and tablet users to also have an optimal user experience.
• I want my design case studies to tell a story about my design process, rather than just being a gallery of random images without context.

Create a Timeline

Once you’ve got your ideas together and you know which direction you’re headed in, it’s always a good idea to create a rough project timeline. I’m not talking about creating strict deadlines or anything, it’s more of a guide to help you organize tasks and stay productive and motivated. Simply list the tasks you need to do and estimate the amount of time each one will take. This will give you a rough outline of how long your project will take, as well as giving you a task list to work from. Of course some of your time estimates might be a little off, but that’s fine and you can adjust your timeline as you go. A little bit of organization goes a long way and it’s good practice to get into this habit.

Design

Designing your Brand

Your brand is basically the visual language that describes who you are and will determine how others see you. For my brand I wanted to convey a clean, sleek and minimal look and feel. I kept things quite simple and decided to create a logo mark from my initials using a minimal black and white colour palette. I sketched out some initial ideas and experimented with various typography and letter arrangements, before deciding on the final logo design (which I drew in Adobe Illustrator). If you’re having trouble coming up with a logo design, you might like to have a read of a systematic approach to logo design.

My final logo design.

As part of my branding I also wanted to design an avatar image of my face, that I could use on my website along with various social media platforms. It would need to represent me as a designer and developer while also being unique and memorable.

After countless hours of brainstorming (more like procrastination), I finally had an idea that made sense. The idea was to take a photo of my face and cut it in half. One side would portray the creative designer in me, while the other showed my logical coding side. After numerous sketches and a lot of fiddling in Photoshop, I was finally happy with the avatar image concept. I used pastel colours, grunge style brushes and masks to achieve the aesthetic I was after.

My final avatar image concept.

Creating Content

I’ve noticed that a lot of designers leave content creation until the end of the project, as they’re more interested in the layout and design aesthetics of the website (the fun stuff). Content creation should happen early in the project, as your content will determine the appropriate design for the site. What information do you need to provide to your visitors? Have a think about what you want to say and how you want to say it. Should it be written as simple text or would it make more sense as an image or diagram?

When writing your copy I think it’s best to be concise and friendly. I like to write in the first-person to make it feel more personable. Break your copy up into small chunks to improve readability and make it easy to scan. I wrote a draft of my content and broke it up into six main parts; homepage introduction, a bit about me, places I’ve been featured, my design work, my blog articles and my contact details.

Displaying your Design Work

The most important piece of content is your portfolio of design work, as this is what most of your visitors want to see. Gather your best work and explain the process and workflow behind it. There’s nothing worse than a vague portfolio of random images with no context or explanation. Try to only include the type of work you’re looking to do more of, rather than all of your work. This will help you target the appropriate clients in the future.

People want to see your work in as much detail as possible, so don’t shrink it down to a small size. Try to keep your designs at their actual size if you can. Make sure it’s easy for visitors to quickly navigate through all of your work. Talk about the challenges you came up against and how you solved them. Design is all about problem solving, so let your visitors know why your design looks and works the way it does. Remember, you’re telling a story so try and make it as interesting and informative as possible. Now that we have our content figured out, we can move onto sketching wireframes.

Soft Facade have beautiful, in-depth design case studies.

Sketching Wireframes

The approach I take to sketching wireframes is simple but effective, and all you need is a pen and a sketchbook. I firstly write down a list of all the elements I need to include on the webpage. I then group related elements together before prioritizing these groups based on their importance. Here is my list of elements for my contact page.

List of page elements for my contact page.

Once you’ve got your page elements grouped and prioritized, it’s much easier to arrange them on the page. Place your more important elements towards the top of the page and use white space to create your groupings. I took a desktop-first approach to the design of my site, as I wanted to focus on displaying my design work in detail on a larger screen.

When we come to writing the CSS later on, we’ll actually be taking a mobile-first approach as it will simplify our CSS code, we’ll get to that shortly. I usually sketch my wireframes with pen and paper, but you can also use tools like Balsamiq or even Photoshop or Illustrator. Here’s a wireframe for my contact page. It doesn’t need to look pretty, it’s simply a plan of your web page to work from.

Contact page wireframe.

Responsive Design and Flexible Grids

I wanted to make my site responsive to different devices to ensure an optimal user experience for visitors on desktop, tablet and mobiles. When designing websites I usually like to use a grid, as it provides a structural foundation for my design while also making the development process easier and more efficient. Joshua Mauldin sums up grids pretty well.

“Think of it like a house’s foundation. With a solid foundation, the house is stable, and building on it is easy. With a solid grid, your design can easily be adapted to accommodate whatever changes come along”.

Some designers find grids to be limiting, but it really depends on the design you have in mind. I find that using a grid results in neater and more organised looking designs. My design was quite simple so I used a custom 12 column flexible grid, but a 16 column grid will give you more definition and accuracy. I also defined a maximum width of 1040px to ensure my design didn’t look stretched on larger monitors.

Using a flexible grid (rather than having 3 separate fixed widths for mobile, tablet and desktop) means that my site scales dynamically to fit on any device width. Below is the CSS for my responsive grid, but feel free to create your own to suit your design. You can use tools like Grid Pak, Responsive Grid System, Golden Grid System and Responsify to help create your own responsive grid. I used ideas from a few of these tools to create my own custom flexible grid.

CSS for my responsive grid:

    
    /* 12 Column Responsive Grid */
    
    .row {
    
        clear: both;
        max-width: 1040px;
        margin: 0 auto;
    
    }
    
    [class^="col-"] {
    
        float: left;
        margin: 0 3.84615384615% 0 0;
        list-style: none;
        position: relative;
    
    }
    
    [class^="col-"]:last-child {
    
        margin: 0;
    
    }
    
    .col-1 { width: 4.8076923077% }
    .col-2 { width: 13.4615384615% }
    .col-3 { width: 22.1153846154% }
    .col-4 { width: 30.7692307692% }
    .col-5 { width: 39.4230769231% }
    .col-6 { width: 48.0769230769% }
    .col-7 { width: 56.7307692308% }
    .col-8 { width: 65.3846153846% }
    .col-9 { width: 74.0384615385% }
    .col-10 { width: 82.6923076923% }
    .col-11 { width: 91.3461538462% }
    .col-12 { width: 100%; margin: 0 }
    
    

After looking at the CSS above, you might be wondering how the [class^="col-"] CSS selector works. It’s actually called a substring matching attribute selector and all it’s doing is selecting any classes that begin with the following string: “col-”. You can also use substring matching to select other attributes that end with a certain string or even those that contain a certain string. Substring matching is a very handy way to create more complex and powerful CSS selectors, and they’re well supported too, going as far back as IE7.

HTML for my responsive grid:

The HTML is quite simple too and consists of rows and columns, much like a table. Here is a very simple example of a two column responsive grid that I used on my site. The left column spans across five columns, while the column on the right spans across seven.

    
    <div class="row">
    
        <div class="col-5">Content spans over five columns</div>
        <div class="col-7">Content spans over seven columns</div>
        
    </div>
    
    

Setting Logical Breakpoints

When designing a responsive website, there will be certain widths at which the layout breaks or the text becomes squashed and difficult to read (45 to 75 characters per line is comfortable to read). These special widths are known as breakpoints and they’re usually set based on common device widths e.g. 320px to 480px for mobile, 768px to 1024px for tablets, and 1024px and over for desktops. The problem is that “common” device widths don’t really exist anymore with the growing number of different devices, so this solution doesn’t scale well.

Setting breakpoints based on the content rather than device widths is a more scalable solution. For example, rather than blindly setting a breakpoint at 768px width for tablets, I instead looked at my content and found that it looked fine until it became squashed below 600px width. I thus set a breakpoint at 600px to change the layout to ensure the content was legible at and below this width. Yes, you need to optimize the display of your site on various devices, but your content should always determine where your breakpoints lie. These are the four breakpoints I needed for my design: 320px, 600px, 1024px and 1140px.

When writing the CSS media queries for my site I took a mobile-first approach. This basically means that I wrote the mobile styles first as my base, followed by the tablet and then the desktop styles. Mobile styles are generally more simple than those needed for your desktop design, so it makes sense to write them first. They form the foundation of your styles, we can then add the more complex styles for larger screen sizes. Cascading your style sheet in this way keeps your code clean and DRY (Don’t repeat yourself). Here are my media queries below.

Media queries:

    
    /* Mobile styles go first, outside the media queries */
    
    @media only screen and (min-width: 321px) { 
    
        /* Larger mobile styles (above 320px wide) */
    }
    
    @media only screen and (min-width: 600px) {
    
        /* Tablet styles (above 600px wide) */
    }
    
    @media only screen and (min-width: 1024px) {
    
        /* Large laptop styles (above 1024px wide) */
    }
    
    @media only screen and (min-width: 1140px) {
    
        /* Desktop styles (above 1140px wide) */
    }
    
    
    

With my breakpoints defined, I could sketch out the tablet and mobile wireframes. Sometimes it makes sense to hide or omit content on smaller devices, but I wanted to make sure as much content as possible was available across all devices. Why should mobile users miss out on valuable content? People are used to scrolling on mobiles anyway, so think first before removing or hiding content. The easiest solution isn’t always the best one.

Designing High Fidelity Mock-ups

Once I had my desktop and mobile wireframes sketched out, I moved into Photoshop and started mocking-up the website in more detail. I don’t like to spend too much time in Photoshop as I think that it slows down the development process. Don’t worry too much about creating a pixel-perfect design, as you’ll have time to tweak and refine it during the coding process anyway. Instead, simply mock-up the main page templates along with any other design elements and assets you need.

I mocked up my header and footer along with the basic elements of my “About me” page below to make sure I was happy with the aesthetic.

“About me” page mock-up.

Similarly, I didn’t mock-up any mobile or tablet designs in Photoshop, as I find it quicker to simply code these up based on the wireframes. I did however spend some time on smaller details like icons and textures, as small details like this can make a big difference to the final polish of the site.

Development

Now that we have our site planned out and all of our image assets ready to go, it’s time to start coding. So get out your headphones and your favorite text editor! My text editor of choice is Sublime Text. It’s simple, fast, powerful and easy to use. If you’re a Windows user I’d also recommend Notepad++.

I usually start from the top of the webpage and build each element one by one. Let’s start with the header navigation. I like to write out the HTML for the element first then move onto the CSS. Remember that we are actually creating the mobile version first to reduce code bloat. Depending on the complexity of your project, you can either start coding from scratch or use a base framework like HTML5 Boilerplate, Foundation or Compass.

Using CSS Pre-processors (LESS/SASS)

If you’re not yet familiar with CSS pre-processors like LESS and SASS, you should definitely familiarize yourself with them as they’ll save you a lot of time and effort and help streamline your CSS styles. A CSS pre-processor basically gives you more power when coding CSS, as it allows you to use object oriented programming practices when writing your styles.

LESS and SASS CSS pre-processors.

We’ve all wished that we could create variables in CSS, define functions and re-use code snippets without having to copy and paste continuously. CSS pre-processors allow you to do this and much more, while keeping your styles clean and organised. Your LESS/SASS code is simply compiled and output as regular CSS.

I actually used LESS to create the CSS for my website. However, after experimenting with both LESS and SASS I feel that SASS is a more powerful solution, so I’ll be sticking to SASS from now on. Chris Coyier compares LESS and SASS and shows the subtle but important differences between the two. The decider for me was that SASS uses Compass and gives you access to a library of useful and well maintained mixins to use in your projects, LESS doesn’t. Feel free to have a play with both to see which one you prefer.

Progressive Enhancement with Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the visitors’ browser and adds those features as classes to the <html> element. We all want to take advantage of the latest CSS3 and HTML5, but what happens in older browsers that don’t support it?

Modernizr basically tells us which features are supported in the visitors’ browser, allowing us to write conditional CSS and JavaScript to handle each situation. Thus it allows us to easily take a progressive enhancement approach; providing everyone with your basic website features, while also giving those with modern browsers an enhanced experience.

Creating Flexible Images

Flexible images are a very simple but important part of any responsive website. To make your images flexible, simply place them into your responsive grid container and add the below CSS to your style sheet. They need to be inserted using the <img> tag, although there are ways to achieve flexible images using CSS background images too. If you want to get more technical and actually serve different images depending on the device being used (e.g. serving smaller images on mobiles to conserve bandwidth), you can look into these techniques for serving truly responsive images and avoiding duplicate image downloads.

    
    img { 
    
        max-width: 100%; 
        height: auto !important;
    }
    
    

Using CSS Image Sprites

We all know that it’s a good idea to combine your icons and image assets into CSS Image Sprites, rather than having multiple individual images loading one after the other on your site. It decreases load times and also makes it easy for you to edit and maintain image files at a later stage. I usually like to create several sprites for the different sections of a website. For example, one of my sprites contained all of my icons, while another contained the common global page template elements e.g. logo, header icons, navigation background and footer icons.

When you’re creating your sprites, it’s always a good idea to think about how your website loads. If you’ve got a bunch of image icons that are only used on a single page of a site, it’s probably best to separate them out from the main page sprite. This will ensure that they’re only loaded when they need to be, while keeping your main sprite file size low. Using sprites will also make things easier when it comes to preparing your images for high definition screens later on.

Creating image sprites can be a cumbersome process, so tools like Sprite Cow can come in handy in helping you create them quickly and easily. You can also use a combination of SASS and Compass to generate your sprites automatically from separate images.

Catering for High Definition Screens

To ensure that your site looks crisp on high definition (or Retina) screens, it’s best to try and use CSS to style as much of it as possible. Remember that some of the newer CSS styles won’t render in older browsers, this is where a progressive enhancement approach makes sense. In most cases you won’t be able to build your site completely from CSS, you’ll need images. Luckily it’s not too hard to prepare your images for high definition screens.

Basically you’ll need to create a larger version of your images that will be used on high definition screens. Since our images are contained within a sprite, all we need to do is create another version of the sprite that is exactly two times larger. Let’s say our sprite is named sprite.png, we would name our high definition sprite sprite@2x.png. To decrease load times (especially on mobile devices) it’s also a good idea to compress your images using Jpeg Mini, Tiny Png or Image Optim if you’re on a Mac.

Simply create another image twice the size of the original for high definition devices.

Once you’ve created your larger images, we simply use media queries to show the large images on high definition screens. You need to be careful with your media queries, as iPhone’s aren’t the only high definition devices around at the moment. There are other mobile phones along with Retina iPad’s and MacBook Pro’s too. I used two high definition media queries on my site; the first one is for high definition mobile devices, while the second is for tablets and laptops.

Media queries to target high definition screens:

    
    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
    
        /* Target all high definition screens */
    }
    
    @media 
    only screen and (min-width : 600px) and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min-width : 600px) and (min--moz-device-pixel-ratio: 1.5), 
    only screen and (min-width : 600px) and (min-device-pixel-ratio: 1.5) {
    
        /* Target high definition devices with screens wider than 600px */
    }
    
    

Wouldn’t it be great if we could avoid the need for media queries and separate high definition images altogether?

An even better way to cater for high definition screens is to ensure your images are vectors, this means that they will scale to fit any screen size and look crisp on any device. You can actually draw your images or icons in Illustrator and export them as SVG (Scalable Vector Graphics) files. The SVG file basically consists of XML-based code that describes your image to the browser.

Another clever way to get scalable vector icons that look crisp on high definition devices is to use Icon Fonts like those from Ico Moon and Font Awesome. I didn’t actually use these methods on my site, mainly because I didn’t have many icons or vector images. But if you’re looking to use vector images and icons more heavily on your site, then these techniques will definitely come in handy.

Page to Page Transitions

I’ve never been a fan of the abrupt way in which one web page jumps to another. When you click on a link, there’s usually a sharp jump followed by images loading awkwardly and sporadically onto the page in no particular order. I wanted to control the way my content appeared, to create a smooth transition from one page to the next as a visitor navigated through my site. So when a visitor clicks on a link to go to another page of my site, the current page will basically fade away to white before taking the visitor to the next page. The next page will start from a white background, then the content will animate smoothly onto the page. I think that it creates a pleasant and consistent user experience.

To achieve my page to page transition effect, I actually needed to use a jQuery preloader plugin like jPreLoader or QueryLoader2. This ensured my images were loaded before they animated onto the page, otherwise the animations would happen before the images were there. I’m not a fan of preloaders in general as the user needs to wait until the page loads before they actually see anything, but it was necessary to achieve the page transition effect I wanted. I’m actually going to experiment with hiding the preloader if the page loads quickly and only introducing it on longer page loads. This would mean that most people would simply see one page seamlessly fade to the next, without a preloader being shown.

I’m interested to hear of any other methods to achieve page to page transitions without the need for a preloader.

Here is a very simple jQuery function that causes the page to fade out when visitors click a link to leave a page:

    
    /* 
    * Function to animate leaving a page
    */
    $.fn.leavePage = function() { 	
      	
    	this.click(function(event){
    
    		// Don't go to the next page link yet
    		event.preventDefault();
    		linkLocation = this.href;
    		
    		// Fade the page out
    		$('body').fadeOut(500, function(){
    			
    			// Then go to the next page link
    			window.location = linkLocation;
    		});      
    	}); 
    };
    
    
    /* 
    * Call the leavePage function on click of links with the "transition" class
    */
    $('.transition').leavePage();
    
    

I wanted the “leavePage” animation to happen when visitors clicked on a link to go to another page within my site, so I simply added a class called “transition” to the appropriate links. When a visitor clicked on any link with the “transition” class, the “leavePage” animation would be triggered. This is a very simple animation example, but you could build on this with your own more complex animations.

So the user has clicked a link, the current page has faded away and they’ve landed on the next page. What happens now? Our jQuery preloader will take care of the rest. The preloader basically displays an overlay that covers your page while your page is loading. Once loading is complete, the overlay fades away to reveal your page. Of course you can create your own custom animations to animate your content onto the page in more interesting ways. I won’t go into this in too much detail, as there are many ways to animate content onto the page.

You might like to slide your content in from the sides of the page one element after the other or fade elements in from top to bottom. Basically you’ll just need to write a function to animate your content onto the page, then call this function after the page load is complete. Luckily, both of the jQuery preloaders I mentioned above have callback functions that allow you to call your animation function after the page load is complete.

Preventing FOUC (Flash of Unstyled Content)

One of the most annoying issues I had while trying to achieve my smooth transition between pages was a flash of unstyled content (FOUC) before my jQuery preloader had even started. It wasn’t always there, but every now and then I would see some of my content flash onto the page before my animations had even started. Luckily I found a clean and simple way to prevent the FOUC that worked perfectly.

Animating Content on Scroll

I love the idea of including subtle animations as the visitor scrolls down the page. It’s become a bit of a trend recently, and I think it improves the user experience and adds a touch of polish to the page. I used a simple but powerful jQuery plugin called Waypoints to help me create my on-scroll animations. It basically allows you to trigger your animations at different page scroll distances.

If you’re looking for an easy way to do more complex animations on scroll, you should check out the Scrollorama jQuery plugin.

Custom WordPress Development

I decided to build my website on a WordPress platform, mainly because I’m familiar with it and I wanted to include blog functionality on my site. It’s also a nice time-saver to be able to easily install plugins to add extra functionality to your site. It’s a pretty simple process to install WordPress onto your server and turn your static HTML pages into a WordPress theme. If you’re not familiar with WordPress, you can always use another CMS platform such as Drupal, or feel free to avoid them altogether and just build it from scratch in PHP (It really depends on the complexity of your site).

Since some of the pages on my website had quite varied layouts, I needed to create a few custom page templates. For example, I couldn’t use a standard WordPress page for my homepage as the design is quite customized. So I created a custom template for the homepage. It’s actually really simple to create a custom page template in WordPress. I also created custom templates for my portfolio item pages and contact page.

In order to separate my portfolio item posts from my blog posts, I decided to create a custom post type for my portfolio items. This basically allowed me to use a different template for blog posts and portfolio item posts. You might be able to get away with simply displaying your portfolio items as blog posts and categorizing them into a “portfolio” category to separate them from the standard blog post articles. I needed the flexibility of a custom post type with a different layout. I won’t go into more detail about WordPress development, as there’s plenty of great WordPress documentation out there already.

Testing And Analytics

Cross Browser Testing

I’m sure you’re all aware of the importance of cross browser testing to ensure that your site renders correctly across relevant browsers. You’ll notice that I didn’t say “all browsers”, that’s because you really only need to ensure that your site renders properly for your particular audience. If you know that all of your visitors are using modern browsers then you don’t need to spend valuable time and effort supporting older ones.

Test your site on the major browsers.

So how do we test our website across all the relevant browsers? If you’re on a Mac like me you’ll be able to simply download all the modern browsers like Chrome, Safari, Opera and Firefox. So how do you test Internet Explorer on a Mac? One simple and free way to do this is to simply setup a virtual machine running Windows.

You can also use an IE emulator tool like IE Tester or alternatively sign up to services like Spoon or Browser Stack, which allow you to test your site on all major browsers including Internet Explorer 6, 7, 8, 9 and 10. Rather than leaving your cross browser testing right until the end of your project, it’s probably best to test your site every now and then during the development process to make things easier at the end.

Setup Google Analytics

It’s always a good idea to add Google Analytics to your website to collect valuable statistics on your visitors. You’ll know the location of your visitors and whether they’re arriving via Google searches or from referring sites. One of your blog posts might get mentioned on another site, if you’re not monitoring your traffic sources you might not even know about it.

Analytics will also allow you to build a profile of your visitors and get an idea of which countries they’re from and what browsers they’re using. You can use this data on an ongoing basis to improve and optimize your site for your visitors. Setting up Google Analytics on your website is free and only takes a few minutes. Simply sign up, copy and paste a small JavaScript code snippet into the footer of your site and you’re ready to go!

Time To Launch

So we’ve designed, built and tested our new portfolio website and we’re finally ready to launch (High five)! It’s one of those experiences you simply shouldn’t miss out on as a designer. I had a great time creating my site and learned a lot in the process too. Sure, there were hurdles and challenges along the way, but isn’t that what makes design so interesting? I’d love to hear about your experiences creating your own portfolio site.

I hope that my journey will help and inspire you to create your own site, or finally start that re-design you’ve been contemplating for the past few years. So get out your headphones, knuckle down and start pushing those pixels. I wish you all the best on your epic quest ahead, good luck and may the force be with you.

© Adham Dannaway for Smashing Magazine, 2013.

A long time ago in a galaxy far, far away… a youngling designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take, in order to stand proud with their peers in this wide world we call “The Web”. Yes, I’m talking about creating your own portfolio website.

I recently re-designed my own portfolio site, it was a challenging but enjoyable experience that I really learned a lot from. My goal was to create a unique online presence that represented my personality and displayed my design work in detail, while of course acting as a promotional medium to gain more business and exposure.

Behind the scenes look at my design and development workflow.

After receiving a bunch of emails asking me how I designed and built my site, I decided to write this article to give a behind the scenes look at my journey and some of the things I learned along the way. I’ll discuss best practices in modern web design and go through the entire design and development workflow I used to create my site, from the initial planning stage to the final live website including:

• project planning,
• branding,
• designing wireframes,
• responsive design and flexible grids,
• using LESS and SASS,
• catering for high definition screens,
• creating flexible images,
• animating content,
• WordPress development and
• testing and analytics.

I hope it helps and inspires other designers out there looking to create their own unique portfolio website. We’ve got a lot to get through, so let’s get started.

Project Planning

Defining your Brief

The first thing I do with any project is figure out exactly what I want to achieve and write it down. What is the purpose of the project? What problem am I trying to solve? For me, my goal was to create an online profile to promote my design work and gain more exposure. It needed to allow me to write articles, display my design work and also allow people to contact me easily. I also wanted it to be unique and memorable while representing my personality.

At this point we simply want to figure out our end goal, we’re not worried about how we will get there. Write down your goals, and make sure you look back at them at later stages in the project to ensure that you’re on track.

Initial Research and Idea Generation

It’s always a good idea to do some initial research to get the creative juices flowing. Inspiration can come from anywhere and it can strike you at any time, usually when you’re in bed and on the verge of falling asleep (and of course there’s not a notebook in sight). I like to check out websites like Awwwards, Dribbble and Creattica for inspiration. But sometimes it’s best not to look at what other designers have done, because once you’ve seen it, it’s sometimes hard to think of your own ideas.

Instead, I’d suggest making a cup of tea, finding a comfortable spot and brainstorming your own solutions to the problem at hand. All you need at this stage is a pen, a sketchbook and your thoughts. Hopefully that way you’ll be able to come up with something innovative that hasn’t been done before. There are plenty of methods you can use to generate ideas. Have a think about your personality and what makes you unique as a designer. What are your interests? How are you different? Do you have a particular design style? Do you specialize in a certain area of design? Do you have unusually big ears? Find an angle that represents you and integrate that into your design.

Justin Aguilar illustrates his workspace in his portfolio design.

Meng To gets straight to the point with his design case studies.

Stephen Burgess is a developer, but he shows a great understanding of design and UX with his unique site.

After some initial research I wrote down a few ideas and elements that I wanted to include in my portfolio site.

• My skill set is a mix of both coding and design and I want this to be shown prominently.
• I’m a big fan of minimalist design and want to stick with a mainly black and white colour palette to allow my design work to shine through.
• I’d like to use my own photo as a hero image to inject some personality into the site.
• I enjoy the experience of seeing animations happen as I scroll down a page.
• I’ve never liked the jerky way in which one webpage jumps to another, so I want to make sure my site transitions smoothly from one page to another.
• I like generous amounts of white space and a full width layout.
• Having a responsive site is important to me as I want mobile and tablet users to also have an optimal user experience.
• I want my design case studies to tell a story about my design process, rather than just being a gallery of random images without context.

Create a Timeline

Once you’ve got your ideas together and you know which direction you’re headed in, it’s always a good idea to create a rough project timeline. I’m not talking about creating strict deadlines or anything, it’s more of a guide to help you organize tasks and stay productive and motivated. Simply list the tasks you need to do and estimate the amount of time each one will take. This will give you a rough outline of how long your project will take, as well as giving you a task list to work from. Of course some of your time estimates might be a little off, but that’s fine and you can adjust your timeline as you go. A little bit of organization goes a long way and it’s good practice to get into this habit.

Design

Designing your Brand

Your brand is basically the visual language that describes who you are and will determine how others see you. For my brand I wanted to convey a clean, sleek and minimal look and feel. I kept things quite simple and decided to create a logo mark from my initials using a minimal black and white colour palette. I sketched out some initial ideas and experimented with various typography and letter arrangements, before deciding on the final logo design (which I drew in Adobe Illustrator). If you’re having trouble coming up with a logo design, you might like to have a read of a systematic approach to logo design.

My final logo design.

As part of my branding I also wanted to design an avatar image of my face, that I could use on my website along with various social media platforms. It would need to represent me as a designer and developer while also being unique and memorable.

After countless hours of brainstorming (more like procrastination), I finally had an idea that made sense. The idea was to take a photo of my face and cut it in half. One side would portray the creative designer in me, while the other showed my logical coding side. After numerous sketches and a lot of fiddling in Photoshop, I was finally happy with the avatar image concept. I used pastel colours, grunge style brushes and masks to achieve the aesthetic I was after.

My final avatar image concept.

Creating Content

I’ve noticed that a lot of designers leave content creation until the end of the project, as they’re more interested in the layout and design aesthetics of the website (the fun stuff). Content creation should happen early in the project, as your content will determine the appropriate design for the site. What information do you need to provide to your visitors? Have a think about what you want to say and how you want to say it. Should it be written as simple text or would it make more sense as an image or diagram?

When writing your copy I think it’s best to be concise and friendly. I like to write in the first-person to make it feel more personable. Break your copy up into small chunks to improve readability and make it easy to scan. I wrote a draft of my content and broke it up into six main parts; homepage introduction, a bit about me, places I’ve been featured, my design work, my blog articles and my contact details.

Displaying your Design Work

The most important piece of content is your portfolio of design work, as this is what most of your visitors want to see. Gather your best work and explain the process and workflow behind it. There’s nothing worse than a vague portfolio of random images with no context or explanation. Try to only include the type of work you’re looking to do more of, rather than all of your work. This will help you target the appropriate clients in the future.

People want to see your work in as much detail as possible, so don’t shrink it down to a small size. Try to keep your designs at their actual size if you can. Make sure it’s easy for visitors to quickly navigate through all of your work. Talk about the challenges you came up against and how you solved them. Design is all about problem solving, so let your visitors know why your design looks and works the way it does. Remember, you’re telling a story so try and make it as interesting and informative as possible. Now that we have our content figured out, we can move onto sketching wireframes.

Soft Facade have beautiful, in-depth design case studies.

Sketching Wireframes

The approach I take to sketching wireframes is simple but effective, and all you need is a pen and a sketchbook. I firstly write down a list of all the elements I need to include on the webpage. I then group related elements together before prioritizing these groups based on their importance. Here is my list of elements for my contact page.

List of page elements for my contact page.

Once you’ve got your page elements grouped and prioritized, it’s much easier to arrange them on the page. Place your more important elements towards the top of the page and use white space to create your groupings. I took a desktop-first approach to the design of my site, as I wanted to focus on displaying my design work in detail on a larger screen.

When we come to writing the CSS later on, we’ll actually be taking a mobile-first approach as it will simplify our CSS code, we’ll get to that shortly. I usually sketch my wireframes with pen and paper, but you can also use tools like Balsamiq or even Photoshop or Illustrator. Here’s a wireframe for my contact page. It doesn’t need to look pretty, it’s simply a plan of your web page to work from.

Contact page wireframe.

Responsive Design and Flexible Grids

I wanted to make my site responsive to different devices to ensure an optimal user experience for visitors on desktop, tablet and mobiles. When designing websites I usually like to use a grid, as it provides a structural foundation for my design while also making the development process easier and more efficient. Joshua Mauldin sums up grids pretty well.

“Think of it like a house’s foundation. With a solid foundation, the house is stable, and building on it is easy. With a solid grid, your design can easily be adapted to accommodate whatever changes come along”.

Some designers find grids to be limiting, but it really depends on the design you have in mind. I find that using a grid results in neater and more organised looking designs. My design was quite simple so I used a custom 12 column flexible grid, but a 16 column grid will give you more definition and accuracy. I also defined a maximum width of 1040px to ensure my design didn’t look stretched on larger monitors.

Using a flexible grid (rather than having 3 separate fixed widths for mobile, tablet and desktop) means that my site scales dynamically to fit on any device width. Below is the CSS for my responsive grid, but feel free to create your own to suit your design. You can use tools like Grid Pak, Responsive Grid System, Golden Grid System and Responsify to help create your own responsive grid. I used ideas from a few of these tools to create my own custom flexible grid.

CSS for my responsive grid:

    
    /* 12 Column Responsive Grid */
    
    .row {
    
        clear: both;
        max-width: 1040px;
        margin: 0 auto;
    
    }
    
    [class^="col-"] {
    
        float: left;
        margin: 0 3.84615384615% 0 0;
        list-style: none;
        position: relative;
    
    }
    
    [class^="col-"]:last-child {
    
        margin: 0;
    
    }
    
    .col-1 { width: 4.8076923077% }
    .col-2 { width: 13.4615384615% }
    .col-3 { width: 22.1153846154% }
    .col-4 { width: 30.7692307692% }
    .col-5 { width: 39.4230769231% }
    .col-6 { width: 48.0769230769% }
    .col-7 { width: 56.7307692308% }
    .col-8 { width: 65.3846153846% }
    .col-9 { width: 74.0384615385% }
    .col-10 { width: 82.6923076923% }
    .col-11 { width: 91.3461538462% }
    .col-12 { width: 100%; margin: 0 }
    
    

After looking at the CSS above, you might be wondering how the [class^="col-"] CSS selector works. It’s actually called a substring matching attribute selector and all it’s doing is selecting any classes that begin with the following string: “col-”. You can also use substring matching to select other attributes that end with a certain string or even those that contain a certain string. Substring matching is a very handy way to create more complex and powerful CSS selectors, and they’re well supported too, going as far back as IE7.

HTML for my responsive grid:

The HTML is quite simple too and consists of rows and columns, much like a table. Here is a very simple example of a two column responsive grid that I used on my site. The left column spans across five columns, while the column on the right spans across seven.

    
    <div class="row">
    
        <div class="col-5">Content spans over five columns</div>
        <div class="col-7">Content spans over seven columns</div>
        
    </div>
    
    

Setting Logical Breakpoints

When designing a responsive website, there will be certain widths at which the layout breaks or the text becomes squashed and difficult to read (45 to 75 characters per line is comfortable to read). These special widths are known as breakpoints and they’re usually set based on common device widths e.g. 320px to 480px for mobile, 768px to 1024px for tablets, and 1024px and over for desktops. The problem is that “common” device widths don’t really exist anymore with the growing number of different devices, so this solution doesn’t scale well.

Setting breakpoints based on the content rather than device widths is a more scalable solution. For example, rather than blindly setting a breakpoint at 768px width for tablets, I instead looked at my content and found that it looked fine until it became squashed below 600px width. I thus set a breakpoint at 600px to change the layout to ensure the content was legible at and below this width. Yes, you need to optimize the display of your site on various devices, but your content should always determine where your breakpoints lie. These are the four breakpoints I needed for my design: 320px, 600px, 1024px and 1140px.

When writing the CSS media queries for my site I took a mobile-first approach. This basically means that I wrote the mobile styles first as my base, followed by the tablet and then the desktop styles. Mobile styles are generally more simple than those needed for your desktop design, so it makes sense to write them first. They form the foundation of your styles, we can then add the more complex styles for larger screen sizes. Cascading your style sheet in this way keeps your code clean and DRY (Don’t repeat yourself). Here are my media queries below.

Media queries:

    
    /* Mobile styles go first, outside the media queries */
    
    @media only screen and (min-width: 321px) { 
    
        /* Larger mobile styles (above 320px wide) */
    }
    
    @media only screen and (min-width: 600px) {
    
        /* Tablet styles (above 600px wide) */
    }
    
    @media only screen and (min-width: 1024px) {
    
        /* Large laptop styles (above 1024px wide) */
    }
    
    @media only screen and (min-width: 1140px) {
    
        /* Desktop styles (above 1140px wide) */
    }
    
    
    

With my breakpoints defined, I could sketch out the tablet and mobile wireframes. Sometimes it makes sense to hide or omit content on smaller devices, but I wanted to make sure as much content as possible was available across all devices. Why should mobile users miss out on valuable content? People are used to scrolling on mobiles anyway, so think first before removing or hiding content. The easiest solution isn’t always the best one.

Designing High Fidelity Mock-ups

Once I had my desktop and mobile wireframes sketched out, I moved into Photoshop and started mocking-up the website in more detail. I don’t like to spend too much time in Photoshop as I think that it slows down the development process. Don’t worry too much about creating a pixel-perfect design, as you’ll have time to tweak and refine it during the coding process anyway. Instead, simply mock-up the main page templates along with any other design elements and assets you need.

I mocked up my header and footer along with the basic elements of my “About me” page below to make sure I was happy with the aesthetic.

“About me” page mock-up.

Similarly, I didn’t mock-up any mobile or tablet designs in Photoshop, as I find it quicker to simply code these up based on the wireframes. I did however spend some time on smaller details like icons and textures, as small details like this can make a big difference to the final polish of the site.

Development

Now that we have our site planned out and all of our image assets ready to go, it’s time to start coding. So get out your headphones and your favorite text editor! My text editor of choice is Sublime Text. It’s simple, fast, powerful and easy to use. If you’re a Windows user I’d also recommend Notepad++.

I usually start from the top of the webpage and build each element one by one. Let’s start with the header navigation. I like to write out the HTML for the element first then move onto the CSS. Remember that we are actually creating the mobile version first to reduce code bloat. Depending on the complexity of your project, you can either start coding from scratch or use a base framework like HTML5 Boilerplate, Foundation or Compass.

Using CSS Pre-processors (LESS/SASS)

If you’re not yet familiar with CSS pre-processors like LESS and SASS, you should definitely familiarize yourself with them as they’ll save you a lot of time and effort and help streamline your CSS styles. A CSS pre-processor basically gives you more power when coding CSS, as it allows you to use object oriented programming practices when writing your styles.

LESS and SASS CSS pre-processors.

We’ve all wished that we could create variables in CSS, define functions and re-use code snippets without having to copy and paste continuously. CSS pre-processors allow you to do this and much more, while keeping your styles clean and organised. Your LESS/SASS code is simply compiled and output as regular CSS.

I actually used LESS to create the CSS for my website. However, after experimenting with both LESS and SASS I feel that SASS is a more powerful solution, so I’ll be sticking to SASS from now on. Chris Coyier compares LESS and SASS and shows the subtle but important differences between the two. The decider for me was that SASS uses Compass and gives you access to a library of useful and well maintained mixins to use in your projects, LESS doesn’t. Feel free to have a play with both to see which one you prefer.

Progressive Enhancement with Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the visitors’ browser and adds those features as classes to the <html> element. We all want to take advantage of the latest CSS3 and HTML5, but what happens in older browsers that don’t support it?

Modernizr basically tells us which features are supported in the visitors’ browser, allowing us to write conditional CSS and JavaScript to handle each situation. Thus it allows us to easily take a progressive enhancement approach; providing everyone with your basic website features, while also giving those with modern browsers an enhanced experience.

Creating Flexible Images

Flexible images are a very simple but important part of any responsive website. To make your images flexible, simply place them into your responsive grid container and add the below CSS to your style sheet. They need to be inserted using the <img> tag, although there are ways to achieve flexible images using CSS background images too. If you want to get more technical and actually serve different images depending on the device being used (e.g. serving smaller images on mobiles to conserve bandwidth), you can look into these techniques for serving truly responsive images and avoiding duplicate image downloads.

    
    img { 
    
        max-width: 100%; 
        height: auto !important;
    }
    
    

Using CSS Image Sprites

We all know that it’s a good idea to combine your icons and image assets into CSS Image Sprites, rather than having multiple individual images loading one after the other on your site. It decreases load times and also makes it easy for you to edit and maintain image files at a later stage. I usually like to create several sprites for the different sections of a website. For example, one of my sprites contained all of my icons, while another contained the common global page template elements e.g. logo, header icons, navigation background and footer icons.

When you’re creating your sprites, it’s always a good idea to think about how your website loads. If you’ve got a bunch of image icons that are only used on a single page of a site, it’s probably best to separate them out from the main page sprite. This will ensure that they’re only loaded when they need to be, while keeping your main sprite file size low. Using sprites will also make things easier when it comes to preparing your images for high definition screens later on.

Creating image sprites can be a cumbersome process, so tools like Sprite Cow can come in handy in helping you create them quickly and easily. You can also use a combination of SASS and Compass to generate your sprites automatically from separate images.

Catering for High Definition Screens

To ensure that your site looks crisp on high definition (or Retina) screens, it’s best to try and use CSS to style as much of it as possible. Remember that some of the newer CSS styles won’t render in older browsers, this is where a progressive enhancement approach makes sense. In most cases you won’t be able to build your site completely from CSS, you’ll need images. Luckily it’s not too hard to prepare your images for high definition screens.

Basically you’ll need to create a larger version of your images that will be used on high definition screens. Since our images are contained within a sprite, all we need to do is create another version of the sprite that is exactly two times larger. Let’s say our sprite is named sprite.png, we would name our high definition sprite sprite@2x.png. To decrease load times (especially on mobile devices) it’s also a good idea to compress your images using Jpeg Mini, Tiny Png or Image Optim if you’re on a Mac.

Simply create another image twice the size of the original for high definition devices.

Once you’ve created your larger images, we simply use media queries to show the large images on high definition screens. You need to be careful with your media queries, as iPhone’s aren’t the only high definition devices around at the moment. There are other mobile phones along with Retina iPad’s and MacBook Pro’s too. I used two high definition media queries on my site; the first one is for high definition mobile devices, while the second is for tablets and laptops.

Media queries to target high definition screens:

    
    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {
    
        /* Target all high definition screens */
    }
    
    @media 
    only screen and (min-width : 600px) and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min-width : 600px) and (min--moz-device-pixel-ratio: 1.5), 
    only screen and (min-width : 600px) and (min-device-pixel-ratio: 1.5) {
    
        /* Target high definition devices with screens wider than 600px */
    }
    
    

Wouldn’t it be great if we could avoid the need for media queries and separate high definition images altogether?

An even better way to cater for high definition screens is to ensure your images are vectors, this means that they will scale to fit any screen size and look crisp on any device. You can actually draw your images or icons in Illustrator and export them as SVG (Scalable Vector Graphics) files. The SVG file basically consists of XML-based code that describes your image to the browser.

Another clever way to get scalable vector icons that look crisp on high definition devices is to use Icon Fonts like those from Ico Moon and Font Awesome. I didn’t actually use these methods on my site, mainly because I didn’t have many icons or vector images. But if you’re looking to use vector images and icons more heavily on your site, then these techniques will definitely come in handy.

Page to Page Transitions

I’ve never been a fan of the abrupt way in which one web page jumps to another. When you click on a link, there’s usually a sharp jump followed by images loading awkwardly and sporadically onto the page in no particular order. I wanted to control the way my content appeared, to create a smooth transition from one page to the next as a visitor navigated through my site. So when a visitor clicks on a link to go to another page of my site, the current page will basically fade away to white before taking the visitor to the next page. The next page will start from a white background, then the content will animate smoothly onto the page. I think that it creates a pleasant and consistent user experience.

To achieve my page to page transition effect, I actually needed to use a jQuery preloader plugin like jPreLoader or QueryLoader2. This ensured my images were loaded before they animated onto the page, otherwise the animations would happen before the images were there. I’m not a fan of preloaders in general as the user needs to wait until the page loads before they actually see anything, but it was necessary to achieve the page transition effect I wanted. I’m actually going to experiment with hiding the preloader if the page loads quickly and only introducing it on longer page loads. This would mean that most people would simply see one page seamlessly fade to the next, without a preloader being shown.

I’m interested to hear of any other methods to achieve page to page transitions without the need for a preloader.

Here is a very simple jQuery function that causes the page to fade out when visitors click a link to leave a page:

    
    /* 
    * Function to animate leaving a page
    */
    $.fn.leavePage = function() { 	
      	
    	this.click(function(event){
    
    		// Don't go to the next page link yet
    		event.preventDefault();
    		linkLocation = this.href;
    		
    		// Fade the page out
    		$('body').fadeOut(500, function(){
    			
    			// Then go to the next page link
    			window.location = linkLocation;
    		});      
    	}); 
    };
    
    
    /* 
    * Call the leavePage function on click of links with the "transition" class
    */
    $('.transition').leavePage();
    
    

I wanted the “leavePage” animation to happen when visitors clicked on a link to go to another page within my site, so I simply added a class called “transition” to the appropriate links. When a visitor clicked on any link with the “transition” class, the “leavePage” animation would be triggered. This is a very simple animation example, but you could build on this with your own more complex animations.

So the user has clicked a link, the current page has faded away and they’ve landed on the next page. What happens now? Our jQuery preloader will take care of the rest. The preloader basically displays an overlay that covers your page while your page is loading. Once loading is complete, the overlay fades away to reveal your page. Of course you can create your own custom animations to animate your content onto the page in more interesting ways. I won’t go into this in too much detail, as there are many ways to animate content onto the page.

You might like to slide your content in from the sides of the page one element after the other or fade elements in from top to bottom. Basically you’ll just need to write a function to animate your content onto the page, then call this function after the page load is complete. Luckily, both of the jQuery preloaders I mentioned above have callback functions that allow you to call your animation function after the page load is complete.

Preventing FOUC (Flash of Unstyled Content)

One of the most annoying issues I had while trying to achieve my smooth transition between pages was a flash of unstyled content (FOUC) before my jQuery preloader had even started. It wasn’t always there, but every now and then I would see some of my content flash onto the page before my animations had even started. Luckily I found a clean and simple way to prevent the FOUC that worked perfectly.

Animating Content on Scroll

I love the idea of including subtle animations as the visitor scrolls down the page. It’s become a bit of a trend recently, and I think it improves the user experience and adds a touch of polish to the page. I used a simple but powerful jQuery plugin called Waypoints to help me create my on-scroll animations. It basically allows you to trigger your animations at different page scroll distances.

If you’re looking for an easy way to do more complex animations on scroll, you should check out the Scrollorama jQuery plugin.

Custom WordPress Development

I decided to build my website on a WordPress platform, mainly because I’m familiar with it and I wanted to include blog functionality on my site. It’s also a nice time-saver to be able to easily install plugins to add extra functionality to your site. It’s a pretty simple process to install WordPress onto your server and turn your static HTML pages into a WordPress theme. If you’re not familiar with WordPress, you can always use another CMS platform such as Drupal, or feel free to avoid them altogether and just build it from scratch in PHP (It really depends on the complexity of your site).

Since some of the pages on my website had quite varied layouts, I needed to create a few custom page templates. For example, I couldn’t use a standard WordPress page for my homepage as the design is quite customized. So I created a custom template for the homepage. It’s actually really simple to create a custom page template in WordPress. I also created custom templates for my portfolio item pages and contact page.

In order to separate my portfolio item posts from my blog posts, I decided to create a custom post type for my portfolio items. This basically allowed me to use a different template for blog posts and portfolio item posts. You might be able to get away with simply displaying your portfolio items as blog posts and categorizing them into a “portfolio” category to separate them from the standard blog post articles. I needed the flexibility of a custom post type with a different layout. I won’t go into more detail about WordPress development, as there’s plenty of great WordPress documentation out there already.

Testing And Analytics

Cross Browser Testing

I’m sure you’re all aware of the importance of cross browser testing to ensure that your site renders correctly across relevant browsers. You’ll notice that I didn’t say “all browsers”, that’s because you really only need to ensure that your site renders properly for your particular audience. If you know that all of your visitors are using modern browsers then you don’t need to spend valuable time and effort supporting older ones.

Test your site on the major browsers.

So how do we test our website across all the relevant browsers? If you’re on a Mac like me you’ll be able to simply download all the modern browsers like Chrome, Safari, Opera and Firefox. So how do you test Internet Explorer on a Mac? One simple and free way to do this is to simply setup a virtual machine running Windows.

You can also use an IE emulator tool like IE Tester or alternatively sign up to services like Spoon or Browser Stack, which allow you to test your site on all major browsers including Internet Explorer 6, 7, 8, 9 and 10. Rather than leaving your cross browser testing right until the end of your project, it’s probably best to test your site every now and then during the development process to make things easier at the end.

Setup Google Analytics

It’s always a good idea to add Google Analytics to your website to collect valuable statistics on your visitors. You’ll know the location of your visitors and whether they’re arriving via Google searches or from referring sites. One of your blog posts might get mentioned on another site, if you’re not monitoring your traffic sources you might not even know about it.

Analytics will also allow you to build a profile of your visitors and get an idea of which countries they’re from and what browsers they’re using. You can use this data on an ongoing basis to improve and optimize your site for your visitors. Setting up Google Analytics on your website is free and only takes a few minutes. Simply sign up, copy and paste a small JavaScript code snippet into the footer of your site and you’re ready to go!

Time To Launch

So we’ve designed, built and tested our new portfolio website and we’re finally ready to launch (High five)! It’s one of those experiences you simply shouldn’t miss out on as a designer. I had a great time creating my site and learned a lot in the process too. Sure, there were hurdles and challenges along the way, but isn’t that what makes design so interesting? I’d love to hear about your experiences creating your own portfolio site.

I hope that my journey will help and inspire you to create your own site, or finally start that re-design you’ve been contemplating for the past few years. So get out your headphones, knuckle down and start pushing those pixels. I wish you all the best on your epic quest ahead, good luck and may the force be with you.

© Adham Dannaway for Smashing Magazine, 2013.

When students have the scholarship support they need, they can do AMAZING things. And during the month of June, we’re working hard to help students do just that — make the most of their time at UMBC, and change the world for the better, with the aid of scholarships. Our aim? To raise enough money to award 30 scholarships of $1,000. It’s a big goal, but you can help us reach it, and when you do, you’ll be helping students in need.

Today we’re featuring 2013 valedictorian and scholarship recipient Asif Majid ’13, interdisciplinary studies, who this fall is bound for Georgetown University to study conflict resolution. While at UMBC, Asif (a Sondheim Public Affairs Scholar) not only wrote a play about Moroccan social justice issues while studying abroad in Morocco, he also participated in Model UN and served as a hand drummer in UMBC’s improvisational world music band and principal timpanist for the UMBC Symphony Orchestra.

Q: What did it mean to you and your family to be able to rely on scholarship support during your time at UMBC?

A:  Coming out of high school, one of my main considerations in choosing a university to attend was financial.  Simultaneously, I was concerned with having a sense of community, as close-knit as possible, while at UMBC.  As a Sondheim Public Affairs Scholar, the financial support that I received from the program and the community support I received from my fellow scholars were essential parts of my UMBC experience.

Q:  Why did you choose UMBC?

A:  Rather than me choosing UMBC, I think that UMBC chose me.  Before and during my high school years, my father taught in the Mechanical Engineering Department, my sister was a Meyerhoff Scholar and Interdisciplinary Studies major, and my mother volunteered with the Meyerhoff Parents’ Association.  UMBC has been a constant presence in my life, and it seemed a natural fit when it came time to choose an undergraduate institution.  Receiving financial support from the school only sweetened the deal.

Q:  We know that students who receive the support they need can do amazing things at UMBC. What are you most proud of accomplishing in your time at UMBC?

A:  Though UMBC has afforded me many opportunities and given me support to be successful in many arenas, I would say that I am most humbled and honored to have achieved excellence within the Interdisciplinary Studies Department (INDS).  Designing my own major, conducting independent research through my capstone and social justice theatre project, integrating a study abroad experience into my undergraduate career, and making history as the first valedictorian from INDS are simply my way of saying thank you to the exceptional department that has been my home for the past four years.

Q:  How did it feel to be able to address your classmates as valedictorian?

A:  It is an impossible task to speak for anyone else, let alone to represent the experiences of thousands of students at a university as diverse as UMBC.  Holding fast to the idea that any good valedictory address is not about the valedictorian but about the graduates as a whole, I chose to speak in terms of ideas and principles such as risk-taking and remembering our origins.  Each graduate has a unique experience that is theirs alone, and I wanted to acknowledge that journey.

Q:  I understand you’re planning on studying conflict resolution at Georgetown. Where do you hope your studies take you?

A:  I feel that my life lines up alongside the motto of The Honors College: “Learning for Living.”  Infused with such an idea after my time at UMBC, I aim for my studies to propel me in the direction of being a conflict transformation scholar-practitioner.  This will involve working in the intersections of the performing arts, experiential education, conflict transformation, and humanitarian emergencies while also thinking, teaching, and writing about how to improve the conditions of others in conflict zones.  For me, the convergence of learning and living is an exciting interstitial space that I believe will characterize my future.

The following is a guest post by Les James. Like many of us, Les has been gunning for a solution to responsive images that works for him. In this article he shares a technique he found where he can pass "named" media queries from CSS over to the JavaScript, which uses those names to swap out the image for the appropriate one for that media query. And even automate the process with Sass. HTML purists may balk at the lack of true src on the image, but at this point we gotta do what we gotta do.

Current proposed responsive image solutions require that you inline media query values into HTML tags.

<picture>
        <source media="(min-width: 45em)" src="large.jpg">
        <source media="(min-width: 18em)" src="med.jpg">
        <source src="small.jpg">
        <img src="small.jpg" alt="">
    </picture>

This is a problem for me. I like my media queries in one spot, CSS. The above example doesn't feel maintainable to me, and part of that might be due to my approach to RWD. I use the Frameless grid approach to creating layouts. I tell Sass how many columns I want in a layout and it generates a media query to fit it. What this means is that I only think in column counts and I actually have no idea what the actual values of my media queries are.

When adapting this approach to responsive images, I needed a way to provide meta data around my breakpoints. So when I create a breakpoint, I give it a label. I've recently been a fan of labels like small, medium and large but the labels could be anything you want. The point is that you name your breakpoints with something meaningful. The goal is to pair those names to matching sources defined in my HTML. The first step is to format our label into something JavaScript can parse.

Sass to JSON

When I create a breakpoint I call upon a Sass mixin I created. The column count creates a min-width media query to fit that column count. The label gives a name to our media query.

@include breakpoint(8, $label: "medium") {
        /* medium size layout styles go here */
    }

The breakpoint mixin passes that label to a function which formats it into a string of JSON.

@function breakpoint-label($label) {
        @return '{ "current" : "#{$label}" }';
    }

JSON to CSS

Now that we have our label converted to JSON, how do we get it into our CSS? The natural fit for a string is CSS generated content. I use body::before to hold my string because it's the least likely spot for me to actually use for display on the front end. Here is how the label finds its way into CSS from my breakpoint mixin.

@if($label) { body::before { content: breakpoint-label($label); } }

Unfortunatly I have to support older browsers and they will have trouble reading our CSS generated content with JavaScript. So we have to place our JSON in one more spot to gain further compatibility. For this I'm going to add our JSON as a font family to the head.

@if($label) {
        body::before { content: breakpoint-label($label); }
        .lt-ie9 head { font-family: breakpoint-label($label); }
    }

CSS to JS

Our layout label is now sitting in a JSON string in our CSS. To read it with JavaScript we turn to our friend getComputedStyle. Let's create a function that will grab our JSON and then parse it.

function getBreakpoint() {
        var style = null;
        if ( window.getComputedStyle && window.getComputedStyle(document.body, '::before') ) {
            style = window.getComputedStyle(document.body, '::before');
            style = style.content;
        }
        return JSON.parse(style);
    }

For browsers that don't support getComputedStyle we need to throw in a little polyfill and grab the head font family instead.

function getBreakpoint() {
        var style = null;
        if ( window.getComputedStyle && window.getComputedStyle(document.body, '::before') ) {
            style = window.getComputedStyle(document.body, '::before');
            style = style.content;
        } else {
            window.getComputedStyle = function(el) {
                this.el = el;
                this.getPropertyValue = function(prop) {
                    var re = /(\-([a-z]){1})/g;
                    if (re.test(prop)) {
                        prop = prop.replace(re, function () {
                            return arguments[2].toUpperCase();
                        });
                    }
                    return el.currentStyle[prop] ? el.currentStyle[prop] : null;
                };
                return this;
            };
            style = window.getComputedStyle(document.getElementsByTagName('head')[0]);
            style = style.getPropertyValue('font-family');
        }
        return JSON.parse(style);
    }

There is a major problem with our function right now. Our JSON is passed as a string which means that it is wrapped in quotes, but what kind of quote depends on which browser you are using. WebKit passes the string wrapped in single quotes. Firefox passes the string wrapped in double quotes which means that it escapes the double quotes inside of our JSON. IE8 does something really wierd and adds a ; } to the end of our string. To account for these inconsistancies we need one more function to normalize our JSON before we parse it.

function removeQuotes(string) {
        if (typeof string === 'string' || string instanceof String) {
            string = string.replace(/^['"]+|\s+|\\|(;\s?})+|['"]$/g, '');
        }
        return string;
    }

Now before parse the JSON in the return of our getBreakpoint function we just pass the string through our removeQuotes function.

return JSON.parse( removeQuotes(style) );

Image Source Matching

JavaScript can now read the label that we defined for each breakpoint. It's trivial at this point to match that label to a responsive image source. Take the following image for example.

<img data-small="small.jpg" data-large="large.jpg">

When the active media query is small, we can have JavaScript match that to data-small and set the source of our image to small.jpg. This works great if you've declaired a source for every breakpoint but as you can see in our example we don't have a source defined for medium. This is a very common scenario. The small image can typically work in larger layouts. Maybe the medium layout just added a sidebar and our image size didn't change. So how does JavaScript know to pull the small source when the layout is medium? For this we need ordering.

Sass List to JavaScript Array

Every time we create a breakpoint we can store that label in a Sass list. In our breakpoint mixin we can append the label to our list.

$label-list: append($label-list, $label, comma);

Assuming that our list defaults to a pre-populated mobile label of small the following breakpoints will create a list of small, medium, large.

@include breakpoint(8, $label: "medium");
    @include breakpoint(12, $label: "large");

The order you declare your breakpoints in Sass will determine the order of your labels. Let's add this Sass list as an array to our JSON function.

@function breakpoint-label($label) {
        $label-list: append($label-list, $label, comma);
        @return '{ "current" : "#{$label}", "all": [#{$label-list}] }';
    }

Now in addition to JavaScript knowing the current breakpoint label it can look at the array we passed and know their order. So if the layout is medium and no matching data attribute is found on our image, JavaScript can find medium in our label array and walk backwards through that array until a matching source is found.

In Summary

This responsive image solution does something really important for me. By tagging media query values with labels I create flexibility and simplicity. If I change the size of a breakpoint I only have to change it in one place, my Sass. My HTML image sources aren't dependent on the value of my media queries, just their name.

Although I've accomplished this with Sass, it's actually not necessary. You can manually write your JSON string into your media queries, Sass just helps automate the process. Here is a simple Pen that uses pure CSS.

Check out this Pen!

To see a more robust, production quality implementation of this technique check out the code behind my framework Breakpoint.

Please note, if you want your image tags to be valid then stub them with a source like src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" and please, make sure you provide a <noscript> fallback.

My hope for sharing this is that it spurs further discussion and ideas around abstracting the complexities and maintainability of responsive images. I'm curious to hear your thoughts and if you have ways to improve this.

We all stand on the shoulders of giants. Much credit and inspiration for this is due to Jeremy Keith's post Conditional CSS and Viljami Salminen's detectMQ.

Making Sass talk to JavaScript with JSON is a post from CSS-Tricks

I ought to know a lot about charities and non-profit organizations. My parents are career missionaries; and I grew up in an environment where everyone I knew was dedicated to improving the lives of others. My family moved around a bit, and I spent my childhood and teen years in several different missionary communities in Canada and Mexico, each of which organized their own charitable endeavors.

In Ontario, it was a literacy program. In Sinaloa, we brought healthier, organic food and donated goods of all kinds to orphanages and daycares in low-income communities. In Jalisco, there’s a free kitchen for the children of a very poor neighborhood, where they can get at least one good meal per day. In Nuevo León, there are good people going to children’s hospitals to try and cheer up the patients and their relatives alike.

As the resident nerd, it often fell to me to create promotional materials and websites for whomever I happened to be working with at the time. After all, these were low-budget operations staffed by few people. Who could afford to hire a professional?

Well, the universe loves a joke: I became a professional.

How is design for non-profits different from commercial work?

It isn’t all that different, if you’re doing it right. The same basic principles of design still apply, and you’re still selling something to your users.

That’s right, you’re selling something. All design is about selling. In this case, you’re selling a cause. You’re selling a reason for some people to send money to other people. Only it’s a bit harder sometimes, because most of the time, the people dropping the cash don’t reap any direct benefit. This is one reason why even most of the charitable campaigns on Kickstarter and IndieGoGo offer perks and rewards.

Just like in any other transaction, you have to convince your users that parting with their money, time, or other resources is a good idea. This is never easy, but it’s not impossible either.

State your goals up-front

I think that every website should be doing this, but in the charity world, transparency is paramount. You want your users to understand, at their first glance at the website, both what it is that you do and what you need from them.

You need to be able to describe — in a maximum of three sentences — who you’re helping, how you’re helping them, and how your users can help you. The rest of the content on the website is only there to support the veracity of your initial statements. 

The Community FoodBank of New Jersey provides an excellent example of this principle. Who are they, and whom are they helping? How are they doing it? Your first clue is in the name. How can you help them? The calls to action are right there, including a “donate” button. (That’s important.)

Simple, transparent, and most importantly, obvious.

Tell a story

Out of all of the many, many communication tools we have developed over time, there is one that has never been equaled: the story. Most people see their own lives as one big story, somehow seeing themselves at the center of everything that goes on. We are all protagonists in our own minds.

Because of this natural narrative — this first-person perspective — we connect with stories, and the characters in them, on a level that almost defies reason. Do you want your users to identify with the people you’re trying to help? Tell them a story that they can’t ignore. You have to bring them down into the dark places, through the pain, and then out on the other side. 

As a lover of stories myself, I often find myself going over them again and again in my head. I empathize with the pain the characters have gone through. I see the one little plot twist that, had it been explained to the right characters, could have saved them so much pain and heartache. Then, you can tell your users that they can, in fact, change the story. Wow. “Change the story” — somebody steal that from me.

The most memorable website that I have ever seen employing this tactic is Too Young to Wed. They don’t use too many words to tell the stories. Few people have the patience for that anymore. Instead, they use heart-wrenching, compelling imagery to tell the tale.

Use photos of the actual people you’re helping

Don’t ever use stock photos of people. Really… don’t. They already look fake on regular commercial sites. On a charity site, it makes the organization look very scammy. Sadly, there are quite a few scams that claim to be charities, so it’s a valid concern.

As a corollary, don’t use pictures of the volunteers or organization administrators in the design. Sure, you can have some on the “About Us” page, or something of the like — just don’t put them front and center. This isn’t about the volunteers. It’s about helping the people that they help.

As far as imagery goes, you just can’t compete with pictures of real individuals who have real needs. Get a photographer, or go take the pictures yourself if you have to.

Oh, you want examples? Scroll back up and check out Too Young to Wed again, or take a look at Smoking Takes Lives. Right now, they’re going all out and focusing specifically on one individual, and his story, to great effect.

Almost worse than stock photos are staged photos. You know the ones. There’s a bunch of people standing uncomfortably close to fit as many as possible. They’re all wearing death-grins. They may be holding some donated goods aloft. Or maybe one person is passing some food to another person, but they’re both looking at the camera. Then, there was the guy that tried to do all of that and give me the thumbs up while I took the photo.

Don’t let anyone pressure you into using those kinds of photos.

Charge money, and other notes on dealing with your charity clients

Dealing with charity and non-profit clients can be a bit different. They’re usually very nice people, with all the best of intentions. They’re also often very opinionated. This is especially true if they’re getting the website for free.

Don’t ask me why, but nine times out of ten, people to whom you give free work are much more demanding than the clients who pay you a lot. Maybe they see your time, efforts, and expertise as less valuable, since they’re getting it all for free. Maybe there’s some other reason.

This is not to say you shouldn’t try to help. A reasonable discount is often a good way to go, but try to avoid doing anything for free — even for charity.

The one notable exception, in my experience, is a project I’m actually still working on. I probably can’t give out details just yet, but I’m working with a team. We’re all volunteers from different parts of the world, including our project manager, who does all of the talking with the clients. This has made the experience much smoother overall.

Other than the money issue, you’re likely to run into other, more typical client quirks. In smaller organizations, your client may have done their own newsletters or other promotional materials for a long time. As a result, they might have a tendency to micromanage. 

One client actually criticized my work for being “too professional”. They thought having design that looked too good would give people the wrong impression about their organization. You know, the kind of stuff that makes for a good story when it’s all over.

Heck, aside from helping people, a good story almost makes it worth the trouble.

Have you designed for non-profits? What tips would you add? Let us know in the comments.

PhotoBulk: Batch Photo Editing for Mac – only $4.97!