Live Examples


#134

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


#135

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


#136

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.


#137

Ok good to know—the whois nameservers still say GoDaddy.


#138

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.


#139

NU Graduate Admissions site


#140

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


#141

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):


#142

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


#143

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?


#144

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!


#145

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


#146

@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?


#147

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.


#148

Ok Kalen, I’m now officially confused.


#149

Por que mon freir???


#150

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


#151

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:


#152

I don’t think he’s been active here. Maybe a ping would help…


#153

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!