Basics & Cross-Browser Support
When designing the website, we used the latest in HTML5 and CSS innovations to create different page templates that we then created into a responsive design by converting the static numbers (100px, 200px, etc.) to percentages (50%, 100%, etc.), we then adapted the different HTML templates into 20 PHP templates for use throughout our website.
For a faster and more streamlined workflow that keeps our website running at all times, we used Sublime Text, GitHub/Git, and MAMP. Sublime Text provides an easy way to edit files while Git helps to make collaboration smoother. MAMP or local hosting allows us to view our changes live on a local version of our site so that our website is never offline due to programming bugs.
The theme’s files can be seen at: https://github.com/FRC-Team-1160/Website
Our website uses CSS3
The use of CSS3
@media tags lets us create better formed content for different devices and for different screen sizes. For example, if you were to shrink your window size, the webpage would shrink with your window size to prevent any overflow and to create a better experience for you, the user.
“Labs” and Experimental Technology
With mobile technology, responsive design is no longer just width and height; nowadays, the amount of data the webpage takes up also matters. Images can take up a huge amount of space in browser load time, so switching over to web-font-based icons was a huge relief in webpage load time. All of the icons on this page (plus so many more, 318 in total) are a part of a customized icon set from icomoon.io that is infinitely scalable, customizable color-wise, and packaged in less than 2MB, compared to static images that are not infinitely scalable, only available in specified colors, and would take about 10kb of data each image (30kb for each color if using PNG Sprites).
One downside to this, however, is that it is not always available when web browsers or clients override custom fonts with their own. Because not many browsers do this, we feel like the pros of using these fonts outweigh the cons.
We use the rel=“logo” proposed attribute for HTML to keep our logos up to date across our website. The logos are in websafe vector format (SVG) which allows us to utilize multiple colors in the logo and also keep the website responsive in terms of logo because the single file can be scaled infinitely. SVG format is supported across the board in all modern browsers.
The following are a couple of useful resources, some have been mentioned previously:
- Sublime Text
- Google Developer
- Google PageSpeed
- Yahoo! YSlow Best Practices
- W3C HTML/Elements Community Wikis
- Mozilla Developer Network Wikis
- W3C HTML Validator
- W3C CSS Validator
- Ico Moon Custom Icons
Google has recently added a Web Fundamentals webpage. It’s really helpful for first-time web developers and provides a lot of useful information. It also includes a Web starter kit that is useful as a boilerplate template for starting your web development.
If you have any questions about our website, or would like to ask our website team a question, contact us by emailing us. For information regarding the website design, email our web admin at firstname.lastname@example.org.