Live Examples

Here is the latest site I built with Roots. Also featuring Soliloquy Slider, Types, Migrate DB Pro and Custom Post Template plugins.

http://exaktime.com

2 Likes

Nice site and fast loading, especially considering itā€™s on GoDaddy. What are you doing to get that load time?

1 Like

Hi cfx. Were you asking about the http://exaktime.com site? If so, it is hosted on WP Engine. I am not doing anything specific except using SVGs where I can and optimizing my files. Roots does all the minifying so I have to thank the Roots team for that.

1 Like

Ok good to knowā€”the whois nameservers still say GoDaddy.

1 Like

Thanks for the compliments by the way. One another thing is that WP Engine does their part in making sure the site loads as fast as possible on their end as well.

1 Like

NU Graduate Admissions site

4 Likes

Launched a new site for my tattoo artist last night ā€” http://markthompsontattoo.com/

4 Likes

Launched a few others - me and someone Iā€™m working with (heā€™s loving roots) just launched these 2 sites for Project 13 (the designers):

5 Likes

https://www.thinkworkstations.com - Iā€™ve built a couple of sites with roots, but this is definitely my favorite.

3 Likes

Julien! I love how you have integrated some beautiful design in your work. Do you design as well or do you work with a designer?

1 Like

Hey @shaimoom, thanks!
Yes, I absolutely work with designers. Iā€™m actually just a coder/technical director, so I do some of the harder coding, get the theme setup, and I also do information architecture and some wire-framing depending on the designer Iā€™m working with (I work closer with some than others). Some of the more recent projects Iā€™ve actually passed the bulk of the development work onto some people that Iā€™ve trained up to use roots, so I donā€™t have to turn down so much work. It works out well for everyone!

1 Like

Very happy with our first try with Roots 7.0: http://www.boostermedia.com/

3 Likes

@JeffChambers it looks like the jacobtyler project uses MediaElement.js for the fullscreen video on the homepage.

What did you use for whatsinmybaggie? Can you pinpoint the differences and your preference?

1 Like

Thatā€™s probably because I implemented the video on jacobtyler.com and tried to keep it Wordpress-centric :smiley: I think it echos out the WP video shortcode for the homepage slider. I actually didnā€™t want to deal with updates for it in the future and figured the WP shortcode would be continually updated.

1 Like

Ok Kalen, Iā€™m now officially confused.

1 Like

Por que mon freir???

1 Like

I was asking about the difference between the two, why you/he chose different methods for the same effect, and which you/he prefer?

1 Like

Eh, I donā€™t know how he implemented it on whatsinmybaggie, but I was pointing out how it was done for jacobtyler.com, if @JeffChambers knows the differences Iā€™m sure he can chime in :slight_smile:

1 Like

I donā€™t think heā€™s been active here. Maybe a ping would helpā€¦

1 Like

Hey @cfx, sorry for the delay!

@KalenJohnson did the primary coding for jacobtyler.com, so he can definitely provide you the benefits for his method. We heavily use Advanced Custom Fields to customize WP Themes for clients & make every element on the site easy to update in the future.

For whatsinmybaggie.com, I was initially trying a YouTube method I found on Bootsnipp, but I was having a terrible loading issue, even when the video was at low quality. Instead, I just used the HTML5 tag, no extra JS required & created 2 relatively low file sized versions of the video with Handbrake (webm is for FF):

<video preload="auto" autoplay="autoplay" style="width:100%;height:100%;" loop="loop">
     <source src="http://whatsinmybaggie.com/wp-content/themes/wimb/assets/videos/wimb-background.webm" type="video/webm;codecs=&quot;vp8, vorbis&quot;">
     <source src="http://whatsinmybaggie.com/wp-content/themes/wimb/assets/videos/wimb-background.mp4" type="video/mp4;codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
</video>

You can easily get away with making the videos 480p & make it look fine on larger monitors by dumbing down the opacity over a black background.

I know this isnā€™t the most technically proficient method, and probably isnā€™t the best for load time, but itā€™s a really easy way to get a clean video background.

Hope this helps!

1 Like