About This Site...

There are so many technologies for delivering content that works on a huge variety of devices. We read articles about how Google serves content or the advanced YUI javascript library that Yahoo uses. Then there is always the Jquery.mobile if you really need a big hammer and reading about how the BBC delivers content is boggling. OK. Lets get practical. Most companies I make web sites for are not getting a million hits an hour and do not really even consider mobile phones a primary target. Most of my code serves business. That greatly cuts down the uncertainty. My job is to give a customer the best solution for their problem. That means a few things.

Maintainability - I think this gets skipped a lot. Particularly now that we are using such new technology and have made this huge change to flat design as well as Agile practices, developers are just banging things out. Then again, they always have. I know. I have spent much of my career fixing programmer art and programmer junk. Unfortunately, site maintenance and extension is a huge part of the TCO of a web site. Good practices can keep that cost down. It's not hard. Just follow good practices and plan ahead a little.

Technology - Speaking of programmer art, the huge selection of targets and tools gives endless possibility for how to develop something. KISS. You need to have a variety of tools to create solutions, but from what I can see, Bootstrap and a bit of Responsive CSS can provide most of what is needed not just for making a website mobile capable, but also for efficiently making any web site that will serve for PC and tablet, the main targets of business. It is all about keeping a target in sight, planning ahead a little and some practical paranoia about the fact that change happens.

The Customer - That's what it is about, what the Customer wants and needs. I can understand what you want and offer suggestions to forward the conversation. Then I can provide a practical solution. Isn't that what you need?

This site is largely for testing different technologies in a practical project. Like all technologies, different methods have Pros and Cons. The point is to have the best tools available and make the right decisions as early as possible in a project. As a business developer needing to provide data content, I may need more complicated solutions, but simple is best... when it will not cause problems later.

Responsive CSS
   Pros: Simple and responds to any Viewport change. Use whenever possible.
   Cons: Has limits, particularly when the problem is complicated.
   Tests: The plan is to develop this with the Twitter Bootstrap Adaptive Design.

Responsive Javascript
   Pros: Simple and can respond to any Viewport change. Similar to Responsive CSS, but offers far better granularity of control
   Cons: Few, but some added complexity. Only use when CSS will not do it.
   Tests: The plan is to test Adaptive Javasctipt with SimpleStateManagment.js in the Seas Section.

User Agent Identification
   Pros: Allows the greatest adaptability for mobile. Involves the greatest complexity. Use when needed.
   Cons: Does not inherently manage Viewport and can be "fooled".
   Tests: User Agent Identification is currently used on the Seas page.

The idea is to combine all these methods in the Cosmic Store Section to develop various methods for solving business development problems.

To put it simple, MVC web development seems to be about the best thing to come along since we started doing .Net web development. It seems far more efficient than Web Forms. It just goes faster. It is direct to the page without anything in the way. Yes, I am a fan.

There will be a number of Layout pages, including an ASP.Net Master Page... maybe... somewhere...

_Layout.cshtml - Standard MVC4 Layout page from Visual Studio. Has its pluses and minuses.
Interestingly that though this works pretty good as far as a Responsive method, I find I am not using it as expected. Bootstrap just does a better basic job.

_LayoutBoot.cshtml - Basic Bootstrap page with titlebar containing icon and Nav elements. Used most places other than Cosmic Store.
This should always rely on responsive CSS... until some responsive javascript is put in.

_Layout_js.cshtml - Bootstrap Layout page javascript available, but without trying to rely on the default Bootstrap grid layout.
This is going to require more responsive Javascript, based on SimpleStateManager.js to control the layout as well as the UserAgent String. It works good so far.

A number of Javascript Libraries are planned for use in the project, including:

Jquery.js - Of course. It's the Standard and just great to use.
Jquery.ui.js - For a variety of UI methods, particularly the Menu and Dialog functions.
Jquery.DataTable.js - For a very functional data table
Jquery.custom.js - Required for a number of functions, including:
SlickGrid.js - For creating a very sophisticated data table.
JsTree.js - For creating a Collapsible Tree View. Nice for saving screen real estate.
Raphael.js - For some canvas graphic gauges that can be a nice touch on a Dashboard.
ssm.js - SimpleStateManager.js - For Responsive Javascript.

There are others used, but these are the main ones.
One sample code page includes the client and server side code for AJAX with JSON that uses a Command Pattern. After a lot of consideration and examination of AJAX methods, I think it is one of the best.

The CSS is the easy part. Bootstrap seems to be such a great solution and if you need to customize its behavior, you just use the same media queries. Now one modification of the base CSS I could see it potentially needing for an Intranet project would be the limit of the width, but that is an easy modification.

The difference between JQuery and Bootstrap controls is interesting, though the Bootstrap ones are based on the JQuery ones. The bootstrap ones have a more current appearence, but I like the look of the JQuery ones.

I haven't focused much on bundling and minification (yet), because the Visual Studio bundling facility is so practical for managing that.

This is a portfolio site, but it is also a learning exercise. You learn different things when making a full project rather than reading articles or testing technologies. There are lessons learned better that way, such as:

Don't try to convert a regular site to mobile. They all say that, but I was in a hurry, so I tried it and mostly it was not a huge problem, but it also was mostly not worth it. Some parts certainly ported and some I ported for amusement, like the Contacts page, but other than that, it is better to start fresh, even if you do extract code from existing pages.

Note that web site styles change. This is pretty much current style, but just now that style is being driven by devices. It is not what customers used to like and I think that in the future, they will want something closer to what ythey used to like more in the past. That is in here.

What was I thinking using an Accordian for this instead of Tabs?

Also, do not try to make a significant web site in a couple days.