"Build a Blog with Jekyll and GitHub Pages" was retired on January 30, 2017.
Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Treehouse Reviews!
You have completed Treehouse Reviews!
Preview
Episode 1: Designing and Planning with Content
18:41 with Allison Grayce Marshall, Dan Gorgone, and Guil HernandezDan, Allison, and Guil provide feedback on two member projects: a website for a nail technician in Scotland, and a portfolio site for a designer/developer.
Websites reviewed in this episode:
- Perfect Ten - http://perfectten.me
- Matthew Stenquist - http://www.dig.ital.me
Responsive Frameworks:
Responsive Sliders:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[? Music ?] [treeviews]
0:00
Hey, everyone. Welcome to Treeviews, the show where you,
0:04
the Treehouse member, can submit your work, your website,
0:07
your web app or other project, and our panel of Treehouse teachers
0:10
offer some feedback, so let's introduce today's panel.
0:14
[Allison Grayce] [@allisongrayce] I'm Allison Grayce,
0:18
and I am a design teacher here at Treehouse.
0:20
[Guil Hernandez] [@guilh] And I'm Guil Hernandez, the front-end design teacher.
0:22
[Dan Gorgone] [@dangorgone] And I'm Dan Gorgone. I teach marketing and business.
0:24
So first off, we just want to say thank you for submitting your work today.
0:26
Our goal with this show is to offer feedback and highlight
0:31
what we think you're doing well and offer some suggestions
0:34
for improvements if necessary.
0:37
[Guil H.] Our first website is PerfectTen.me from Kevin Esther.
0:39
[Perfect Ten] [www.perfectten.me] Kevin designed this site for his wife.
0:43
She's a local nail technician, and she's hoping to drum up some business
0:45
with a web redesign.
0:49
She's looking to make more of a responsive design, and while he's at it
0:51
he's looking to improve his design and coding skills.
0:54
And the first impression I got from the site was that
0:58
it was something that immediately with the purple color it jumped out.
1:01
I saw the logo, Perfect Ten. Really nice.
1:04
And aside from--if you point right here you see Scotland
1:07
kind of hanging off of the header here.
1:10
We can fix that really easy, but the information
1:13
about the business was what I wanted to know about,
1:16
and so seeing this I see it has something to do with pedicures, manicures,
1:20
so obviously this is about nails and beauty and what-not.
1:24
What I didn't get from looking at this site was that this is where
1:28
Jackie would accept appointments and go out to local businesses,
1:32
and you can see people can book appointments by calling this number.
1:38
That's great, but what I didn't understand was that this was not a salon.
1:43
This was not a physical location.
1:49
When I saw Perfect Ten I thought "Oh, it must be a spa" or whatever,
1:51
so I was looking for an address, a phone number.
1:56
I didn't see that, but once I finally started reading through it
1:58
I better understood the purpose behind the site.
2:01
I feel like that needs to be emphasized a bit more,
2:05
a little better understood by the user so they can look at it and say,
2:08
"Oh, this is something that would interest me."
2:12
"I can call this number or submit something online."
2:14
Yeah, and that's a really unique selling proposition
2:16
to be able to have someone come into your home and do your nails,
2:19
and I think that's something that should really be emphasized,
2:22
and in this main area, this main header, maybe that's a great place
2:25
to feature that kind of unique selling proposition.
2:29
And that could be done with brighter colors, maybe add some interesting textures
2:33
or colors or something like that to really make it pop more
2:37
because right now, the colors, while they're nice,
2:41
because purple is a great color for beauty because it kind of evokes
2:43
a sense of luxury and high end, and so the colors are right,
2:47
but maybe that specific shade of purple could use some work,
2:50
or maybe a pattern or something in the background
2:54
to just make it a little bit more visually interesting.
2:56
Now, we were talking about this area right here in the middle,
2:59
and it looks like there is some wasted space, but if you perhaps
3:02
combine this area with the photos, and I think Kevin said
3:05
that he was going to get some higher quality photos there,
3:11
if you can use some sort of slider or carousel
3:14
then you could match the great visuals with the information about the business
3:16
that people are looking for.
3:20
Sure, and there are also some responsive plugins he can use and downloads,
3:22
so first of all, he can visit the Elastislide.
3:26
[Elastislide] [http://tympanus.net/Development/Elastislide/]
3:29
That's a great responsive plugin with several examples and demos,
3:31
and along with that there's FlexSlider, which you can see
3:33
this one scales beautifully to browser width.
3:35
[Flexslider] [http://www.woothemes.com/flexslider/]
3:38
And of course, if he's feeling brave, he can build his own,
3:40
and that might be a good solution because he can better suit to his website needs.
3:42
[Allison G.] Because one of the problems with the current website,
3:47
this gallery view, is that it shows that when you hover over it
3:49
that it's a clickable area, but when you click on it you kind of expect
3:53
for the photo to get bigger or for something more interactive to happen,
3:57
but instead it takes you to a very different layout,
4:01
and it kind of interrupts the flow of the website,
4:04
and the only way to get back is by clicking on the logo,
4:07
so just a little bit of user flow issues going on right there.
4:10
[Guil H.] Sure, and for being one of the first sites you built,
4:14
Kevin, I think it's pretty impressive.
4:16
It's a nice use of CSS balance and web fonts going on here,
4:18
and for your upcoming design, especially if you're doing more of a
4:22
responsive design, to support your design with a more content-out approach,
4:25
so be sure to have all your content in place before you begin,
4:29
and just design around that.
4:32
To help you get started, there are some frameworks you could start using
4:34
and learn from, so you can check out Foundation 3 by Zurb.
4:37
[Foundation 3] [foundation.zurb.com]
4:41
Another one is 32 and Up by Andy Clark.
4:43
[320 And Up] [stuffandnonsense.co.uk/projects/320andup/]
4:45
But if you're looking for something lighter check out the GoldilocksApproach.com.
4:47
[The Goldilocks Approach] [http://goldilocksapproach.com]
4:49
This is more of a device agnostic approach, which doesn't just conform to
4:51
break points for all the resolutions on the devices out there,
4:53
and instead it attempts to make your site adaptable to
4:56
other resolutions and devices.
4:59
[Dan G.] From a business and marketing standpoint
5:01
one of the important tips that I wanted to communicate here
5:03
is that from an SEO standpoint it could be improved
5:08
by using the title tag, and so right now
5:13
the name of the business is in the title tag, and that's a good start.
5:18
But it's not nearly enough if you want to try to generate more business
5:22
through your search engine.
5:25
What you would want to add is information about location
5:28
as well as key words and phrases that people are going to search for
5:31
regarding the services and products that you provide.
5:34
Right here on the home page you've already got that started.
5:38
You have some great content to start with.
5:40
What I would do is add that to your title tag.
5:42
We're talking about these key words right up top,
5:44
pedicure, manicure, shellac, anything else
5:47
that would be an important service that you want people to know about
5:50
as well as Falkirk.
5:53
I don't think you necessarily need Scotland to be in there as well,
5:55
but Falkirk and any of the other towns or areas
5:58
that Jackie is willing to go to for these appointments,
6:01
get those in the title tag as well, and that should help improve
6:04
your search results, especially the local search results.
6:07
Some great suggestions, yeah.
6:10
I just wanted to scroll down a little bit too and talk about the details
6:12
that he's gone into because you can tell that he put some time and effort
6:17
into thinking beyond this.
6:21
He's got a great layout going, and he went in and added shadows
6:23
throughout the site, but there are some inconsistencies.
6:26
As you can see here with the picture of Jackie,
6:29
it looks like there's a bit more of a realistic looking drop shadow
6:32
versus this Deals This Month where it has
6:36
almost this illustrative kind of drop shadow,
6:38
and then on the one to the left there is no drop shadow at all,
6:41
so just kind of thinking about creating this real environment
6:45
and sticking to it.
6:48
If you want to go with the illustrative style, just carry that throughout,
6:50
and the same thing with the realistic drop shadows.
6:52
They're all great options, just be consistent.
6:55
And while we're here on this section, I want to highlight
6:57
that this is some really great content.
6:59
A lot of people when they're looking for these
7:01
local services they are looking for prices.
7:03
They want to know how much each thing costs.
7:06
This is really great.
7:08
What I really like are the Deals This Month.
7:10
The special offers are going to be the things that can really pull
7:12
new customers in to try your service for the first time.
7:16
The information leads right into a nice call to action for a phone call.
7:20
What I think would make it ideal is if you had
7:25
a call to action button to an email form
7:28
where people could fill out just some simple information,
7:31
just get more information about your service,
7:35
about the booking process,
7:37
and if we could move this stuff--at least the Deals This Month--
7:41
if we could move it above the fold and maybe, again,
7:45
it would be part of a carousel or some kind of slider up here.
7:49
You can highlight those deals in addition to
7:52
the great new images that you're going to be adding to the site
7:55
as well as how to book an appointment in the first place.
7:59
And similarly how he has--you're suggesting that
8:01
maybe he put a button or a call to action.
8:05
You could use a similar thing down here, a similar treatment.
8:08
That way you also have a call to action at the bottom of the page.
8:10
I'm not sure about the icons used here.
8:13
They kind of evoke more of a childish kind of imagery.
8:16
[Dan G.] Right, I thought the same thing.
8:20
[Allison G.] So maybe using more appropriate things like nail polish
8:22
or something like that if you want to include iconography.
8:25
[Dan G.] Well, that's a whole bunch of feedback, and Kevin,
8:28
I hope that's helpful for you and Jackie.
8:31
We wish you the best of luck with the website as you work on your redesign.
8:33
Now, our second website that we want to talk about
8:39
was submitted by Matthew Stenquist.
8:41
He's a designer and developer in Denver and LA.
8:43
[Matthew Stenquist Portfolio] [http://www.dig.ital.me]
8:46
This website that he has, which is Digital Me, or D-I-G dot I-T-A-L dot me
8:48
serves as an online portfolio,
8:53
and as soon as you bring it up it's very visually striking.
8:56
There's a lot to like about it.
8:59
Allison, why don't you talk about the visuals?
9:01
[Allison G.] I thought he did a really awesome job laying out his information.
9:03
There's a clear visual hierarchy going on.
9:06
Right away you know who he is and what he does.
9:09
His work is below, and I'm a big fan of the gridded type of portfolio look.
9:13
But there are some issues that I think maybe he could improve upon
9:18
and make his online presence even stronger.
9:21
He has this kind of hovering effect when you hover over each of his portfolio pieces,
9:24
and it's a little faded out when you first arrive on the page,
9:29
and maybe inverting that inner action with the portfolio pieces
9:35
could draw more attention to his work,
9:38
or maybe just increasing the opacity of these thumbnail images.
9:41
Yeah, you're asking the user to do a little too much
9:45
right off the bat to see the work that they probably came here to see.
9:48
Visually users who visit a portfolio site
9:53
want to see those things, want to have access to it immediately,
9:56
and I know one thing that we discussed was that
9:59
when they click on any of these things, and they all look really interesting,
10:02
but if you click on one, say, this iPhone app,
10:06
you're brought to a portfolio page where
10:10
the first thing you see is the same thing every time.
10:14
It's the same product, and you kind of have to dig around
10:16
and scroll through the different projects in order to find what you were looking for,
10:20
like this one happened to be second on the slider.
10:23
Now, there's a lot of great content down here, a lot of key words
10:26
people are going to be searching for, especially if they're looking for someone
10:29
who can do a specific type of project.
10:32
But it's kind of varied, so if we can find a way
10:34
to bring them directly from what we click on to that project
10:38
and even have a bigger image or a call letter or a link
10:42
to a site or something that would help.
10:46
Because essentially it's the same image.
10:48
Once you click and view more details it's the same image,
10:51
just a little bit larger, so it'd be nice to see some nice detail shots,
10:53
and show all that hard work that you put into your portfolio.
10:57
Yeah, that's some really nice work, and that use of imagery could really help.
11:00
Now on the front end side of things, I think you did a nice job
11:03
of adapting to the screen width and devices,
11:07
so when I viewed it on the iPhone, however, I noticed that you are having
11:11
a bit of a scaling bug, so you need to check
11:13
your viewport meta tag.
11:17
If you perhaps remove the initial scale attribute equal to one
11:19
that might fix some of those zoom bug issues you're having there.
11:22
It might help scale to the device better,
11:25
and I also suggest perhaps be careful and consider
11:27
perhaps using a bolder font because I noticed that what happens,
11:32
especially in the About page, once you view it on a smaller device
11:35
the font starts to get a little bit fuzzy,
11:39
and maybe use bolder font like he's using towards the footer
11:41
down here, which is more legible.
11:45
[Allison G.] And that's a really nice type treatment to try to
11:49
integrate that a little bit more because on the About page
11:51
you have some information about your skills and your contact information.
11:54
Perhaps better organizing that information using
11:59
some of those similar header treatments would be a great type treatment to have.
12:02
One of the things that was nice to see on the About page
12:08
was a clear breakdown of your basic info.
12:11
It's the expertise that you have, location where you are,
12:15
and even your email address, and while we're on it,
12:18
contact information for someone working on
12:22
different technical projects like this, you have to have it.
12:25
You have to have calls to action where people can contact you,
12:28
so I don't know if the portfolio is just for display,
12:32
you just want to show off different projects,
12:36
but if you look up in the navigation and in the header
12:38
there's nothing about contact.
12:41
There's some of the different platforms that you're on, some images and RSS feed.
12:43
Nothing about email or contact me here for more information
12:46
if you want more information about my prices or what's going on now.
12:49
That needs to be in there.
12:57
And it could be as simple as just adding another mail icon or something
12:59
like that or just the phone number or email.
13:02
Something that was really great that really caught my eye
13:04
is this brief about statement that you have right here.
13:08
It's so difficult to kind of boil down who you are and what you do
13:13
in 2 little sentences, and you do it really nicely here,
13:18
and even when you mouse over you see some of the important terms
13:22
that people are going to be searching for.
13:27
And what was interesting is that I moused over,
13:30
and I thought that perhaps if I clicked on these different things
13:34
it would bring me to different places, but it all goes to the same About page,
13:37
so if it was me, I would suggest one of two things.
13:42
Either have a separate link for each one of these areas of expertise
13:45
so if I wanted to learn more about what you covered in mobile development projects
13:51
it would take me to a mobile dev page, have your mobile dev projects,
13:56
your expertise, some of the things you're working on.
13:59
Or you can slice up the About page and have different headers in there.
14:03
I mean, one or the other, but I love this statement.
14:07
What I do wish is that it was consistent as you went to the About page
14:11
because then you get here, and there's another statement, and I was kind of thrown a little bit.
14:15
I saw an image with snow.
14:19
I saw this headline saying something about a snowboarder.
14:21
I wasn't sure what to make of it, but if you can do what Allison mentioned
14:25
and really bring out these areas of expertise in this information about you
14:29
and maybe knock down the amount of content that's on this page--
14:34
it's a little wordy--get right to the focus of who you are, that would help.
14:39
[Allison G.] Speaking of who you are,
14:43
we're going to talk about your personal branding a little bit.
14:45
You have these initials, A.I.L.T., and I don't know if I'm reading out in the right direction,
14:48
but we were trying to figure out what that stood for,
14:54
so maybe just either further explain that
14:58
or maybe using your initials, but the design looks great,
15:01
but it's just making sure that you're conveying what you want to convey.
15:04
Okay, and also with your responsive approach I also suggest you
15:08
consider more break points in your design,
15:11
so I feel that there were areas where certain parts of the site,
15:15
especially in the navigation and in the side bar,
15:18
they were starting to get covered up at certain screen widths,
15:21
so I suggest you take a look at your site in the browser
15:23
and just play with the different resolutions a bit and start taking notes
15:27
when things start to break and when they break and become obscured,
15:30
and then just start a media query to resolve that,
15:34
and you'll find that that will work better.
15:36
I also suggest using an em-based design versus a fixed-width pixel design.
15:39
You will find that your design becomes fluid, and it adapts more
15:44
to devices and screen widths.
15:47
And while we're talking about that, it seems that the thing that's covering up
15:49
your navigation here is a banner
15:53
for being nominated for a CSS award, which is awesome.
15:56
Congratulations on that. That's a really great achievement.
15:59
But the thing is, when you click on that, it takes you out of your website,
16:02
so it's taking people from looking at your work to looking at other people
16:06
who have been submitted for a CSS award,
16:09
so maybe just taking that information--because it's great information
16:12
that you want people to know--and putting it in the About page
16:16
maybe in its own special section once you start to win more awards.
16:19
And if I can offer the same tip I gave to the folks from Scotland
16:23
that would be to make use of your title tag
16:26
so if people are searching for mobile development expertise
16:29
in Denver or Los Angeles, if you're looking for local business,
16:36
then you want to make sure that you really grab those people on search results,
16:39
so in your title tag make sure you include your location information
16:43
if that's relevant to you but especially your areas of expertise,
16:47
mobile development, web, front-end developer,
16:52
and whatever else that you want to focus on.
16:56
That should be in there as well.
16:58
Also, this is more of a personal preference, but the transitions and fades
17:00
between pages and break points might not be necessary
17:04
because you're possibly duplicating some of these transition styles
17:08
and adding some more styles that perhaps slow your page loading time.
17:11
I noticed there was some lag between the break points
17:15
and when you click on a link.
17:17
It took a little time for the page to load and for the content to display,
17:19
and by doing that you're also creating styles
17:23
that your users probably will not notice or see
17:27
because they'll, for example, be viewing it on a mobile device or an iPad
17:30
or just out of one resolution on a browser,
17:33
so they won't necessarily be benefiting from that because they probably won't see it.
17:38
Us designers might notice it because we like to get in there
17:41
and start playing with the width,
17:44
but it might be something that you could perhaps remove.
17:46
I think it was a really nice site.
17:50
I mean, there's so much here visually.
17:52
The visual content is really what's driving this,
17:54
and it's going to be what drives whatever contract
17:58
or freelance work that you might get from a portfolio site like this,
18:02
so again, the visual content is what is king here,
18:07
and I think with some of the suggestions we offered you can
18:11
really put those center stage.
18:14
Yeah, and I think we can all agree the caliber of the entries
18:18
that we received was just top notch, so thank you
18:21
for submitting your work, and each episode of Treeviews
18:25
we will feature different teachers to match up with your projects,
18:29
so if you would like your work to be reviewed on the next episode,
18:32
just drop us a line at treeviews@teamtreehouse.com.
18:35
Thanks for joining us.>>Thanks guys.>>Thanks.
18:39
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up