Improve Footer of Privly applications website

[opg7371]

The footer is too simple.It should be updated .

[opg7371]

Please give me the review regarding the footer and any else change that the organization wants to see.

[smcgregor]

• The copyright needs updating to 2016
• This is using a lot of vertical space without using any of the horizontal space. If you use bootstrap's column system the footer should stack automatically when the width is too small.

[opg7371]

copyright is updated.
The footer in normal cases look like footer.png

The footer when width is too small is footer_min.png

Anyother features to involve..or any improvement.. @smcgregor @irdan
Should i submit a pull request.

[smcgregor]

It looks like you aren't using Bootstrap's column system? The column content should start at the same vertical position.

[opg7371]

I am using the Bootstrap's column system. Please see the screenshot attached.
For normal view -

When the width is too small then it looks like.

Anyother suggestions..@smcgregor @irdan

[smcgregor]

Can you post a snippet of the HTML used to produce this column layout? It looks like everything is in a single page-width column, col-xs-12, but the different sections have center, right, and left alignment (from top to bottom).

[opg7371]

This is code for footer which i wrote.Yes i used the column system .
Please look at the code below and hint me regarding the modification.

Also is there any problem with the build.py file that i submitted..@smcgregor@irdan

footer.txt

[smcgregor]

• Don't use tab characters
• Make sure any HTML you share is properly nested and indented
• It is very difficult to give feedback when it isn't formatted already
• I recommend using Pastebin (or something similar) to share code that is formatted and syntax highlighted
• Make sure you only have 3 columns within 1 row inside a container

Regarding the build.py file, that is a different PR. You should comment there. I haven't been able to test it because I need to debug why pip3 install -r requirements... is not working on my environment.

[opg7371]

This is the new privly footer i designed.I took special care for keeping only 3 columns within a row.
But inorder to keep the 2 buttons(donate and learn more) one below another when the width is too small,so i used nested columns inside of the row .The code for the following is http://pastebin.com/EQwHEP34
It is properly organized.

I am also looking for some changes.I want to add a github repo image and a main website image(which link to the main website) too at the left inorder to provide symmetry to our website.

looking forward to our suggestions.
Please tell me if there is to add anything else.

[smcgregor]

• There are still indentation issues on the Pastebin link, which makes it difficult to follow.
• When you are evaluating your designs, pretend like there is a box surrounding each of the elements formed by infinitely long lines. Now think of how you can reduce the number of these lines that are visible. This is not a hard and fast requirement, but it is useful for thinking about alignment of elements.

[opg7371]

I have removed the indentation issues. The link for the same is http://pastebin.com/pVGBPcjU

[smcgregor]

• Why the increasing size of corporate logos from left to right?
• The buttons would likely look a bit better if they had the same dimensions. You could also add an icon for the "learn more" button.
• I think the "Terms of Service" section is not using Bootstrap's column layout?

[opg7371]

The increasing size of corporate logos from left to right was something i thought would look good.Now the dimensions of corporate logos are same.

I think that these 2 buttons should be kept inorder to maintain Symmetry.The footer will not look too good with only one button at the center.But if you insist then i will remove the learn more button and will add a image icon in place of it.

The dimensions of the buttons is now same.Thanks for pointing out.

Yes you are right,The "Terms of Service " section was not using the Bootstrap column layout system.But now it is following it.The link for the same - http://pastebin.com/ZiHPqiK3

Let me know about the Learn more button

[smcgregor]

• By "adding an icon" I did not mean replacing the button. The "Donate" button has a present in it. You could add an icon to the learn more button.
• The equal sized buttons does look better.
• The alignment under the full-width layout does not look good. In particular, it looks like a mistake to have the terms in their current position. It might look better if you combine them with the "You are viewing..." text somehow.

[opg7371]

I will add the icon to the button learn more.

Can you be more specified regarding the third point and elaboratee the "you are viewing .." part since it is present beforehand.I am not getting of how to combine them.

[smcgregor]

You can reorder, rearrange, or even cut something entirely from the footer if you think it is best. Two options are moving it into a column, or changing it to a two column layout and moving the "Terms" text out of the column layout.

[opg7371]

sir can we chat at irc if you are free not regarding this issue.

[opg7371]

Sir,pardon me but i am not sure what 'moving the "Terms" text out of the column layout ' means but i guess you want me to move the terms and other section to the complete left.
I have done something like this

Since the text part was already in the 2 column layout , hence i was not sure about the moving .. part.
Please clarify me on this.
Is this layout okay?

[smcgregor]

My suggestion was to combine or eliminate some of the text. You could then shift to a 2 column layout with another row above or below the 2 column layout containing the text. The layout of the terms of service links currently looks awkward.

[opg7371]

sir in that case,we can change the terms and service to terms or TOS or terms and condition
However my suggestion is that we can shift the terms and other part to the center and we can include your organization's address in left part which will give it a better look.what do you say?

[smcgregor]

How about instead of a mailing address (which is not useful to most people), we include another link to the safety page?

[opg7371]

I have uploaded the link to safety page and shifted the entire terms part to the center

looking forward to your suggestion :)

[smcgregor]

The "Priv.ly" logo links to the safety page? I think the logo looks good there, but it is not obvious where clicking it takes you.

[opg7371]

yes it do links to the safety page...how about we add a link by adding it near the term's part
Is that okay?

[smcgregor]

Near the terms or add another full sized button. It is important enough to be prominently displayed.

[opg7371]

So we can replace the Learn More Button with the safety button and add learn more near the terms part.
or we can give it a special effect near the term's part.In my view 3 buttons will look totally odd.
What do you say?

[smcgregor]

You have likely tried more configurations of the buttons than I have, so I'll defer to your choice.

[opg7371]

I want your feedback on this one whenever you are free.

Since it is one of the key component of footer,hence i prefer to keep it in a button
what do you say.

[opg7371]

some more views on which i want your suggestion

[smcgregor]

I think the three buttons in a row look best. What are your thoughts?

[opg7371]

yes...so should i submit the code....or any other modification is also required

[smcgregor]

You still need to make some changes. Take another pass at it and refine your chosen design.

[opg7371]

This is the footer i created just now.have icons aligned properly
Waiting for the review...:)
Also i have the polished code for this

[smcgregor]

Do the buttons have equal width? It matters when viewed on the phone.

[opg7371]

Yes they are of equal size

Now what is your review....??

[smcgregor]

They are a few pixels off of being the same width. I will be tweaking the text in them, so they will need to have a constant width anyway.

It looks like the color on the logo is not quite matching?

[opg7371]

I thought i posted them 2 days before....but anyways i want your view on this...
changed the icon to lobster view

[prastut]

@smcgregor @opg7371 can we make the footer a little simpler like this.

• Do away with sharing icons.
• Make the logo prominent and add copyrights below it.
• Rest of the things as shown by the image.

[smcgregor]

The social network links are not for sharing, I plan on linking them to Privly's pages on those sites.

I like @prastut's solution more for the web-hosted version of the application, but I like @opg7371's solution more for the browser extension.

@irdan @vshivam @spectralsun Any thoughts?

[vshivam]

For me, the existing footer is fine. It's clean and gets the point across without being ostentatious. Unless the priority is to add social icons I don't see a reason for updating it.

From the mobile app's perspective, I think there's too much going on in @opg7371 's implementation. It takes half the height of the viewport!

[prastut]

@opg7371 I recommended using Bootstrap's predefined classes for nifty CSS hacks, as well as not writing inline styles. Noticed them in the footer.txt file you provided.

[opg7371]

@prastut they were just were for model...ie how the footer will look....regarding once the look of the footer will be accepted...the code will be done accordingly.

[opg7371]

@smcgregor should i open a pull request?

[smcgregor]

Good points, @vshivam.

I think I could make a case for three different layouts on the footer. Mobile needs something simple (what we have) because anything else takes up too much of the viewport. The web-hosted version needs links to carefully selected resources to explain what is happening. The extension version may need to have a different set of links.

@opg7371I think your design is somewhere between a design for the web-hosted version and a design for the extension version. Which case do you want to solve?

[opg7371]

@smcgregor I would like to solve the design for extension version first