Bummer! You have been redirected as the page you requested could not be found.
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 3: Designing Restaurant Websites and Coding Tips for iOS
25:46 with Allison Grayce Marshall, Dan Gorgone, and Ben JakubenIn this episode, Ben, Dan and Allison review two Treehouse member websites and one iOS app. The first website is a restaurant website, the second is a portfolio site. The iOS app is a simple recipe app.
Websites reviewed in this episode:
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
[treeviews]
0:02
[Narrator] Welcome to Treeviews--
0:04
the show where Treehouse members submit their work,
0:06
and a panel of Treehouse teachers offers feedback.
0:08
Here is today's panel.
0:11
[Dan] Hey, everyone! Welcome to Treeviews!
0:13
It's the show where you--the Treehouse member--
0:15
submit your projects, your website, your app,
0:18
and a team of Treehouse teachers evaluates it
0:22
and gives you feedback to help you out.
0:25
Let's introduce ourselves. I'm Dan Gorgone.
0:27
I teach marketing and business.
0:29
[Allison] I'm Allison Grayce, and I teach design.
0:31
[Ben] And I'm Ben Jakuben, and I teach android development.
0:33
[Dan] Alright! So let's get started.
0:36
Our first submission here is from Drew Templeton.
0:38
It's for the Barcito Restaurant in Chicago,
0:41
and that can be found at www.standandeat.com.
0:44
Barcito is a restaurant located in Chicago,
0:47
and they've come up with this website.
0:50
They'd like to get our feedback.
0:53
I know we had a number of things that
0:54
we noticed, both positive and negative.
0:56
For me, first, when I'm looking at a restaurant website,
0:58
I need to know basic information about it.
1:03
Usually, I'm looking for the address, the schedule.
1:05
That stuff is right there.
1:08
I love that--the little info box.
1:09
Usually that stuff gets buried on other websites,
1:11
but they've got the address, phone number--
1:13
even the dress code--along with the schedule,
1:15
and some social media information.
1:18
I think this is a great plus.
1:20
This really helps me when trying to figure out
1:22
the basics about Barcito.
1:24
But something else I noticed
1:27
was that there is a large dog
1:29
in the middle of the homepage, and it looks cute.
1:32
It almost looks like the Taco Bell dog from years past.
1:36
I'm not sure what to make of it.
1:39
My first thought from a web design
1:40
and marketing standpoint was, wow,
1:42
this main area--this really important real estate
1:44
on the homepage is being devoted to this guy,
1:48
and I kind of don't know why.
1:50
Because what I would really like to look for is
1:52
this stuff over here--the food and drinks.
1:54
[Allison] Yeah, and while we're talking about the
1:58
food and the drinks and all of the imagery,
1:59
they're in black and white,
2:01
and when you're looking at food,
2:03
it doesn't look as appetizing
2:04
when it's in black and white.
2:06
But I see why he did this really cool effect.
2:07
It's kind of interactive. It's fun.
2:11
But when I actually inspected the code,
2:13
he has a background image
2:15
applied to an empty div, and I think a better way
2:18
to do that--since it should technically be inline
2:23
because it's not a background image--
2:26
is to use some CSS3 filters that allow you
2:27
to desaturate the images.
2:31
[Dan] Well, speaking of the pictures of the
2:33
food and drinks, it's a great point.
2:35
You love to see high-res pictures of really appetizing food,
2:37
great-looking drinks, and they actually have
2:41
a photo gallery of the food and beverage.
2:44
My first thought here, though,
2:46
was that these links here--to the galleries--
2:48
are so easy to miss because there's no contrast here.
2:52
Again, you have to hover over to get that effect--
2:55
that there's something there.
2:58
I can read food and beverage,
3:00
but the second one is hard to read.
3:01
It says, the space and the scene,
3:03
and it's tough to know what that's about.
3:04
Maybe it's pictures of the location.
3:07
But when you drill down into the food and
3:09
beverage gallery page, here's what you get.
3:12
For me, the first thing was that there's no text.
3:15
It's all pictures, which isn't necessarily bad--
3:19
though from an SEO standpoint, I'm a little worried.
3:22
I'm looking for the name of the restaurant,
3:25
that site ID which isn't there.
3:29
This looks like maybe the page broke,
3:30
and it's not showing the header or something.
3:33
The other thing I noticed though is that these
3:34
images are not high-res.
3:37
They're pixelated, which if you click on any
3:39
one of them, you're going to see a gorgeous,
3:43
high-res picture of the drink, or the food, or whatever.
3:46
This is what I should see on that gallery page, so what happened?
3:49
[Allison] The reason why it's doing that, Dan,
3:53
is that those images are thumbnails, and they
3:54
have a width of 100% set on those images.
3:57
And what happens is, it's blowing those
4:02
150 x 150 images up to about 400 pixels--
4:04
whatever the size of its container is--
4:08
and maybe a better way to approach that
4:10
would be to save-out the images a little bit
4:12
higher res and set a max-width of 100%,
4:15
so it's never getting larger than the actual size that the image is.
4:18
[Dan] And for me, get the names of the drinks--or whatever they are--in there.
4:23
It would be helpful for people to know--especially if you're showing food--
4:27
what are these things.
4:30
Not necessarily what's the name--everyone's got
4:31
a cute name for whatever dish they have--but what's in it.
4:33
People who come to places--if they're allergic to certain things,
4:36
or they want to know information about that--
4:40
maybe it's in the menu, maybe it's here.
4:42
It's tough to know. There's information in a number of different places.
4:44
But, if we go back to the home page,
4:47
the last thing I wanted to mention--
4:50
what I would also be looking for, if I want information about a restaurant,
4:52
is are there any discounts?
4:56
Is there anything going on that would compel me to go?
4:59
Information about events or discounts is buried.
5:03
It's below the fold when you load the page,
5:08
and it's down here on the lower-right-hand side under 'Happenings.'
5:10
That's fine. What I would be really interested in seeing is a calendar of events--
5:14
more than just one event and one discount.
5:20
If there was more to offer, that would be really great.
5:24
[Allison] Like when happy hour is, or specials.
5:27
[Dan] Exactly. Like this stuff here.
5:30
It would be really great to have it, but this is all embedded in an image and it's buried.
5:33
This is something that a lot of restaurant sites--
5:39
a lot of websites period--battle with is
5:46
what to show on the homepage.
5:49
What are the things that you want to highlight that are very interesting?
5:50
But you have to have a balance when you are serving up content.
5:53
The content--when happy hour is, what's on the menu, what are the times,
5:59
what are the social media links, some great pictures of the food--
6:04
we want to serve all of that up,
6:08
and we want to give users easy access to it.
6:09
[Allison] There's one more thing I want to mention before we talk about the code.
6:12
If we scroll up here and click on one of the menu items, it's actually--like you said--
6:15
it opens up a PDF.
6:21
All of this could totally be re-created in a table inside of the actual layout
6:23
or if your AntiTable's moving another way.
6:31
You could totally do that inside of the website,
6:33
and I think that taking the time to actually do that would help with the usability of it.
6:37
Ben, do you want to talk a little bit about the code?
6:42
[Ben] Well, yeah, you guys have touched on the links
6:45
and how opening each of these links opens either a PDF
6:46
or the corresponding page in a new window.
6:50
And from a user-experience perspective,
6:52
that's really kind of tricky both on a regular computer and a mobile device.
6:55
If you're opening a new window for each click,
7:01
that's getting the user into all of these different tabs or new windows on the phone browser.
7:03
Then it's just harder to get back to the homepage
7:09
and get back to that most important information that people are probably after.
7:11
The first thing that I did when I looked at this was I opened up the developer tools
7:15
in Google Chrome, and right away I saw that there were four errors in the JavaScript--
7:20
very minor, but it's just one of those things you want to check and see--
7:26
and they were all related to the social integration of Twitter.
7:29
So, here on the homepage, Dan mentioned how some of the social information is
7:34
right at the top with the Twitter user name and with this Pintxo Twitter feed.
7:39
But down at the bottom, they have this cool little box on the left which allows you to
7:42
Tweet at them and enter a contest to win a discount on a drink or food.
7:48
Behind the scenes, they're using a plugin from Twitter called Twitter Anywhere.
7:54
Twitter's been changing some of their rules and API rules lately,
8:00
so this is probably something that was put in place a little while ago before the rule changes.
8:05
Twitter now recommends that
8:09
you use a new set of tools they provided called Twitter Anywhere.
8:11
[Twitter Anywhere] [https://dev.twitter.com/docs/anywhere/welcome]
8:15
If you go to the Twitter website--the developer website--
8:16
and take a look, there are some really easy-to-use buttons that you can customize.
8:18
You get these buttons where you put in--
8:23
you can customize the text that appears in that box, just like we saw on the page.
8:26
You can customize the hashtags and things like that, so you can automatically fill it.
8:29
You can get the same functionality that you're getting, but you're going to get rid of
8:33
the Twitter Anywhere JavaScript library--which is one of the errors that we saw--
8:36
and you're going to get rid of the Twitter Anywhere, which is
8:39
no longer recommended for use by Twitter.
8:44
I also took a look at how the site responds on the phone.
8:47
I'm a mobile developer, so that's near and dear to me.
8:51
The responsive element of this site is fantastic.
8:53
The site scales really well on the browser.
8:56
It scales down really well to the phone, so it looks great.
8:58
It moves around these divs so you get the most important information at the top.
9:01
Again, like Dan said, if you hit it on your mobile device, you probably want to know--
9:05
Is it open? How do I get there?
9:08
That part of it is really good.
9:10
But, the same thing with clicking the links--opening PDFs on a phone is really a problem.
9:13
Some people might not even have PDF viewers on some of their phones,
9:19
so again, if we get that into HTML, that could be a big win.
9:22
On the images themselves--the gallery is a 3x3 gallery, or a 3-column gallery.
9:26
On the phone, that part isn't responsive.
9:31
That still scales down to 3 small thumbnails.
9:34
That's not too big of an issue, but that's a place where we could maybe move them around
9:37
into larger thumbnails that they can scroll through and click into again.
9:40
That's about all. Overall, again, you mentioned most important information.
9:44
It's a good code.
9:49
There's some good practices followed with the way they load all their JavaScript at the bottom.
9:51
The responsive elements seem really well-designed.
9:54
[Allison] Overall, it's evoking a really awesome brand.
9:58
I really love the way that it feels, and I think it's just about prioritizing that content
10:00
and making food really the forefront, since it is a restaurant.
10:05
[Dan] They clearly have a great personality. They have a sense of humor.
10:08
Let's have that come out with the content at the same time and compel people to
10:12
go to this place, check it out, enjoy the food, and then they can start sharing on social media.
10:17
Alright. The next project that we looked at is from Stephanie Schechter.
10:22
I hope that we're saying that right.
10:28
It's her personal site--portfolio site--well, really professional site, I should say.
10:30
[Stephanie Schechter] [http://stephanieschechter.com]
10:34
She is a strategic, branding, and design consultant.
10:36
This is her site sent to us from her and Graham Davidson.
10:39
Again, first impressions--really positive here.
10:44
Love the typography. Love the colors.
10:49
It's very easy to look at, very easy to understand who she is, what she does,
10:52
and really why we're here.
10:56
If we were coming to this site, it's probably from a personal recommendation,
10:58
maybe from LinkedIn, some kind of professional connection that's going to drive us here.
11:03
As soon as we get here, that scent of information is going to be very strong.
11:07
You see what's here. You totally get it.
11:13
Now, the page size on a big screen like this looks--I'd say it looks perfectly reasonable.
11:14
However, if you're looking at it from a large monitor,
11:22
the area that's used by the website and these elements is very small.
11:25
It's almost like on a large Mac--a Thunderbolt monitor for example--it's about 1/6 of the area.
11:30
It shouldn't be that way. It doesn't have to be that way.
11:37
[Allison] A max-width of 621.
11:41
It is responsive, but it's at 621 which is pretty small. It could be bigger I think.
11:44
[Dan] As you start drilling down and looking at some of the different pieces of information here,
11:50
you immediately see that there is some animation happening.
11:57
There are some interesting transitions that are going on once you start clicking around.
12:02
This does not exactly behave like your everyday, average site.
12:07
That's something that was a bit--
12:13
I have to say, it made me a little dizzy going from one page to the other.
12:17
If you just see what Ben's doing--just clicking from page-to-page--
12:23
you're going up and down, you're going left and right.
12:27
It's almost like this big, giant grid that you're sort of navigating,
12:30
and I wish I had more control over the simple scrolling aspect of the information.
12:35
As I was going through, I just felt like I was working so hard to find some stuff.
12:41
Not only is the navigating difficult, but the screen size is so small,
12:46
there's limited content with each view.
12:51
For me, it's sort of like the restaurant website.
12:55
There is some great content in here, and I want to see it,
12:59
but I feel like I'm working too hard to get there.
13:03
[Allison] I personally love the attention to detail here with the typography,
13:06
and if you go back to the homepage,
13:13
there's a really nice use of the sans serif and then the serif fonts down there.
13:14
She really is calling out the right words.
13:21
It's just really nice, and I think this font size I actually prefer more
13:23
than the one on some of the internal pages.
13:28
Go big or go home.
13:30
If typography is what you're featuring, then I think that you should do it even more.
13:31
I pulled up a little bit of an example.
13:37
If you go to Trent Walton's website--he's like the master of typography.
13:40
Look at how much he uses that real estate.
13:44
[Trent Walton] [http://trentwalton.com]
13:46
He doesn't have any color on here. Sometimes he does.
13:48
It changes every time he has a new blog post.
13:50
You can just see his attention to detail with the lighting and the tracking.
13:53
I think if you're going to make typography the only thing that you're featuring on your page,
13:57
on your website--no pictures, or imagery, or textures--that it has to be precise.
14:03
[Dan] And while we're here on this site,
14:09
another thing that you'll notice is--if you don't mind scrolling down again, Ben--
14:10
as you go through these different sections, there are pictures here.
14:14
There are examples of what he's talking about in each section.
14:18
When you go back to Stephanie's site, in each section--
14:22
where she's describing her expertise, and what each concept means to her,
14:25
and how it guides her work--there are no examples there.
14:29
There are no visuals there to go along with it, which was another thing that's tough.
14:33
People just don't want to read on websites.
14:38
They don't mind reading as long as there's something visual to look at.
14:40
And when you're a visual designer--I mean, you've got to have that too.
14:43
[Allison] And they're digestible--the amount of content, and that's nice too.
14:46
I think you're right--that maybe having some examples or even just some iconography--
14:50
something to kind of visually break up the rest of the website.
14:55
But if you go to the recent work, it's kind of squished in to this little box.
14:58
I think that breaking out of that carousel image and then having your work there
15:05
on the recent work page would be more ideal because you already have different functions
15:12
of arrows going on which is kind of interrupting usability a little bit.
15:18
These arrows only affect what's inside of that container, but on the other pages,
15:22
those arrows actually take you to different pages of the site.
15:28
I think introducing different actions with the same icon in the same thing
15:31
is going to cause a little bit of confusion with usability.
15:37
[Dan] If we just made the page bigger, we wouldn't need this sub-navigation.
15:40
[Allison] You're such a marketing guy. Make it bigger.
15:46
[Dan] I'm just saying. Make it bigger. Bigger! Bolder!
15:48
[Allison] Making it bigger--the logo. I don't know where the logo went.
15:50
[Dan] Right. Where did her name go? That's what this whole thing is about.
15:56
[Allison] I think maybe having that up here, above the nav--
15:59
I know that creates a nice little block of text--you'll have to find something else to go there--
16:02
but having your name in their face--that's why they're here, right?
16:07
That should be something that's always static
16:12
and always there for them to know where they're at.
16:14
[Ben] You touched on the scrolling and how it affects your navigation,
16:17
your user experience on the site.
16:22
Again, going back to the mobile side of it,
16:23
this is a responsive site, and it scales down really well to the phone.
16:25
The fonts and the paragraphs all come down.
16:29
It's pretty good on the browser,
16:33
although it does get clipped with a few of the media queries there.
16:34
On the phone it looks pretty good, but you can scroll on the phone.
16:36
You've got this arrow at the bottom which is actually a little bit hidden
16:41
on this view of the monitor.
16:44
Depending on your view size--depending on how tall it is--some of the content is clipped,
16:46
and we've got some room to play with here, so there's another area
16:52
where you can maybe try and match different devices.
16:54
Same thing on the phone--the arrows still work as they do here--but you can also scroll up
16:57
and down which, from a user perspective, is a little more intuitive--it's what people are used to.
17:03
It's a good fall back to maybe enable that as well.
17:07
There were a couple of small things here that I thought were room for improvement.
17:11
With the media queries, which we just talked about, there's just a little bit of clipping going on,
17:17
so if we can make that just a little more fluid.
17:21
There was a hitch here.
17:24
There are two media queries--one at 1024 and one at--I believe it's 980.
17:25
The font size changes. It's three different EM settings there.
17:32
It starts out at 4.2, then it goes down to 4.0, and then it goes back up to 4.12.
17:36
This is for her name at the top--the Stephanie Schechter part.
17:43
As you're resizing it in the browser, you can visibly notice that it bumps down briefly.
17:45
That's actually a bigger media query there.
17:52
[Dan] I don't see exactly why these different EM settings were used
17:54
for those specific media queries.
17:58
It seems like maybe it was just playing around with different ones,
17:59
and it made it into the final product.
18:02
It's probably something that you could just clean up and pick one setting for all of those
18:03
and have it go through.
18:07
[Allison] Really quickly, while we're talking about that main header.
18:09
I would suggest that she check out slabText.
18:12
It's basically a jQuery plugin that lets her have big, bold, responsive headlines
18:16
like she has here. [slab Text] [http://www.frequency-decoder.com/demo/slabText]
18:23
And FitText too--I'm totally talking about Trent Walton this whole time here.
18:26
He uses FitText at the top for all of his major headlines to have them scale fluidly.
18:29
All you have to do is apply a unique ID to the headline, and it scales with the view port.
18:34
Instead of--like you were saying--kind of setting different EM sizes for each breakpoint,
18:40
just having one that scales with the whole view port would be more ideal.
18:47
[Dan] In the end, just like Barcito, what are we talking about.
18:52
We're talking about a website that has really great content in there.
18:56
It's the type of content that's going to compel people to take action--
19:00
whether it's I want to go to this restaurant in Chicago,
19:04
or I want to do some work with Stephanie--it's all in there.
19:06
It's about bringing it to the surface, providing some better accessibility to that content so that
19:11
there are fewer steps to take, there's less effort on the user side,
19:17
and with some more calls to action to drive them to the contact page,
19:22
she should have more customers in no time. I mean, that's what it seems like to me.
19:27
[Allison] Kind of a fun story. Graham is the developer, and Stephanie was the designer,
19:33
and they actually met from the Treehouse Facebook group.
19:37
[Ben] Nice. [Allison] Kinda cool.
19:40
[Dan] Ben, did you have one more project that you wanted to cover?
19:42
[Ben] Yeah, it's kind of a neat one.
19:43
It's something we haven't done on Treeviews before.
19:45
A student submitted an iOS Objective-C project that they did for one of their classes,
19:47
and they just wanted some feedback.
19:52
Her name is Monica Peters, if I'm saying that right.
19:54
She's got a project here, and she shared with us, put the source code on GitHub,
19:57
and she actually created a video.
20:04
I think it was for her class, but it just talks about what she did and some areas for improvement.
20:07
I thought she had some really good things.
20:11
The project itself is very well done, and the areas that she wants to improve on
20:14
really show that she knows what she wants to get out of it
20:19
and where to go next with her education.
20:22
I actually had a few notes about the code itself I thought might be helpful for other people
20:25
getting started with iOS development.
20:30
I'm going to bring up the project here in Xcode,
20:32
and if you haven't used this before, if you haven't done iOS development,
20:35
Xcode is the program that we use to write our Objective-C code for iOS apps.
20:39
I've got the code here--the app running in this iOS simulator.
20:44
The idea of the assignment was to create an app that shows this table view controller,
20:49
and that you can click on for details, and that you can edit and remove--things like that.
20:55
Just a couple of high-level points here.
21:01
As we're going through--again that Monica pointed out that she wants to improve on.
21:07
For example--and these are--some of them are smaller details,
21:12
maybe some best practices that you might not have run across before.
21:16
She's using a universal app design--meaning that it runs both on the iPhone and the iPad.
21:19
It's the same code base, but what you do is,
21:26
you supply some different layout files to make it run on both, and you just switch the layouts up.
21:29
She's got it working pretty well, but she went about it in a kind of a different way.
21:33
There's a template provided by Xcode. It's called the Master-Detail View.
21:38
It basically does exactly what she wants in this app.
21:41
It lets you select on an item in a list, and it's kind of like the email client for the iPad or the iPhone
21:45
where you've got a list of items, you tap on it, and it shows all the details on a tablet,
21:51
but on a phone, you tap on it, and it takes you to another screen.
21:55
If you look at the Master-Detail template, you can get an idea of the way Apple recommends
21:59
setting up these view controllers and getting your data to populate
22:05
and share between the screens.
22:08
I had a few notes about the individual views.
22:11
Let me open up--let's see, was it the view controller I think?
22:14
This is a very minor thing. It doesn't actually affect the code in this case.
22:18
What happens here is this custom view controller that she wrote
22:23
is overriding the parent UI view controller.
22:26
As it's loading the screen on the phone, it calls a certain set of methods,
22:29
and this one here, called viewDidLoad--
22:33
the common convention is to actually move the calls to the superclass
22:36
as the first line in the code.
22:41
Instead of here doing your work and then calling the parent method,
22:44
you would want to do super viewDidLoad and then run your custom code afterwards.
22:47
It doesn't affect your code here, but there could be cases where you want to take advantage
22:54
of the work that the parent is doing before you run your own custom code.
23:00
The other thing I wanted to point out is
23:04
she's using what's called the UI table view controller for the main data.
23:08
I'm just going to open up the table view controller code.
23:13
If I open up the header file, we see that it's implementing the UI table view delegate.
23:17
There's another protocol we use often with the UI table view delegate
23:22
called UITableView DataSource.
23:27
What that allows you to do is take your data source and conform to this protocol
23:29
so that it works really well with the UI table view controller,
23:35
and it lets you access your data in a more robust way.
23:38
If we look at how she's implementing her data--and again, this is something she's aware of.
23:42
She pointed out in her notes that she wants to improve it,
23:45
so I'm just giving some suggestions on one way to go about doing that.
23:47
She's got the details here about the food.
23:52
This is a controller about different types of vegan meal options.
23:56
Basically, she has a couple of different arrays--here we go--
24:02
that are all related that tell the type of food she's looking at on the list, the vitamins in that food,
24:05
and then what she calls the food item tips.
24:13
Right now, this is kind of a fragile architecture because she's got three separate arrays,
24:16
and what ties them together is the key--the index in the array.
24:20
The first item--index zero--is apple, vitamin C, and whatever tip corresponds it.
24:24
Now, the problem here is if you want to change any of this data,
24:31
you've got to make sure you're doing it in the right place,
24:33
and that if you add or delete, you have to add or delete to all three lists.
24:35
If you use this table view--this TableView DataSource protocol--
24:39
then you can also create a custom object which contains all this information.
24:44
So if your custom object has the food item, the vitamins, the food item tips,
24:48
and the picture of the food--because right now she's got the picture displaying as well--
24:53
then you can build that into one custom object, make an array of that object,
24:57
and then use the data source for the table view, based on that array.
25:02
Again, that's just the best practices from Apple.
25:06
It's a common convention you'll see.
25:08
I'm sure there are plenty examples that you can find online,
25:10
and it's something that Amit is going to cover soon in our iOS classes.
25:12
[Dan] Alright. Well, we want to thank Drew, and Stephanie, and Graham, and Monica
25:15
for submitting their projects today to Treeviews.
25:20
If you are a member out there, and you have a project that you want to submit as well,
25:22
be sure to email us at treeviews@teamtreehouse.com,
25:26
and we'll see if we can get it on the show.
25:30
[Allison] Sounds good! [Dan] Alright! See you next time everyone!
25:32
[Ben] Thanks everyone! [Allison] 'Bye!
25:35
[Narrator] If you'd like your work reviewed on our next episode,
25:39
drop us a line at treeviews@teamtreehouse.com.
25:42
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