How do I create a virtual host that works with both http and https?

You need to create two virtual hosts thus:

<VirtualHost mysite:80> 
  <Directory "/Users/myusername/sitefolder"> 
    Options +FollowSymlinks
    AllowOverride All 
    Order Allow,Deny
    Allow from all
  </Directory> 
  DocumentRoot "/Users/myusername/sitefolder"
  ServerName mysite
</VirtualHost>


<VirtualHost mysite:443> 
  <Directory "/Users/myusername/sitefolder"> 
    Options +FollowSymlinks
    AllowOverride All 
    Order Allow,Deny
    Allow from all
  </Directory> 
  DocumentRoot "/Users/myusername/sitefolder"
  ServerName mysite
  SSLEngine on
  SSLCertificateFile /Users/myusername/certs/server.crt
  SSLCertificateKeyFile /Users/myusername/certs/server.key
</VirtualHost>

The first is a regular HTTP host, while the second handles your HTTPS traffic.

You also probably want to use Include directive so you don't have to duplicate config between your two vhosts - http://httpd.apache.org/docs/2.2/mod/core.html#include.