Saturday 29 September 2012

Orchard CMS - A Responsive Site From Start To Finish Part 2 - Starting with Responsive Headers

Introduction 

Welcome to the second part of this set and I'm impressed you got to part 2 as that's more than I anticipated....

You may remember from part 1 we set the scene and also got code gen working and the correct zones are all on and we are ready to go.  But before I go into the next part, I wanted to explain my set up as that maybe pretty important to people out there.

At present, Orchard seems to be on a bit of a switch over so while this wont apply when we get to version 1.6 which is due pretty soon, I wanted to keep upto date on the tip so I can start using VS2012 which the current tip is now built in.

So I downloaded from mercurial, the orchard source code from

https://hg.codeplex.com/orchard

if you now try to update to the tip of the source code, there is an issue with some repos that have been modified so you will need to remove them manually and update.  at present, I am at revision 6536, If i try to update, the following repos need to be removed under the modules directory:

Orchard.Alias
Orchard.Antispam
Orchard.AutoRoute
Orchard.ContentPermissions
Orchard.CustomForms
Orchard.ContentPicker
Orchard.Fields
Orchard.Forms
Orchard.Projections
Orchard.Rules
Orchard.TaskLease
Orchard.Tokens

Then do an update at 6536 again and we are good to go.

I have also edited the orchard.web project so it points at the src/orchard.web directory and set up a comenius.local in the hosts file, the only bind is that as we update, the setting will be overriden, but its not such a big issue.

Back to our project, its looking less than sterling, so lets get to work !.


OK we need to start our mods, the layout file is where we need to start, so under the existing theme machine themes directory (Orchard.Web\Themes\TheThemeMachine\Views) copy the Layout.cshtml into the same views directory except for the theme you are working on (I have it under Themes/Comenius/Views)

Give that a blast and.... OOPS


Reason being, the ThemeMachine has a "BadgeOfHonour" and A "Branding" section which we don't need, A quick look into the layout file and we discover this :


Please excuse the diabolical colouring of VS2012 the IDE is as monotone as Tom Hanks's acting.  Anyways, lets remove those lines and try again and we get a basic site with no style that actually is more responsive.

The Layout.cshtml file is pretty much the key to all of this as our starting point for the site.  Due to the way in which Orchard does its finding of templates (parts, pages etc) we can create part of a template and name it a specific way and it will apply that template.  As Mr Mayne would say "Convention over Configuration" and although it pains me to admit it, he's right.

So lets get to work on the first part of this which is the header which you will remember had a logo and a drop down selection with the list of countries we wish to show landing pages for.  Quick reminder will show this :


What we obviously need for this little baby is for it to float left and right as the width greatens (until it gets silly and then we will need to maybe set a max width when we get to 27 inch mac displays.  The following shows what we expect from different resolutions:



It is worth pointing out the defacto starting book by Ethan Marcotte at this point for responsive web design.  A great place to start with designing for all resolution types.

For the dropdown, I am using "Chosen" which is a JQuery plugin which looks really good and behaves really well.

We are going to use media queries to determine max resolutions at which the css changes, we don't want to get silly and add media queries for each different resolution, so looking at the following, we need a couple of different ones, one for the wrap round and the other for the wider view.

Testing our responsive site

Ok, we need something to test what our site looks like in different screen widths, there are a couple of good tools out there.  A few of these rely on you having a site visible to the outside world.  Unfortunately, I dont right now so i'm looking for something that I can use locally.  I have given in to my college Phil Peace here who insists Firefox is the tool of choice (I am a dedicated Chrome fan) but the new Firefox (V15 at the time of writing comes with a Responsive mode which is the dogs nuts to be honest..Phil Peace 1, Mr Deakins 0

Anyways, if you havent seen this, just check it out :


I can then view my site in resolutions I wish and even rotate:



OK, so we wont get the real picture, we will need some proper devices for that, but as a quick guide as to how we are doing, its just awesome.  So lets carry on.

We'll start work on the logo first.  Now we are into a hotbed of contest here already, the discussion of the best way to make images responsive have caused more arguments than the best way to drain spaghetti.  

If we look at Mr Marcotte's book he uses a max-width property in order to resize the image on the browser. The issue being is that on mobile, we are essentially downloading a hoofing great image for a mobile device with could be on a crappy network.  So we will use a combination of media queries at steps to download smaller images and leave the world arguing on the best way to do it.

So I have photoshop and have set up a few custom page sizes with resolutions so i can see the way the images look as they would on their respective devices.  our logo isn't looking to clever on the iphone 3 display so some resizing needed :



Media Queries

Over abuse of these babies, means you are targetting specific devices which is a definite no no as you will never cover all of your bases, there are so many out there, you'll have a never ending list of css.  We therefore try to target a smaller resolution i.e. typically iphone in size, a medium sized resource e.g. 1024 upwards, and then deal with any silly sizes you would see on devices such as the 27inch IMac etc

I'm now going to add a site.css into the styles directory of our theme and start writing this to accomodate the target sizes we previously mentioned.

The css for orchard sites.css is not too bad at all, so i've nicked the css reset:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, button, submit {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
After this, I have added the section to style the header with media queries : 

/* Home Page Header */
.widget-HomePageHeader {
     width: 90%;
     background-repeat: no-repeat;
    margin: 5px auto;
}
@media screen and (max-width: 400px) {
    .widget-HomePageHeader {
        height: 95px;
        background-image: url('../Content/ComeniusLogos/comenius-logo_153x95.jpg');
        background-position: top center;
    }
}
@media screen and (min-width: 401px)
{
    .widget-HomePageHeader {
        height: 119px;
        background-image: url('../Content/ComeniusLogos/comenius-logo_191x119.jpg');
        background-position: top left;
    }
}

At present, we use 2 queries, one for 400px and lower and the other over 400 pixels.  Checking this out on our firefox browser we get the following 2 :



 Nice..

We'll move onto the dropdown in the next tutorial.  Thx for stopping by !











7 comments:

  1. Very userful for creating the Mobile css

    ReplyDelete
  2. Responsive web design give the capabilities to the website to increase the sales and conversions of our business and also get more mobile and tablet users as consumers.
    Web Design Company India | Web Designing Company Bangalore

    ReplyDelete
  3. Website Design Companies Bangalore There’s no denying the value of responsive design in the modern world but there is some difficulty fully understanding how to design responsive layouts properly.

    ReplyDelete
  4. It's nice that there are such blogs.
    Aasapolska.pl

    ReplyDelete
  5. It is very helpful in giving me that information

    Nina

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Great Post,we build your websites in the orchard CMS, we have an expertise in orchard CMS website development to help you drive your business.

    ReplyDelete