Tag Archives: Responsive Design

This little script lets your iOS users know your site can be added as an app

If you have navigated to some sites on your iPhone or iPad recently, you may have noticed the “Add to Home Screen” balloon. This lets users add the current mobile friendly website installed as a web app on their iOS Screens.

Add To Home Screen Floating Ballon

Add To Home Screen Floating Balloon

I thought this could be a useful addition to a responsive site I’m working on so I searched how to get this working. To my surprise and delight I ran into Matteo Spinelli’s website. He’s published a nifty little script and some CSS to quickly add this to your web apps.

The full article can be found here. I haven’t had issues with it on iPhones although on iPads it looks a little rough around the edges. I still recommend you give it a try, I promise it will be time well spent :-).

Advertisements
Tagged , , , ,

How to fix your 3.0 Bootswatch theme for MVC’s Bootstrap 2.3 Responsive templates on Visual Studio 2013

If you are like me, you already downloaded Visual Studio 2013 and probably migrated some solutions to the latest MVC version. It  comes with some great responsive design features out of the box starting with the stock template. On the other end, if are using Bootswatch themes you will see that the latest 3.0 Bootswatch themes for Bootstrap break the responsive design. The top navigation reverts to the small screen size and the Hero-Unit also looks funky. Well don’t despair, thanks to Ghislain Proulx and his article, I was able to update my 2.3 references to 3.0, switch my Hero-Unit for a Jumbotron among  other CSS fixes.

Nuget Packages:

Update-Package Bootstrap
Update-Package jQuery.Validation
Install-Package Respond
Install-Package html5shiv

Update your BundleConfig files, grab your Bootswatch theme, and replace your “~/Content/bootstrap-theme.css” file and voila’.

If you need inspiration try the Amelia theme it is my favorite:

Amelia Bootswatch Theme

Amelia Bootswatch Theme

Any additional CSS edits will be application specific; for example, I had to change hero-unit for jumbotron and my spans for col-md-4.

Hope this helps 🙂

Tagged , , , ,
Advertisements
%d bloggers like this: