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
AdaptJS
- injects CSS based on media queries
- list of screen sizes and match css to screen size
respondJS
Solutions for Javascript/CSS
EnhanceJS
- 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
ReponseJS
- 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.
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!
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 http://www.microsoft.com/learning/en/us/specialist-certification.aspx.
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)
Reference
http://www.microsoft.com/learning/en/us/mcsd-certification.aspx