My name is Jacob Bearce. Clean, custom code is what I do. I've built everything from feature-packed WordPress templates to single-page showcase sites. Follow me here for weekly code releases and development tips.
I’ll often see responsive websites that have what I call “jumps.” Instead of smoothly transitioning from desktop to tablet to phone, a site will have three “states,” and each state is coded for a specific width (or 100% width). While this certainly gets the job done, it feels half-complete. These jumps can often result in poorly designed sites for 7″ tablets, a huge market. Small tablets like the Nexus 7 or iPad Mini should display a smaller version of the tablet site, not the phone version, as they often do.
Instead of these three view states, I create what I call a variable responsive site. I trim things down at specific screen sizes, but I never do any hard jumps to specific view sizes. I test the site at all possible widths (between 320px and 1280px) and create break points where things start to get funky. This ensures the site looks good, no matter what device you’re using it on.
Part of this is simply ensuring a nice transition to variable width. We’ll often start a site with, say 1024px width, but of course we need that to automatically respond to the browser size at a certain width. Instead of forcing 100% width at 1024px browser width, I’ll instead create a media query like so:
This simple bit of code means that when the browser gets resized, there will never be a jump in width. When the window gets too small, #wrapper will simply smoothly transition in to the full width of the browser window.
This has been tested to work with IE8-11, Chrome, Firefox, Safari, IE10 Mobile, Chrome Mobile, Android Browser, and Safari Mobile. The only script required is the Modernizr library, to fix some bugs in older versions of IE.
If you’ve ever used Advanced Custom Field’s excellent Repeater Field, you may have noticed a strange little bug. The plus and minus icons to add and remove a row get spaced out really strangely. This tiny WordPress plugin adds some CSS to fix this.
I’ve been trying to figure out how to allow a user to paginate by year in WordPress for quite a while, and this morning I stumbled across an amazingly simple plugin. Simply called Date Pagination, this plugin can replace the built-in pagination system with pages for years, months, or days.
This was quite a challenging responsive design. The biggest issue was the events slider on the home page. I ended up having to write a pretty complex responsive jQuery slider system . It turned out well, but that was really challenging.