Responsive Web Design for View & Data API - Part I

By Philippe Leefsma

Responsive Web Design defines any approach or technique that makes your web page mobile friendly. It's actually more a concept rather than a well defined set of techniques. 

A responsive website should look good on virtually any screen size: desktops, tablets and smartphones. So should your website be responsive? When we know that over 50% of web browsing is done through mobile nowadays, the answer is definitely yes. Let's put it another way: if your site isn't responsive, you're likely to either lose a lot of traffic or look technologically backward!

I'm travelling to New York next week in order to present at a meetup, so I spent the last couple of weeks catching up with RWD all over the web. Even if I'm still scratching the surface, I feel a bit better about my web design skills and I'm going to share my experience so far...

Before we start, here is a tutorial that should make you familiar with the basics of RWD.

What are the tools which are available to help a novice creating a responsive web page?

1/ Let's start with the easiest! Grab an existing template and tweak it to your needs: 

A lot of existing responsive templates are available on the web, some are for sale and a lot are for free, so you can just browse for something close to what you are looking and start customising it. This obviously requires some html, css and a bit of JavaScript skills unless the template looks and does exactly what you need but it's unlikely. 

Here is a descent tutorial on RWD from w3schools. I used one of their sample to create my first responsive demo:

http://viewer.autodesk.io/node/responsive/demo1

And here a large collection of free responsive templates. I picked two of them and customised it to my needs, integrating them with View & Data API:

http://viewer.autodesk.io/node/responsive/demo2

http://viewer.autodesk.io/node/responsive/demo3

The full source code for those project is on Github.

 

2/ The good old way: Do it yourself!

Templates are ok but at some point you may want to go a step further and either create your own responsive page or upgrade an existing page to be responsive. If your page was not designed to be responsive from the scratch however, it's likely you will have to completely rethink it. But writing a responsive page is not that hard after all...

HTML5 and CSS3 provide a great deal of features to handle responsiveness: Flexbox, Media Queries or Bootstrap will let you create cutting edge webpages.  

 

3/ Use modern user interface design tools

 

There might be plenty of them already on the web and this is an area which should be rapidly expending in the future. I've picked two of them just because they are popular and expose a different experience: Webflow and Bootstrap Studio.

 

Webflow is a pure cloud product and also offers more than just interface design: it's a content management tool and can host your website at the same time, providing an end-to-end experience to the developers. It's UI is pretty slick with lot of features already. The approach is to shield the user from having to write any code at all. I found it pretty intuitive and they have a lot of video tutorials on their site so you can get up to speed quickly. It's free to try and to use to some extent, you can even publish websites. The paid plans start at $20/month and allow you to export your pages to use html/css/js in your own app. There is no way back: you cannot re-import into Webflow a modified project.

 

 

Here is my fancy test webpage, it's just a UI which isn't connected to anything in the background:

http://view-and-data.webflow.io 

 

Bootstrap Studio is a very recent product. As the name gives you a clue, it's based on Bootstrap and the approach is different: this is a desktop app that runs on Windows, Mac and Linux. It's just the first version so it offers much less control than Webflow however it looks promising.  You can create components which are higher level gathering of base html elements, save and share them, so several components are already available from their website: for example responsive navbar, pretty footer, login form and so on... It lets you drag and drop elements to your design and tweak their properties through the UI, however it also lets you directly edit the css, which gives a great share of control over what you can do even if it's not doable from the product directly. As a developer I particularly enjoy that feature. As a desktop product, you buy it once and you own it. It's market at $50 and but discounted at $25 for early adopters. I find it well worths the money.

 

Here is a picture of a test web page I created to play with the tool:

 

 

The test would not be complete without applying a concrete example to the View & Data API. So I experimented creating a responsive dialog interface I could inject in a viewer docking panel and the result is pretty satisfying:

 

 

And this is how the same dialog looks on the narrow screen of my phone, I had to use a scroll container because as the width is shrinking, the content gets shifted vertically, but I feel this is definitely acceptable:

 

 

Live demo is testable here and source code of the extension (es6) here.

There is still a lot to explore about of responsive design with and without View & Data, so stay tuned!

Comments

[Infos India]

Thanks For Sharing With Us Now You Hire Infos India Leading Web Design Company In India.