90
edits
Changes
Jump to navigation
Jump to search
Line 40:
Line 40: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Summer of Code/2016/Redesign and recreate Sugar Labs webappearance (view source)
Revision as of 06:18, 25 March 2016
, 06:18, 25 March 2016→About My project
===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===