Big Road: Simplist's solution to a mobile-only web story

在不少外国人眼中，日益富强的中国是一个值得学习的地方。赴中国留学的外国学生，也有越来越多人从传统的中文、历史、中国文化等专业，慢慢转变为经济、金融等社会学科。许多学生在学习的同时，也对中国社会文化有更深刻的体验了解，在日后做与中国相关的工作时感到更加学以致用。

"Big Road" has the following key features:

HTML only -- Actually, you don't need to learn HTML. Just get the code of current page and modify it.
Sensible default style.
Common elements: p, em, strong
Snippet for responsive embedding of interactive charts, via iframe

留学生生源地分布

Make your first web story in three steps:

Fork this repository
Modify index.html to include your content
Your web story is available on username.github.io/big-road/. For example this current page is available at hupili.github.io/big-road/. Checkout this page for more information about hosting on GitHub Pages.

留学生分布省市

You have already seen headings (h1, h2, h3), listings (ul, ol, li), and paragraph (p) in previous codes. In this section, we show you several other useful elements.

留学生经费统计

近年来，来华留学生都是以自费的形式为主来缴纳学费，获得中国奖学金的留学生较少。但从教育部提供的数据可见，获得中国奖学金的留学生数量逐年增加，说明中国对来华留学生更加支持，政策更加开放。

Image with caption

*How "Big Road" looks like on mobile phone.*
Source: screenshot

"Big Road" has the following key features:

HTML only -- Actually, you don't need to learn HTML. Just get the code of current page and modify it.
Sensible default style.
Common elements: p, em, strong
Snippet for responsive embedding of interactive charts, via iframe

留学生生源地分布

Make your first web story in three steps:

Fork this repository
Modify index.html to include your content
Your web story is available on username.github.io/big-road/. For example this current page is available at hupili.github.io/big-road/. Checkout this page for more information about hosting on GitHub Pages.

留学生分布省市

You have already seen headings (h1, h2, h3), listings (ul, ol, li), and paragraph (p) in previous codes. In this section, we show you several other useful elements.

留学生经费统计

Image with caption

Sometimes, the caption can be very long which is a standalone story by itself. So you don't have to put the entire block into emphasis mode. Just *emaphsize the part you find most important*.

Note, an image aspect ratio of 16:9 is recommended as a sensible default.

留学生来华的十大理由

Embedding videos in a responsive manner is always a pain. The conventional technique is to embed by iframe. You need to specify the width and height of the iframe, making it non-responsive to different screens.

this video from its "Share --> Embed" button:

<iframe width="560" height="315" src="https://www.youtube.com/embed/qp0HIF3SfI4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The default result is as follows:

Default iframe embedding is not responsive to the screen width. It is either too small or too big.

Following is one responsive video. You can check the source code of this page to see how it works. You don't have to completely understand the internal works. Simply subsituting the URL suffices.

Responsive interactive chart

With the wide spread tools today, you don't have to learn frontend technology in order to make interactive charts. For example, there are off-the-shelf online tools like infogram.com, datawrapper, and flourish.

If you are Python developer, libraries like plotly, pyecharts, bokeh, and folium can help you generate interactive charts and maps within Python environment. Next question is how to embed those interactive charts into your final work.

The first thing is to use your chosen library/ online tool to export a standalone webpage that includes your chart. The webpage may come along with other auxiliary files like Javascript and CSS. You need to put those files all in one folder. Then use your browser to visit the webpage and make sure the chart looks normal as a standalone project. After that, ou can apply the same technique used from above responsive Youtube video to embed it into your web story Just use the following code block and replace the "src" attribute with the right path to your stand alone interactive chart.

<responsive-block><iframe src='//server-name/path/to/the/file.html' frameborder='0' allowfullscreen></iframe></responsive-block>

Here is an example of a map made from Python's folium library. It is the original hi-fi version of the raster image used in this blog post. Although the following one is not interactive or animated, you can easily make it so from the folium library.

Following is an animated and interactive map of Sichuan's earthquake in past 100 years. It is made by D3. The project includes many auxiliary files to make the chart work. We'd like to show you that the responsive block works with not only charts on your local disk, but also charts (more precisely HTML pages) from the Internet. Note, in the "src" attribute, please start your URL with "//", not "http", or "https". This notation lets the browser determine which protocol to use and improves compatibility.

Note that the default aspect ratio is 16:9. Sometimes, 1:1 may look better on a vertical screen. Or, you can try 4:3, whose code is available in HTML comment block. Other aspect ratios are not suggested since this is a starter's template.

This page on desktop?

It does not use up the entire space on a desktop computer. However it is still readable. Now that 80% traffic is on mobile web, this should suffice for most web stories. Also note that, you just learned HTML 10 minutes ago and this is what you can make.

Epilogue

Have fun.

Find the GitHub repo here.