Today also we had a Skype screen sharing session with my mentor Sarup that gave me a lot of insight into building up good layouts for web pages. I have created a web layout by using differently colored boxes so that I get a general idea of how the layout of the web page should be. I have set up an Openshift instance for the code that is in progress which is http://askfedoratest-anuradhaw.rhcloud.com, where I have committed my changes on the web layout.
Earlier I thought that having 5 breakpoints according to the way that Bootstrap uses might give us more flexibility in designing. Yet I was mistaken and I was told that the breakpoints should be decided based on the content and some of the pages that we are going to design might even be created by using less than 3 breakpoints.
Sarup via screen sharing showed me how the layout of a webpage can be designed based on the content so that it can even fit for an iwatch which is about half the screen size of 320px. He told me that without getting our web layout to strictly follow a fixed set of breakpoints we can always have the flexibility to decide where it should break depending on the content.
The following are screenshots of the web layout I created and I would like to include them here as well and point out the mistakes that I was shown and instructed to correct during the skype call.
Below 480px (Mobile view of the Answer page)
Here I have created the pop up menu that pops up when the hamburger icon is clicked, to fade in and out using the following javascript code:
function toggleMenu() {
$("#pop-up-menu").fadeToggle();
}
$("#pop-up-menu").fadeToggle();
}
Yet I was advised to code that so that it slides from left to right. I was given a resourceful link to refer to which is: https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-easing-bea05243fe3. This is an article which talks about animation principles like sliding and how to make it accelerate during sliding rather than making it slide at constant velocity which is quite boring specially when it comes to mobile devices. I was asked to refer that and in case I get a difficulty to code it from scratch I was advised to use SIDR, which is a jquery plugin to create side menus.
Below 768px (Tablet view of the Answer page)
This is a screenshot I have taken just at the transition at 480px. I was pointed out that my layout is broken here because as you can see the yellow colored section becomes too thin and it might not be able to hold the content fully. This is a disadvantage when we try to use fixed breakpoints and I was advised to decide a breakpoint so that such kind of a thing would not happen and the yellow colored area with the text left on it has sufficient width to hold the content.
Above 768px (Desktop view of the Answer page)
Here the mistake was I had too much space between the Hamburger icon and the Search text box. I was told to try experiment with a lesser space between these two.
And at the same time the width of the ASK button also was quite large and I was advised to reduce the size of the ASK button when it comes to the desktop view.
Apart from these I was given further articles to look at which comes handy in working with breakpoints. Those articles were:
- http://www.vanseodesign.com/web-design/3-breakpoint-types/
- http://marcdrummond.com/responsive-web-design/2011/12/29/default-breakpoints-are-dead
If anyone is interested to learn more about responsive web design and designing layouts based on breakpoints those articles would be very useful and you can refer them to get better in handling breakpoints. And during the next week I will be working more on getting the layout correct and move into detailed coding of the Question and Answer page of AskFedora.
0 comments:
Post a Comment