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
Preview
Start a free Courses trial
to watch this video
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