Mobile First Responsive Design of Web Sites

25. April 2013 18:56 by Chris in dev  //  Tags:   //   Comments (0)

If you caught my article on responsive web design you'll be aware I'm an advocate of such techniques already. There is today a strong argument of viewing the topic from a slightly different angle, that web app/ web site development should be mobile first. I'm going to use as the basis of this article the talk by Sean Wildermuth who gave a talk at dotnetconf 2013 on this very topic: Mobile-First Responsive Design.

It's a changing technological landscape: today more smartphones than PCs are shipped (though are smartphones PCs?) - let's re-state that as more smartphones are shipped than desktop of laptop personal computers. Some people only have a smartphone. Or a tablet.

Responsive Web Design (see my earlier post) advocates:

  • Adapting a site to mobile devices rather than creating an entirely differently version of the site as used to be the preference when there was a greater gap between the capabilities of phones and laptop/ desktop PCs
  • The approach taken has previously usually been to gracefully degrade to the mobile device
  • There is a problem here - the solution is sub-optimal as the code goes to all devices, though it is not used in both places
  • Such a subtractive solution therefore means non-optimal consumption of resources, particularly an issue for the mobile side
  • For example, all the javascript code will be running on the mobile side, and hence on a platform that is less suited to handling it
  • Further images are often still loaded (consuming bandwidth) but hidden

The solution is mobile first web development though is currently difficult to address al the above issues via the current technology toolset. The philosophy was created by Luke Wroblewski and focusses on progressive enhancement, scaling up rather than down and the aim, simply put, is to not include anything that isn't needed. Thus, ideally, you would add to stylesheets, images and script as scaling up.

Given the increasing prevalence of mobile devices considering mobile is likely to important if not critical to success. In fact it may now be the most important user base for you to consider but this will depend on your site/ application/ client base so it is important to be practical. Mobile first is important in most cases, but not all and it is also important to scale the effort to the size of the project. 

Several techniques are required to follow mobile first:CSS design media queries to be additive

  • use a minimum size instead of ranges in your CSS3 media queries
  • load JS based on the device
  • support different image sizes - there are lots of different techniques with no one being perfect (expect more from the W3C on this)

There are a number of device categories/ screen sizes/ resolutions you can target. Three are common nowadays - mobile, desktop and retina. 

The Image Problem

As stated above there are a number of resolutions to the problem of needing multiple versions of images to support differing devices:

  • you can use background images so they are loaded as required for the CSS rules - a workaround to the img src problem
  • to solve the image quality issues we can use the data- HTML5 attributes and JS and swap the data source for the source
  • you could also not include a src at all and swap in the correct version. Then only the one version will be loaded. Problem: need code to run even on the small device plus dependent on JS
  • another option: only load JS and CSS on the non-mobile device

Solutions for CSS

What tools/ frameworks are out there to help with responsive design in general and including mobile first responsive design


  • injects CSS based on media queries
  • list of screen sizes and match css to screen size 


Solutions for Javascript/CSS


  • Injects CSS/JS based on media queries
  • Issue - not maintained since 2010; also relies on cookies


Of course using the backend is still also a solution. 

Solution for Images


  • defines width sets and uses markup to define images


I'll be following up on the above and as well as the conference video link above Sean has the slidedeck etc. up at his website.

.Net 4 500 server error (one explanation)

18. April 2013 09:32 by Chris in dev, IT Pro  //  Tags:   //   Comments (0)

Just a quick note in case others can save the time I wasted on this;( I don't do a huge amount of server config but occasionally I am called to as a web dev, deploying apps to servers.

In this instance I was receiving a 500 server error for an ASP.NET 4.0 website on IIS 7.5 on Windows Server 2008R2. 


Nice and helpful. Even better, nothing in the event logs to indicate the problem! It turned out, surprisingly, that this was the first .NET 4 website that had been configured on the box. I had configured all as I normally would, adding a .NET 4 app pool under IIS and assigning this for use by the web site. I thought maybe the .NET 4 installation was corrupt so I did a repair. No joy. Next thought was to manually install .NET 4 but there was no aspnet_regiis in the installation directory. Some googling later suggested the answer was that it was only the client profile of the framework that had been automatically installed to the server and that, in fact, and despite appearances, the full framework required installation; unsurprisingly in retrospect.

So if you hit this issue yourself just google for .NET Framework 4 download or go here. I'm going to install 4.5 now as well while this is all fresh in the mind!



All change again on the microsoft developer certification front (and Microsoft admits C# and MVC have won)

12. April 2013 15:45 by Chris in Certification, dev  //  Tags:   //   Comments (0)

This as Microsoft likes to revamp it's certification every few years, which admittedly makes sense as 'time waits for no man' and technologies move on apace and this has rarely been truer than now.

So, we did have Microsoft developer certifications tied to  Visual Studio at the last revision - Visual Studio 2010 with the MCPD (Microsoft Certified Professional Developer) 4 (ASP.NET 4) qualification.

Now we have the (new) Microsoft Certified Solutions Developer (MCSD) … which has three strands:

1 Windows Store

Two tracts depending on your chosen technology stack

  • HTML5
     Programming in HTML5 with JavaScript and CSS3 (exam 480)
     Essentials of Developing Windows Store Apps Using HTML5 and JavaScript (exam 481)
     Advanced Windows Store App Development Using HTML5 and JavaScript (exam 482)
  • C#
     Programming in C# (exam 483)
     Essentials of Developing Windows Store Apps Using C# (exam 484)
     Advanced Windows Store App Development Using C# (exam 485) 

2 Web Applications

  • Programming in HTML5 with JavaScript and CSS3 (exam 480)
  • Developing ASP.NET MVC 4 Web Applications (exam 486)
  • Developing Windows Azure and Web Services (exam 487)

3 Application Lifecycle Management

  • Administering Microsoft Visual Studio Team Foundation Server 2012 (exam 496)
  • Software Testing with Visual Studio 2012 (exam 497)
  • Delivering Continuous Value with Visual Studio 2012 Application Lifecycle Management (exam 498) 


Among the above are so-called Microsoft Specialist exams (HTML5 and C#). There is also currently one available for Office 365. See

And the Winners Are ...

This has been coming for a while but now Microsoft effectively admit that C# has beaten VB and MVC has beaten web forms. From the above we can deduce that Microsoft is admitting that these 2 technologies have won out in the MS web dev space: 

  • ASP.NET web forms vs ASP.NET MVC - only MVC is mentioned above so Microsoft clearly believes MVC is or should be the dominant technology for ASP.NET.
  • VB vs C#. Similarly whereas previously Microsoft always offered the option of taking exams in VB or C#, VB is no longer an option and the deduction is therefore that C# has become sufficiently dominant so as to negate Microsoft's continued support in this arena. 

Upgrading from MCPD

To upgrade from MCPD: Web Developer 4 to MCSD: Web Applications certification there is, unfortunately, no longer a single exam upgrade option as has previously been the case in similar situations. Two steps now:

1 Programming in HTML5 with JavaScript and CSS3 (exam 480)
2 Upgrade your MCPD: Web Developer 4 to MCSD: Web Applications (exam 492 – note that this is not yet available and google didn't help me locate a release date easily)



Saving changes is not permitted in Enterprise Manager

14. March 2013 09:16 by Chris in dev  //  Tags:   //   Comments (0)

This is one of those issues I encounter occasionally and I always have to google. So I'm thinking if I put it here it'll save me a couple of key strokes!

I am often developing databases in SQL Server, currently primarily 2008, including modifying tables through Enterprise Manager. I didn't get this issue in 2005 but the default in 2008 seems to have changed as I get this error:

Saving changes is not permitted. The changes that you have made require the following tables to be dropped and re-created. You have either made changes to a table that can’t be re-created or enabled the option Prevent saving changes that require the table to be re-created.

So obviously the issue becomes a) finding the option (not easy!) and then b) remembering where it is for next time.

FYI/ FMI in the future, it's here: Tools->Options->Designers->Table and Database Designers->Prevent Saving changes that require table re-creation.

Hope this also helps others! Also you can help me as well - is the default the same in 2012?

28/06/2013 - as I've just installed and hit the same  issue, yes it is!


Queries time out from web app but run fine from management studio

25. February 2013 15:57 by Chris in dev  //  Tags:   //   Comments (0)

I had a support issue from a client today which turned out to be an interesting one I hadn't come across before so I thought I would share. Thankfully, others had so once I had identified exactly what the issue was google and stack overflow were able to quickly assist.

The scenario that initially bemused me was that fact that running a complex search sproc from SQL Server Management Studio was returning in a couple of seconds but exactly the same parameters fired into the sproc from ASP.NET caused the web app to timeout. Earlier I had even tried extending the default commandTimeout from 30secs to 4mins without success so SQL Server had really got it's knickers in a twist. Further the issue just appeared one day and I also couldn't replicate in the staging environment, which had similar data volumes.

It turns out others had hit the issue before, e.g.

It turns out the ADO.NET and Management studio connection/ user contexts differed and in my case, as per the link above, the explicit setting of the arithabort property brought the performance back to expected levels. Further, adding this in one sproc also fixed the issue with other reporting sprocs of the solution. Go figure.


Consumption 2013

7. February 2013 13:38 by Chris in ForTheRecod  //  Tags:   //   Comments (0)


Welsh is the priority:


Bywyd Blodwen Jones gan Bethan Gwanas (1999)

Blodwen Jones a'r Aderyn Prin gan Bethan Gwanas (2001)

Tri Chynnig i Blodwen Jones gan Bethan Gwanas (2003)

The Hunger Games Trilogy - no.3 was comparably weak.



Comments with a score rather than reviews:

 Watched in 2013

  • Django Unchained 7.5/10; bit silly in places ... but this is Tarantino
  • The Dark Knight Rises Lengthy but held the attention. Anne Hathaway a plus.  8/10
  • Silver Lining Playbook Grabbed plenty of plaudits but a few flaws 8/10
  • Hunger Games Better than expected 7/10
  • Dredd - violent but well implemented. Set up for a sequel. 7/10
  • Skyfall All v.silly 6.5/10
  • Looper - reasonably complex SciFi without too many holes 8/10 



  • Opposites - Biffy Clyro


  • Gwaith Cartref
  • Game of Thrones - racist ... really? Just enjoy.
  • Mad Men
  • Frankie



  •  PIPES



  • Go Cymru/ Lions!
  • Congrats Andy Murray


Resource Files (.rex) Usage Notes from the Field

4. February 2013 14:54 by Chris in dev  //  Tags:   //   Comments (0)

I set up a website with resource files in ASP.NET, MVC4 as it happens but makes little difference. This because the site is bilingual - Welsh and English. 

Post launch the client wanted a content change which involved changing a resource file but, perhaps because of my implementation 'choices' the site did not dynamically pick up the .resx change. I thought, in my ignorance, that maybe I needed to force a recompile so changed the web.config. This didn't work either so now I probably need to understand better what is going on. Hence this blog entry.

Here's how I have the resources configured (as per the best practice google found for me): 

  • Build Action: Embedded resource
  • Copy to output directory: do not copy
  • Custom tool: PublicResXFileCodeGenerator

The fact there is a custom tool here leads me still to think recompilation is needed. A little more about the tool is here and here.

After which I had another "doh!" moment and came thought that I should simply copy the corresponding designer file as well as this is where the property will be accessed and the IDE is handling this for me. In which case I will then also need to force recompilation.

But no, still not working. What have I missed? Ok, so checking the bin directory there is also an xml file containing data relating to the resources. Let's try that as well. Hmmm, nope. Forcing recompilation one more time. Still no joy.

Ok so let's takea look with reflector - the resources are part of the assembly. So let's grab the deployed assembly (which is of identical size) and see if I can access the resources directly within it - they should be the old versions. They are. So the resources are literally embedded in the assembly but simply copying the related files up to the server and forcing a recompilation doesn't do all that is necessary to update the resource references, presumably due to this additional custom tool which Visual Studion integrates with but isn't part of the standard .NET compilation process? So I can just copy up the dll compiled locally. Which worked. Got there at last.

In my book this isn't ideal however and does raise the issue as well that maintenance life becomes a little more complex when you move to resource files, at least with this configuration. When/ if I get a chance I might have a play with other configurations. In the meantime, others have looked at already.

Windows Phone 7.8 update issues

4. February 2013 09:16 by Chris in Windows Phone  //  Tags:   //   Comments (0)

I installed Windows Phone 7.8 over the weekend. It has not gone smoothly. First Zune refused to recognise the phone - it did eventually - and this morning my Nokia 800 locked for the first time ever and I had to google a soft reset which worked thankfully, from here: "Press and hold the Volume down and Power buttons until it vibrates, after that you have to release all the keys then phone will vibrate 3 times." This happened while playing a podcast. I have had issues with the media player in the past, chiefly it not maintaining the state of where I was in the podcast, but nothing this major.

Here's hoping for few further issues with 7.8 which, by the way, doesn't seem to add a great deal to 7.5. So I might be googling how to rollback to 7.5 in the not too distant future if the problems persist. Not to downplay the complexity of any development when Microsoft is effectively supporting 2 platforms but 7.8 has been so long in developing one would have though they could have got it right. Too many issues and my loyalty to Windows Phone will be severely tested.



Bootstrap, other javascript tools/ frameworks and keeping up with appearances

25. January 2013 14:28 by Chris in dev  //  Tags:   //   Comments (0)

Bootstrap, other Javascript Tools/ Frameworks and Keeping Up With Appearances

I don't know about other developers but I have this 'technical development topics list' ... products/ technologies/ concepts I've come across in passing but don't seem to consistently manage to dig into. This is particularly an issue currently as ... 

a) there is just so much "stuff" to learn about in the (Microsoft) web software development space. 10 years ago it was far easier to keep abreast of the main development technologies. Now it's not possible for one person to cover all the bases and specialisation is required, at least if you are going to dig into anything in any depth

b) closely related is the changing landscape of devices and development for those devices, which increases the aforementioned complexity still further; native vs cross platform/ device anyone?

Anyway, in an attempt to facilitate making some personal headway I thought if I try and blog about some of these topics, once a week say. A laudible idea but let's see how this goes. Not well so far as this post has been sitting here unfinished for a month!


The New Way

A few years ago the ASP.NET web dev picture was different in several ways, including that life for the developer was simpler. We had ASP.NET web forms with postbacks, server controls and associated viewstate. Those server controls gradually got better in terms of user experience. People complained about how the web forms approach didn't facilitate unit testing and about the clunkiness of the state management. Ajax became more popular and this didn't fit that well into the Web forms way. Similarly Javascript, particularly in the form of jQuery became more popular as processing moved to the client in the drive for the more responsive UX. RESTful services are becoming the order of the day.

The "cutting edge developer" called for a more testable framework with less 'plumbing' and more control. Now we have ASP.NET MVC (as well as Microsoft web pages) which seems a better fit with this new Javascript-centric world than web forms. Of course there is then the option of dumping Microsoft/ Visual Studio completely for client development, and there is increasingly the option to continue this at the server side with technologies such as node.js.

Back to the client. With increased use of Javascript/ reduced use of Microsoft plumbing code have come a host of competing "frameworks" to supposedly make life easier for the developer. If you don't spend half your life trying to work out which framework you should be using for a given project that is. K.Scott Allen (check out his Pluralsight videos) was on DotNetRocks recently and one of his hopes for the year was that the web dev landscape simplified. I agree ... if we could go a little way back to it being more obvious which frameworks to use, and when, whilst also maintaining the benefits of this "brave new world" this would surely be a happier situation. So, Scott rattled of a few technologies/ projects/ frameworks during that show so let's very briefly cover those and I'll plan to return to cover more of them, and probably other new ones that have popped up in the interim, in subsequent posts. Oh, and these are from my notes from the show to follow up on so I may have also added one or two more than were originally stated! Some of the headline descriptions provided by the tools' sites are not very useful but ...

  • Knockout ( - 'simplify dynamic JavaScript UIs by applying the MVVM pattern'
  • Backbone ( - 'Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.'
  • Spine ( - 'Build Awesome JavaScript MVC Applications' - useful overview description right there!
  • Angular ( - 'HTML enhanced for web apps!' - ditto.
  • Masonry ( - 'A dynamic layout plugin for jQuery'
  • Modernizr ( - 'A JavaScript library that detects HTML5 and CSS3 features in the user’s browser'
  • Bootstrap ( - 'Sleek, intuitive, and powerful front-end framework for faster and easier web development'
  • CoffeeScript ( - 'CoffeeScript is a little language that compiles into JavaScript. Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. '
  • Typescript ( - 'TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source. '
  • Skeleton - I used for my own website and elsewhere (  'A Beautiful Boilerplate for Responsive, Mobile-Friendly Development'. See also this tutorial I found useful.
  • LESS ( - 'LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.'
  • Further, though perhaps a little different intended scope, Telerik's KendoUI has also caught my eye.

A little more on Bootstrap

So, lots of interesting play things in the arena of client web technologies, likely to help/ confuse us poor web developers but let's have a little closer look at Bootstrap. Of the above it is most similar to Skeleton but whereas Skeleton has specifically targeted CSS support for a 12 column 960px grid system with supporting media queries and a few extras in the form of consistent styling of buttons, forms and typography the scope of Bootstrap is a little larger, seemingly a superset including: 

  • Scaffolding Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
  • Base CSS Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.
  • Components Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.
  • JavaScript plugins Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

 And that's enough for now. I hope to have a play shortly and report back further.


A Welsh learner typing tip

21. January 2013 21:17 by Chris in Welsh  //  Tags:   //   Comments (0)


Under Windows hold down ALT while typing the appropriate number code on your numeric keypad to create characters with circumflex accent marks e.g. â 0226, ô 0244

In Word: Ctrl-Shft-^ then the letter ... but this is word specific and won't work generally in Windows.

Staying with Word, if you want a ë it's CTRL-':'m i.e CTRL-SHIFT ';' then the 'e' or another character. You can get at this generally in Windows with ALT-137, a different scheme from above (see I'll get to investigating the difference between the two schemes.



In Welsh the circumflex is known as hirnod 'long sign', acen grom 'crooked accent' and also colloquially as to bach 'little roof'. It lengthens a vowel (a, e, i, o, u, w, y), and is used particularly to differentiate between homographs; e.g. tan and tân, ffon and ffôn, gem and gêm, cyn and cŷn, or gwn and gŵn. I add this as I needed 'ŷ' (the code in this case is 0177) as the standard way to insert a circumflex, Ctrl-Shift-6, then 'y', didn't work, so you type the code then ALT-X. Note this is different from the general Windows approach above.

Note also that while â, ê, î, ô and and û will work with the CTRL-Shift approach ŵ as well as ŷ won't, the code for the former being 0175.

P.S. you can always also Insert-Symbol as well!

Shame it can't all be easier in this day and age!




About the author

I am Dr Christopher Sully (MCPD, MCSD) and I am a Cardiff, UK based IT Consultant/ Developer and have been involved in the industry since 1996 though I started programming considerably earlier than that. During the intervening period I've worked mainly on web application projects utilising Microsoft products and technologies: principally ASP.NET and SQL Server and working on all phases of the project lifecycle. If you might like to utilise some of the aforementioned experience I would strongly recommend that you contact me. I am also trying to improve my Welsh so am likely to blog about this as well as IT matters.

Month List