In this tutorial, we will start building the proposed front-end on which our app is going to operate, with a mobile-first methodology to ensure that it looks consistent on all platforms and resolutions. You can look at the final result here or at the end of this tutorial

In the previous tutorial, we discussed what are annotations and how they differ from regular comments. We then discussed the various problems associated with identifying the content for which the annotation was created so that we may link the two later. In this tutorial, we will write the minimal markup of the article on which our annotations will be made. The style sheets are written in SASS which is then converted into CSS, with the emphasis being on application, rather than theory, and of course, over UX Design.

OK. On to design! We start off from the front end design, trying to create the design as a user would experience it, and we do it with a mobile first design approach. In this approach, we first design for small screens (which must be the simplest) and then progressively add complexity to the layouts

Image Credits

So, what do we want? We want that little bubbles should be available at the edges of the area where we want to allow such annotations. Because people usually read from left to right (there are a few right-to-left scripts though, we are not catering to them as of now), we’ll put these bubbles on the right margin of our article's area. We’ll refer to that area as ‘Commentable Container’. What I’m trying to do here is start from the requirements, top down, and gradually move in, towards a full implementation.

'User Expectations' create 'Requirements' create 'Design Architectures' create 'Implementations'

So, here is how our basic frontend requirements can be broken down:

We’re designing for:

• Small Screens
• Large Screens

Each screen can have:

• Collapsed View
• Expanded View

For each of the above views, the following cases apply:

• User not logged in
• User logged in

For each of the cases discussed, the following scenarios are possible:

• No Annotations to read
• Some annotations to read
• The user tries to make annotation

Here is a simple stacked layout. Looks the same in all kinds of screens (Try zooming in and out, or better, try using the device emulator bundled in your browsers). It looks fine except one thing. The text is a bit too spread out for large screens. We don’t want it to look too wide on large screens, but centered, while for small screens, it must occupy the complete width of the screen. Research indicates that about 65 to 70 letters is what humans in general are comfortable reading in a line without the line being too short to be abrupt, or too long to render it incomprehensible in a single pass. So, on large screens, we’ll not want more than 65-70 characters.

Note: I’m using SASS for writing my CSS files. One, because it is as easy (or as tough) as writing CSS, and two, because it is less tedious than writing CSS, and is, as its name goes ‘Syntactically Awesome StyleSheets’.Some of the declarations have been taken from the Bootstrap 3 framework, since that is what we have tinkered for our own needs on the portal too.

So, initially the CSS was:

article{
width:100%;    
margin: 0 auto;
line-height: 1.5;
letter-spacing: 1px;
font-size: 1.5rem;
text-align: justify;
}

Here, the text looks too much cornered, too much spread out, don’t you think? So, we could add a margin on both sides, by changing the margin property to:

margin: 0 10px;

But, by doing so, we now see horizontal scroll bar and some text moving out of the viewport. So, we fix that by reducing our width in percentages, and still centering them.

width:95%;    
margin: 0 auto;

But, this looks too spread out at desktop screens, so, we add a media query for our approximate width on bigger screens:

@media(min-width: $screen-md){
width: 60rem;
}

rem is size with respect to size of root element (which we’ve set to 14px). This makes the overall width as 14 x 60 = 840 px. That can help deciding the breakpoint too, where we must transition from the rem version to 95%. Anyhow, our $screen-md variable is set to 992px , so we’ve transitioned way before that.

The completed code of the page looks like the one in the pen below

Hokay, so this looks fine for small as well as large screens.

Lets move on to the next task. How will annotations look like in small screens, in a collapsed view? That, we will cover in our next tutorial.