Summer of Code/2016/Redesign and recreate Sugar Labs webappearance: Difference between revisions
| Line 40: | Line 40: | ||
===Specifications=== | ===Specifications=== | ||
====Color Scheme==== | |||
I preferably will go with Flat Design because it is in "trend" nowadays. Here are some reasons why: | |||
# Design is all about process. Flat is very simple in terms of form, and that helps us to focus on the usability of your site/app. | |||
# If we follow few rules, design will look tidy and clean. | |||
# It is also light that is you do not need to insert (many) images into you code. | |||
# Responsive Web Design - flat makes it a lot easier to make sites responsive, as we do not need to scale images, effects and so on. You just have vector shapes and colors. | |||
# It helps user focus more on the content. | |||
====Navigation Bar==== | |||
Since the website is short and simple, with very less links and only single page, navigation bar can be dropped. | |||
====Images==== | |||
Scalable Vector Graphics (SVGs) will be preferred. | |||
====Responsiveness==== | |||
This means how effective a site looks on other devices. It will achieve following goals. | |||
# remove the need for horizontal scrolling | |||
# offer text large enough to be legible without resizing or zooming | |||
# provide tap-friendly (i.e. fingertip-sized) buttons and links | |||
# ensure speedy page loads for users on slow cell networks | |||
# simplify navigation and content to focus on what mobile users want | |||
====SEO Ranking==== | |||
Following are the standards I will follow such that the SEO of the site will improve:- | |||
# Using CSS to structure content, rather the tables | |||
# Limiting the usage of H tags (H1, H2, H3, etc) and <strong> tags to non-repetitive content. | |||
# Using machine-readable fonts | |||
# For images that are stylistic elements, using CSS background images, but for content elements, found within a body of text that is unique to a page, using a regular image tag. For logos, using an image tag rather than using text replacement. | |||
# Site-Speed- consolidating CSS and javascript files, loading javascript at the end of the page. | |||
# Avoiding dynamically generated content | |||
====Technologies==== | |||
<table class="wikitable"> | |||
<tr> | |||
<th>Technologies</th> | |||
<th>Decription</th> | |||
</tr> | |||
<tr> | |||
<td>HTML</td> | |||
<td>HyperText Markup Language (HTML) represents the visual elements a browser ultimately displays on screen.</td> | |||
</tr> | |||
<tr> | |||
<td>CSS</td> | |||
<td>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a web page.</td> | |||
</tr> | |||
<tr> | |||
<td>JavaScript</td> | |||
<td>The programming language for the web.</td> | |||
</tr> | |||
<tr> | |||
<td>Bootstrap OR Flexbox</td> | |||
<td>CSS framework to make page responsive</td> | |||
</tr> | |||
</tr> | |||
</table> | |||
===Milestones=== | ===Milestones=== | ||