Basics & Cross-Browser Support

   

Titanium Robotics’s new website is completely redesigned using the WordPress Open-Source as a backbone and Content Management System.  The theme uses a cross-browser compatible design achieved through JavaScript code and CSS3 browser-specific attributes with coding to support older versions of Internet Explorer and other older browsers.

Design

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.

Workflow



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

Responsiveness

Our website uses CSS3 @media tags to create responsive support for all devices without the need for JavaScript code that not all browsers will support. This also allows us to keep web-page sizes small and easier to download.

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.

Logos

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.

Resources

The following are a couple of useful resources, some have been mentioned previously:

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 website@titaniumrobotics.com.

Contact Titanium Robotics