Building Mobile Friendly Websites with MVC 4 (The easy way)

Check out our other videos http://vid.io/xqZ9
Subscribe to c0deporn http://vid.io/xqZ4

Building mobile friendly web sites or making an existing mobile friendly website is not easy. There are a few ways of doing it and they each have pro's and con's.
In this video, I take you through setting up the mechanics to support multiple devices and how to arrange your content to fit.

We'll cover:
- Different strategies for managing mobile & desktop content views
- Setting up MVC 4 to easily deliver the correct device specific content
- MVC 4 display modes and bundling features
- Quick intro to JQuery Mobile.

---

Closed Caption:

welcome the building mobile sites using
a speedo net NBC
part 1 in this video we're gonna walk to
building web applications that target
desktops
tablets and phones using Microsoft MVC
framework
there are many different opinions on how
to approach building web applications
the target multiple screens some say
that you need a dedicated site for
mobile
that is separate from the desktop
version this is known as the
and a strategy because usually you get
redirected to the AM sub-domain
when you're on a mobile device when any
issues you run into with the and a
strategy
is you end up with two or more sites
that need to be maintained and usually
have duplicate content
others prefer to use responsive web
design which has the call at a single
site that will adapt to many different
screen sizes
responsive design can be difficult to
achieve and usually ends up with people
because %uh this you end up with less
visible content on the screen
but you're still sending the entire page
to the device just because it isn't
visible on the screen
doesn't mean that it isn't there and you
have to be aware mobile devices
and earl or download speeds and
potential data caps well we're going to
focus on in this video
is combining these two strategies to get
the best of both worlds
is important to understand that there
are some obvious differences when
comparing
desktop screens to mobile screens but
there are also some
not so obvious differences were
comparing desktop screens to tablet
screens
when you design a typical desktop web
site you tend to work with a
multi-column layout
with the three column layout being most
common approach these layouts usually
utilize banner images and menu bars but
this design
doesn't really work on smaller screens
when laying out a mobile website
using a single call my own is usually a
better approach
using just one column makes it easy to
scale between differently sized devices
and makes it simple to switch between
portrait and landscape mode when it
comes to tablets
things get a little tricky a tablet tend
to favor the one common approach
comin two phones by then it will switch
to a two column layout
when rotate to landscape mode and only
occasionally will use a three column
layout each other designs has a
different approach
and it would be a mistake to assume that
we could create one page that will work
well
in all three of these form factors it's
not just a layout that changes either
there are other considerations for
example
tapping versus hovering in cooking
consider that
on a desktop people are used to cooking
on small text links for navigation
other mouse is very precise for doing
just that a finger is quite the opposite
on a mobile device people are tapping
with their fingers and thumbs
and a small text link doesn't really
work when you're trying to do that
your mobile from the design needs to
incorporate larger buttons and icons
whenever possible
use a ling Saleh you tap anywhere on the
whole line to activate a choice
not just the actual word that contains a
link a final consideration is hovering
developers tend to use fly outs or tool
tips
now only appear when the user's hovering
over an object hovering as a concept
that simply doesn't exist on a touch
base device like phones and tablets
good s top design is not the same as
good tablet design
and that's not the same as good fun
design the key is to try and optimize
the design
to massive ice requesting the content
and at the same time
not have to maintain duplicate content
in multiple sites and files
redeemable project is very easy we can
simply open Visual Studio
select a new NBC for web application and
then choose mobile application from the
project Emperor options
and you say get screwed
a query and jQuery Mobile set up and
ready to run which
when we do we see a site that's laid out
in a single column
that's ready to be viewed on a mobile
device but the problem is
it is a mobile on the site there's no
desktop version if we're building a
mobile only side
this to be just fine but the coolest
video is to build a mobile from the side
which means we need
now only a small version but a medium
and a large one as well
this is what the responsive design
strategy aims to solve
but in reality it's an exercise in
futility and will probably end up
producing something that doesn't work
well
and any other three but that's okay
because we're gonna go a different route
and use the MVC framework which makes it
very easy to do so let's start over
but this time will start off with an
Internet application template instead
in an application template is optimized
for desktops
but that's fine we can work with it to
make it more mobile-friendly will run
the site
it looks very similar on both the
desktop version animal version
notice that the mobile view has used a
bit a responsive design and refloat
itself a bit to make it look a little
bit better in that form a
most web sites you on mobile devices are
shrunk down to fit the screen of the
device
this one however doesn't that's because
in a way out
we have Ameritech defined the view port
settings WebKit based browsers
use in a majority of mobile phones like
the iPhone and Android will respect the
viewport meta tag
and try to resize and refer the content
to fit the way to the current device
their summer the meta tags that will
cover later in this video
alright is interesting is that might be
we're here to deliver content specific
to the device that is making the request
so let's move on first thing we have to
determine
what type of device is making the
request and for that
will look at the user-agent as you may
already know every time a browser sends
a request to a server
it sends along a user agent string with
the request that informs the server
what application is requesting the
information this is an example a request
made a Google
as you can see the user-agent has some
useful information in it we can use the
information
in the user agent to determine what
device being used before going any
further
we need to get set up so that we can
preview the site as if we were using a
mobile device
doing this manually with real devices
can be tedious and hard
so we're going to install an emulator
that mimics a particular device
to do this we're going to use Chrome and
one of the available Extensions
called mobile tester just open from and
from the menu
click on Settings then choose extensions
and finally get more extensions type in
a mobile tester
and select the extension called mobile
slash tablet device testing
after it installs
you know an icon to the operate corner
from you can click on it anytime when
doing a web page no: open a window
with a new request for the current page
you're on but it was an along
a user-agent specific to the device the
selected what we need to do now
is to make our MVC application capable
of determining which type the device is
making the request and then grabbing the
right views
open up the global a six-mile and added
new method called
initialize to display more providers
inside
will create a new default display mode
using the suffix iPhone
display modes are used to determine the
appropriate views to use
to do this each display mode has a
predicate that invoke to determine if
display mode should be used or not
we set this predicate on the context
condition property
%uh display mode and what do this using
a generic fun
it takes in an HTTP context-based and
returns a boolean
for the phone body will use the get
overridden user-agent: method
and check to see if it's not know and if
it contains the string
iPhone would do the same thing for
tablet
but this time will check for iPad
instead of my phone next
we just need to add a default display
modes to the display my prior
we want to make sure we use insert
instead at when adding our disclaimer
civic election
and this is because we need to add them
to the beginning of the collection
we do this bypassing in zero and one for
the indexes on the answer
if we don't do this and we use at the
test an old would always be used because
it's the first one in the collection on
display modes
and then finally which need to make a
call to our method from the application
start method
he sent a request is received by the
application its evaluated to determine
how that request should be format it
when it's processed
in this case if the conditions are match
for one of our custom mods
than the name in that mode is injected
into the name of the file
so for example if the request came in
for home slash index
on a browser the view engine will look
for index that
CS HTM now but if the request came in
from an iPhone
the view engine will look for index not
found at CS HTM out because the name at
the display mode is injected into the
file name
to view now you may be thinking that
there are better ways to determine the
device
other than manual checking and you would
be absolutely correct
there are plenty of Labor's after to do
this one of them is
51 degrees which can be had from New get
but I wanted to show you exactly what is
going on
and what needs to happen without
throwing in a library into the mix
for this video which is assumed iPhone
and we use the iPhone simulator
all we have to do now is create
device-specific views and we're done
you can run the site at this point both
from a browser and from phone
the site will display the desktop
version on both tell
if no device Pacific view is found to
view engine will look for the standard
view name instead
to copy the index SCS HTML and paste it
twice
rename want to include iPhone and the
other to include I tablet
open the phone
and remove all the content and then add
in h1
with the text this is a phone go ahead
and do the same for the tab love you
now we can run this in 10
our first view is the desktop mode
so far so good but switched to an iPhone
perfect we see our phones Pacific View
letting us know that we're using a phone
to view the page
now the iPad awesome they both work
now that the mechanics are taken care of
we can focus on the content
step in creating a different look and
feel for each device is adding jQuery
Mobile to our project
we can easily do this by installing the
new get package
won't do anything for some mediately but
will need in order to go forward
if you remember when you
and the site as an iPhone we saw the
page %uh said this is the phone
but it still had the desktop Leah this
because we have an updated our device
specific views
to use device-specific layouts but at
this point we don't have any device
specific layouts
to fix this we can do the same thing we
did with the index view
and copy/paste two copies love the
layout and then rename them to include
iPhone
and on tap let's open up the phone now
and examining at the top we have the
styles not render
and scripts to render helpers that are
being utilized these are part of the NBC
4's bundling feature
just in case you're not familiar with
this feature let's go over
in the past optimization website
included reducing the number of requests
made to the server from the browser
and also the size of those requests
techniques such as medication or use to
do various transformations and style
sheets and scripts
like removing white space and very very
name the result was smaller files
you see this in my research is jQuery
where you're offered a regular version
or the min if I version which is much
smaller in size contamination is the
process of combining
two or more style sheets or two or more
script files
so the you reduce the number of requests
to the server and several questing to
individual script files
you now only request one there's a lot
of tooling for these processes
but they've mostly been manual nbc4
attempt to alleviate this problem by
providing you with a simple
built-in way of combining and Mina fine
files through the use of a bundle
through bundling you can simply point to
a directory
and tell that page you want everything
in that directory lumped together in one
file
and NBC will do it for you automatically
however
because we're including libraries such
as jQuery Mobile this automated banking
system isn't going to work for us
we don't want mobile libraries to get
loaded with a dust-up views
so what we're gonna do is create custom
bundles and then reference the bundles
from our device-specific layouts let's
open up the global ASA X again
and add a new method called initialize
bundles
inside
creating new script by no with the
virtual path a bundle slash
mobile JS then will include jQuery
Mobile files
using a wild card and then RG Chris
crips all season wild-card
next will create a new style bundle
with a virtual path of bundles slash
mobile CSS
will include the jQuery Mobile
jQuery Mobile structure and the jQuery
Mobile theme style sheets
next we just need to add them to the
final table
but there's a problem because you're
referencing the min if I versions of the
Style Sheets
the end result won't be what we expect
the bundler
has an ignore list that ignores any
files containing to
men in the file name for this demo will
clear out the ignore list
now we can add the panels to the
collection
finally were at a call to finish
lies bundle method
the switch back to the phone now and
make you suffer new bundles
by replacing what's already there with
our new virtual pass
blasting to do mister
view to use the phone now
as rawness and see what a look
while it doesn't look that good we're
still using HTML from the desktop you
so let's go back an updated to something
a little more mobile-friendly
I won't bore you by typing an all-out
so I just fast forward a bit this page
has more so the same content sections as
the standard layout
but its format it quite differently we
have are our most def container
which is going to represent a peach
inside that we have to do for our page
header
that contains the page title next is a
diff or content terry
which we set up a navigation menu with
home in about links the down here
we render out the body of the view pay
special attention to the date attacks on
the page
header and content gives does a special
tax to give jQuery Mobile more
information about
how to deal with the sections there are
many did it actually could use to
customize a page
I'll go over more them in a bit
now around
phone we get a much nicer looking out
but without disturbing the desktop
version
at this point worse I need to look more
like a mobile site but we're still not
quite there yet
if you notice when we scroll the site
the headers cause of the page into
Spears
we can address this by adding a day to
position tactic header
dismayed to head or stick to the topic
page when you scroll up or down
now and leave your site and scroll the
header stays put this is an example of
how easy it is to work with jQuery
Mobile and its built-in features
this brings us to our next task making
the visuals a bit nicer
our menu is looking a little plain and
dated we can fix this by adding a few
additional
jQuery Mobile tax on the unordered lists
why data-role and a day to inset
attribute the data role will be ListView
and will set the data in set to true and
one last touch
missed analyst divider we do this by
adding a new list element and giving it
the list
divider data-role this as a new list
item
makes it stand out as a header it's a
good way to visually break up an
unordered list
and you can add as many this dividers as
you want let's reminisce
and check out changes
it's looking much better than it was
setting ListView as the data role will
convert the list elements to a nice
layout
that spans a screen with anti-mouse and
to be clicked as if their buns
not just links this means that users
will have more real estate to cook it
with their finger
center trying to click on a text link in
other words in makes them think a
friendly
sending data and set to true adds to the
appearance
and help set it apart from the rest the
page content the list items will not
take up the entire screen with
and receive some rounded edges you can
play around with the setting to see as
different effects
looking at this page their menu is kinda
taking up a lot of space
not only that there's no back button if
you decide in a browser
the user could use the browser's back
button but this would be possible for
say was in full screen
where that mode welcome back to the menu
in a bit
let's get a home and back buttons
working since there will be times when
you won't want one
or either these buttons to appear we're
going to make a configurable
in a phone now will define two variables
to keep track of the options
will pull the settings in from the back
will make the default true for now
but you can make them fall so you want
this way each action
or device Pacific View can control if
the balance sheet showing a
inside your head around
I'm well and the conditional statements
for the back and home buttons
we use regular links belmar come up with
jQuery Mobile specific attributes
by setting the date a relationship
attribute to back
we're telling jQuery Mobile to keep
track the current stack pages
when the user clicks on the back button
it'll take them back to the previous
page
in the stack
the transition direction and eye contact
decorate the button a bit more and tell
it how to behave let's run this and see
how it looks
awesome we have back and home buttons as
they fix with the header
on home page we really don't need
either these buns so we can open up the
index page for the phone
and just turn them off
now & view the site the buttons are
on the homepage but the comeback on the
About page
at this point since we have a home
button at the top we can go ahead and
get rid of the Home menu item
since is kinda redundant let's hold off
on that instead
let's take a minute to go over the
jQuery Mobile sections
jQuery Mobile uses a fairly simple
structure for defining its page elements
by using data-role tags: on ideas they
define these basic areas
page header content footer and now bar
there are other areas that are defined
by these are the basic ones I use most
often
the page section is the main section on
the document that jQuery Mobile uses
to wrap around all the following
sections typically it will include a
header
content and footer section but only the
content section is actually required
the page on itself is a natural choirs
however if you don't supply one
framework will supply one for you so
it's kinda breast factors
just going to find it anyway that way
you don't get any unintended side
effects
the header section contains the
information I should be shown in the
header the peach
the optional data position actually you
can make this element stick to the top
when a user scrolls the page a space is
limited so the title would be cropped if
it doesn't fit
we can put any HDMI we want here but
best practices use in h1
for the title or we can also replace
this with an image to make a fancier
if you an Ubuntu the header div to
automatically move to left side
if you add a second pun it will move to
the right side on Mac
you probably don't want more than two
buns as any others will move to the
second line and make the hair bigger
if you do want more than two use a nap
or instead
the content Section is where you put
more secure content for the most part
you just have to render body action here
the footer section
is very similar to the header except
maybe a little more flexible we can but
more than two buttons here
and I'll be added in line one after the
other not left aligned
and right align left in the header by
default the footer isn't for management
so you may have to add some attacks to
make it look nicer
the NAB our section is a great place to
put your navigation items
if you think about normal desktop for
Windows application design
we tend to use a lot of tap controls to
group together related temp agencies
this section provides you with a similar
way have linking those pages together
easily
now we've covered the sections
let's go back to our menu entered into
an outdoor to do this
which aims to nab element to it give and
apply the day to relax for you
with the value of now bar and then we'll
give it the
data seem I've be next we need to remove
the unordered list attributes since we
don't wanna lick you anymore
then go ahead and delete the list a
better together now bar
to be at the top of the page and stick
their we need to move our menu code
outta the content Section
and into the header section now we can
run the site
in CR changes
at the time
nice-looking navigation bar
if you want you can move the menu code
to the footer and have the now part the
bottom in said at the top
if you want both you can move the map
bar bits into a partial view
and use a partial helper method to
render it out
let's go over some as many times we
talked about earlier the viewport meta
tag we saw previously
is fairly simple it as a web page to
always try to use the way to the device
that is requesting the page
if you go to website it doesn't have the
stag and the site is format for its a
1024 by 768 the mobile browser with
scale it down
and thus I would be very tiny by
specifying device which has a value
the mobile browser will reformat to fit
the device with without changing the
scale
now this really can only works if you
have a site that structured correctly
otherwise the content may get skewed
there are few other attributes
on the viewport actor you can use if
needed user scaleable
determines whether you allow the user to
pinch soon initial scale sets the size
of the page when it loads
and the maximum Scale defines how much
the user will be a busy man
both initial and maximum scale
activities a value from 0 to 10
of course you can also set the width and
height to the content using the
width and height attributes
the Apple mobile web app capable and the
Apple touch fullscreen can be set to Yes
or No the star do much for Norma
browser viewing but they come into play
when a user such a shortcut on their
homepage
by using an Apple device when set to yes
the website will run in full screen mode
just like a native app word the address
bar in buns will be hidden
the difference between the two is when
using
Apple mobile web app capable you can
also use the Apple mobile web app status
bar style meta tag
to change the color the status bar the
shortcut icon
and icon meta tags allow you to assign
an icon to your site
this icon will appear at the user sets a
shortcut to your site or add to bookmark
to it but these don't work so well and
mobile devices
so for mobile devices you can use D
Apple touch icon Meditech
okay so we're at the end the video
by now you should have a good grasp on
what you need to do to accomplish
turning an existing NBC website into a
mobile-friendly website
J quemoy is important part other mobile
experience
we didn't even scratched the surface so
I suggest heading over to the jQuery
Mobile Web site
and reading up on the documentation want
a man want to start with
are collapsible containers and to have a
look at seeming
be sure to look at my race for detecting
devices and the capabilities
you don't want to do all that work
yourself always keep in mind the
complexity of your solution
use partial views impossible to reduce
duplication
keep file separate and don't overload
pages with content and functionality
for multiple devices mobile devices
screens and capabilities
are changing very rapidly make she keep
up to date with what's new season
deliver the best experience your users
feel free to send me any questions
visit my blog and subscribe to my
YouTube channel thanks for watching