Responsive web design lets the layout of the web site change as the browser window size decreases or increases. This makes it possible to adjust a site’s layout to look better on smaller devices like mobile phones and tablets.

Visit evillelife.com and resize the browser horizontally until you see the change in layout. Or visit the site on your desktop and then on a mobile device like the iPhone to see the different layout.

After resizing the browser window

Used jQuery Mobile, PHP, HTML and CSS to develop a web application. It includes the meta information used to display as an app if a user selects ‘Add to Home Screen’ on the iPhone. This gives the web app a custom icon, splash screen and removes the URL bar at the top of the iPhone screen. View it here: m.evillelife.com (best viewed on a mobile phone).

jQuery Mobile Sports App
Another personal project using jQuery Mobile, HTML, CSS and PHP – only this web application uses RSS feeds to gather sport stories and information from stlhighschoolsports.com. View it here evillelife.com/s (best viewed on iPhone).

The JSON objects were created by looping through each tournament and organizing the data into JSON objects. A JavaScript file with a JSON object was created for each tournament and then ftp’d to the web server where it was used by a different JavaScript file to display a bracket.

The jQuery and JavaScript used to display the bracket parses through the JSON object which included tournament info and round by round game data. Then it built a bracket, positioned everything and appended the HTML to the bracket page to be displayed.

jQuery code snippet:

JSON object snippet:

Using just [mh_twitter] will display the default username and message ‘Follow me on Twitter’ into the post.

By adding attributes to the shortcode the user can customize both the Twitter username/profile link and the link text.

[mh_twitter username="somename"] will overwrite the profile link but keep the default text. The HTML would look like this

<a href="http://twitter.com/somename">Follow me on Twitter</a>

[mh_twitter username="somename"]Please follow me on Twitter[/mh_twitter] will overwrite both the profile link and the link text. The HTML would look like this

<a href="http://twitter.com/somename">Please follow me on Twitter</a>

The site was coded using HTML, CSS, JavaScript and PHP built on WordPress. Custom WordPress functions were needed to complete the task. The site can be found here: beansproutpediatrics.com/. The graphic work was done by Ryan Brown.

Custom admin section:


Custom WordPress Menu:


Front page code sample:


Custom admin code sample:

I am currently helping develop a new website based around High School sports in the St. Louis area. The site is built off of WordPress and a custom built scripting engine that produces up-to-date stats and scores on a daily bases. My role for this project has been as a developer/programmer. The first challenge on this new project was to learn a new scripting system and get all the sport stats pages up and running inside our chosen skin for WordPress. It seemed like a daunting task at first, but being a quick learner I was able to figure out the new system in a short amount of time. The stats pages aren’t the prettiest things to look at – but that’s not the point of the pages. Along with outputting and styling the information for the stats pages, I also implemented table striping and column sorting for the tabled stats data using jQuery. Besides the standard HTML and CSS, JavaScript and PHP were both used for elements within the stat pages. An example stats page Boys Basketball Stats.

I was also tasked with creating a ‘scores and schedules’ page for the new sports site. This side of the site also pulls file created using our scripting system, but delivers them to the user in a different way. The idea was to let users view the current scores, past scores, and future games for every sport being played on a given day. I implemented a calendar type of system that uses JavaScript, PHP, and jQuery to dynamically load files from the web server based on the selected date. The code checks to make sure there are games for a sport on the given date and then displays the information if it is available. Selecting a different date dynamically loads the new files so there is no clicking and waiting for the whole page to load – just the single file. I also used the jQuery Datepicker to give the users the ability to quickly move between months. Scores and Schedules.

I helped out with many other aspects of the site here and there – from layout to customizing WordPress to fit our needs. But my favorite part of the project was the scoreboard which can be seen on the front page of the site. Once again the scripting system was used to create JSON based JavaScript files. I used jQuery and jCarousel to pull in the JSON files, extract the data I needed, style it, and place it into the sliding scoreboard. I also dynamically created the tabs above the scoreboard that are used to switch sports. This was based on if a sport had any games listed in its JSON file – if it did a tab was created and if not the sport wouldn’t show up. The scoreboard was challenging but fun and probably the most rewarding to see working.

The coding, in HTML and CSS, for suburbanjournals.stltoday.com for the layout was created by me with the help of a fellow coworker. The site is built around the TownNews Content Management System.

Along with general tweaks and updates, I also designed and coded the Classifieds page for suburbanjournals.stltoday.com.

For the Ladue News site, I helped code the redesign of the front page and photo galleries pages. I used JavaScript and jCarousel to create the sliding image belt at the bottom of the front page. I also used jQuery to directly edit a certain list element.

More screenshots after the break –