ASP.NET MVC 4 - How to Create Mobile and Desktop Versions of a Website - Part 1

This video walks you through how to create both a Mobile and a Desktop version of a Website using ASP.NET MVC 4 using built in MVC 4 features that make it easy to do so.

Source Code: http://www.digioz.com/downloads/tutor...
Website: http://www.digioz.com

---

Closed Caption:

this tutorial I will walk you through
how to create a website in mvc4 that
supports both regular desktop version
and a mobile version to begin i will
create a new project a new NBC for
project and i will call this the mobile
site test a basic layout of fines
ok so let's start by adding a few things
here
so I'm going to act two new folders one
of them i'll call desktop and the other
1i will call mobiles and inside of the
desktop folder i don't have a CSS folder
and i will have an images folder and the
same with the mobile versions will have
a CSS and images
ok so here I start by adding a
stylesheet
ok start with a text so we will call
this
and let's call this style that CSS
and and here I've got a style that I've
prepared a stylesheet
I'm just going to copy and paste that
over
it doesn't matter how your design looks
it really is just a matter of having any
style so next I'm going to copy some
images in
and i will copy those from a different
folder
so these are all my images and I had a
man and that's pretty much all my
desktop stuff so next is the mobile
version again going to add my style
sheet and inside of here after the
different template
and
here is so i got my stylesheet now and
I'm going to do the same with the images
from my mobile style so and existing
item images just two of them
which we have not great so now that I
have all my apps images in style sheets
I'm ready to add a line of code to my
global deus ex
okay here right after the area
registration register all areas and the
application start method of the
global.asax starts ES File i'm going to
type display modes equals to this play
mold provider and we will need to add a
reference
using web . webpages reference that
instance that malts
so what this does is enables the .
mobile view extension which we will use
to build our mobile application so
next india view view shared i'm going to
copy my layout
and paste it and rename it to the same
thing that underscore layout that my
wall that CSS HTML so what this will
give us is it will give us a secondary
layout called just which is called just
for the mobile version of our
applications and then of course I've got
the regular version which is this one
here so the next thing I'm going to do
is I'm going to change this bundle here
by going to the bundle configuration
file and I'm going to call it something
else i'm going to call it
CSS desktop and point to my content
desktop CSS site that CSS
and I will also add a new bundle and
college CSS mall and here i will replace
it with mobiles and again they will go .
to mobile CSS style
which we already created save that
alright so starting with the regular
layout let's bring in our style from our
template
on the regular layout so here I'm going
to first change the doctype because my
style requires it
and here
my HTML has an attribute
and
rest of it i'm just want to pretty much
copy in here
yes
and this is a free template that i
downloaded I did not write this template
so all right so that part of it is fine
our style sheet now is called CSS
desktop
alright so that lets see next we're
going to put the actual contents under
body
and to do that i will have to go to the
controllers and create a controller i
will call this home
empty MVC control is mine
and here i will add a view index is fine
again
this is where all our content is gonna
go and I will immediately notice that
there's now a view views home directory
with an index study CSS HTML and yet so
i'm going to copy this guy and paste it
in here and call this one and X top
mobile that CSS HTML and that's going to
be our mobile version so first our
regular versions
I have some content prepared here which
is which i'm just going to copy
there we are
ok and that should really be it the last
thing I should double check is to make
sure there aren't any images
to start okay so we're good now let's
run this guy and see how it looks
ok so let's run this thing see if we got
our desired outcome but it looks like we
didn't it looks like none of our style
came in the way it's supposed to
so in the interest of timeless just
paste the direct link in here to the
style sheet and forget about bundles for
seconds
and run it against ok so it works and
again I don't approve of this style in
any shape or form this I chose it
because it is so extreme in terms of
contrast with the mobile version that it
really helps me make the point here so
our regular the desktop version of our
site works so let's not work on the
mobile layout
so our mobile layout is pretty similar
and so we're going to do something
similar here
here's the doctype HTML mouth
tag
hermetic
also are you poor tech
okay we'll leave the title as it is here
again I'm just gonna do away with the
bonds for
the sake of simplicity and uh just going
to put in here till the content and
mobile CSS style which is what we want
and that's really all the changes i have
to make to the layout
now in the home
view of my homepage i'm going to copy
and paste our mobile versions and and
again i did not create this mobile style
this is something that I grabbed from
the web and here's my mobile version now
to test our mobile version however well
first let's run our regular version
make sure our regular version works
stone
ok so now i'm going to run an emulator
and this is called electric mobile
studio on it's no longer free but it's a
an easy way to test your mobile version
of your website on a windows machine so
launch new instance of an iphone and
then i'm going to copy and paste the
link that I had here and the
browser hopefully fucking get it up haha
looks like we're pretty close here with
our mobile versions
so for the image in the top so let's .
this guy to the right place
dot slash do
alright let's . to kill the content
m images
yeah just right this way
there we go alright so here's our mobile
version it again it
looks nothing like a regular desktop
version so if i were to put this site by
site here with our regular version
they look not nothing like each other
and that's basically the point they
don't have to look like each other but
with a few simple changes we basically
now support both mobile version and a
desktop version of our website i hope
you found this tutorial useful please
subscribe and leave comments or
questions if you have and stay tuned for
part 2