First step, I defined a set of goals:
- Responsive Design
- Improving access to open source projects
- Optimize load time
Responsive design
After reading Responsive Web Design, I decided to took the initiative and start on a new version of this website. Ethan Marcotte (book’s author) proposes a design of gridsbased on percentages rather than pixels. This style contrasts with the well-known 960.gs adaptive where the grids are defined by pixels and its width are changing according to the stylesheet corresponding to the width of the browser (e.g. 1200px.css to max-width 1200px).
At the time of my design go from photoshop to HTML decided to keep the fixed content width at 1000 pixels. I wasn’t completely satisfied with using percentages for the container and I liked using a maximum of 1000 pixels version (yes, even if I see it from a TV).
Improving access to open source projects
One of the goals to be achieved this year is to increase the presence in Github and using this little snippet I could get all repositories.
Optimize load time
The loading time is an important issue in my view. I hate websites that take ages to load and didn’t even get a message during that time. Following this idea and decided to use WordPress plugins like History.js, WP Super Cache y WP Better Minify to improve the speed.
I attached each script using the wp function wp_enqueue_script:
wp_enqueue_script( 'prettify', get_template_directory_uri() . '/js/libs/jquery-syntaxhighlighter/prettify/prettify.min.js'); wp_enqueue_script( 'jquery.syntaxhighlighter', get_template_directory_uri() . '/js/libs/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js'); wp_enqueue_script( 'jquery.syntaxhighlighter-css', get_template_directory_uri() . '/js/libs/jquery-syntaxhighlighter/prettify/lang-css.js'); wp_enqueue_script( 'view-js', get_template_directory_uri() . '>/js/libs/viewjs/view.min.js?auto');
The site is running on a micro instance under the settings of this tutorial.