Tag Archives: responsive

5 Tips For Effective Web Video in 2015

camera-690163_640Given how ubiquitous web video has become, it surprises me how often I stumble across a site that hasn’t implemented that video very well into their design. Even a few years ago it was moderately acceptable for your video to appear a little janky, but those days are over.

The tools for excellent video production are now well within reach of the average content producer, and the technique for making sure that video displays seamlessly within you design across a range of devices is well established.

So, don’t settle for less! Follow these simple tips, and we’ll have your website’s video looking fantastic in no time. Continue reading

You Better Be Responsive, Or Google Will Get You

search-engine-76519_1280As is it’s habit, Google is getting ready to make another major alteration to their search algorithm, and there has been a lot of chatter about what it is going to mean for us web denizens, so I thought I’d clarify it for you.

Here’s the deal ­— on April 21, Google will be adding a ‘mobile friendly’ component to their algorithm.  This new feature basically looks at your site, and tries to determine if it’s mobile friendly or not.  If not, then it will drop your site down in the rankings returned to Mobile devices below other sites that are mobile friendly.  Basically, if you search on a mobile device, google will rank mobile friendly sites better than non-mobile friendly devices.

The question is, will this impact you? Probably quite a bit. In January 2014, 30% of web traffic was on a mobile device.  As of 2015, it’s looking like more than 50% of web traffic is from a mobile device, and there are projections that this will increase exponentially over the next year or so.

So…this is important…but only if you care about search engine rankings.

For those of you who have Solamar-designed sites, if we built it in the past few years, you should be ok. Here’s where things can go awry — if you have older pre-Solamar pages that are straight-up HTML existing outside of WordPress, it’s about 99% likely that these old pages are not mobile friendly.  When Google finds these old pages, it will consider your entire site to be non-mobile friendly and drop your ranking accordingly.

We’ve been hearing about this, but were hit face first with it this week.  Solamar makes use of Google’s Webmaster Tools to help with SEO stuff.  This tool had notified us that 100% of our site was NOT mobile friendly but we knew this wasn’t true.  The issue came from a few old HTML pages that were outside of the main Solamar site, leftover from previous iterations of the site that are no longer used.  The problem was quickly fixed by simply deleting the pages.  We could have ported them into WordPress as well, but they were so old that we just archived them.

If you’d like to make sure that your website doesn’t have any mobile issues that will alter your Google search rankings for the worse, then the Solamar team is here to help you!

Don’t Neglect the Big Guys (Designing for Large Displays)

old-tvAs we have discussed previously, the screens we interact with these days are getting larger and larger, both in the actual size of the display, and the size of the resolution that display is capable of. Because of this, it is no longer possible to design for a single, desktop-sized display.

Most people are already aware of this. After all, we’ve all been cumulatively living with our smart-phone addiction for a while now. We know websites should look good on them, and most forward-thinking web developers have adjusted their designs to accommodate those smaller screens.

However, because browsing on large screen devices such as TVs and ultra-high resolution displays hasn’t yet become the norm, it is less common for designers and developers to adapt their designs for them. But trust me, your website is being viewed on such screens, and the number of people doing so is only going to increase steadily over time.

So how do you make sure your website looks good on a large display? Stay tuned, and I’ll give you some tips.
Continue reading

Why We Love Bootstrap

Twitter-Bootstrap-LogoWhen you design and build websites for a living, it can be easy to spend a lot of time repeating yourself. Whether setting up the servers, building popular types of web components like slideshows and dropdowns or designing a button, a designer/developer often finds themselves having to retype the same code over and over and over again. It’s boring, it’s inefficient and most of the time it’s completely unnecessary.

In fact, the history of the development of code is partially one long tale of trying to eliminate as much repetition as possible, with the goal of becoming as efficient as possible. Many, many tools have been created to save designers and developers from repeating themselves. Bootstrap, an HTML, CSS and JavaScript framework created by the fine folks at Twitter, is just such a tool, and boy do we love it! In fact, so does everyone else, so much so that it has become the industry standard, with a large and robust community.

Why do we love it? Stick around, and I’ll count the reasons why.

Responsive All Over the Place

All of the things that Bootstrap can do, it can do on any screen size, from tiny phones to giant televisions. When you use Bootstrap, you do so knowing that your work is going to look good and function no matter where it’s viewed. It also builds that responsiveness into the fabric of your site, eliminating the need to start from scratch when making a new site design responsive.

It’s Got a Great Grid

A grid is a set of CSS code that allows you to easily set up many different types of page layouts. Need 4 equally sized boxes across the page, and then need them to stack on top of each other on smaller screens? Bootstrap has you covered. Want to nest smaller boxes inside one of those large boxes. Boom. Grids aren’t something that Bootstrap invented, web designers have been using them for years, but Bootstrap’s grid is a shining example of one.

It Has All the Toys

Transitions. Modals. Dropdowns, carousels and tooltips. Buttons, alerts, pop-ups, accordions, icon-fonts, tables, breadcrumbs, navbars, and on and on. If there is a user interface or design element that is at all in general usage these days, then Bootstrap probably has a version built in. Gone are the days of finding a plugin to cover each new need, or (gasp) building the code from scratch yourself.

Mix and Match

Nothing is worse than loading up a site with a bunch of code it doesn’t ever use, which is why Bootstrap lets you pick and choose which elements you want to install, you don’t have to plug the whole framework in each time. This makes sites using Bootstrap as crispity fast as they can be.

It’s the Perfect Price

By which I mean it’s FREE BABY!! Bootstrap is open-sourced, which mean not only is it free for everyone, it is inherently more secure than commercial software because it’s code-base is open to the world for scrutiny. Because of this, it also has a giant community of users, a huge advantage when you are trying to troubleshoot or extend Bootstrap’s functionality.

So there you have it! Bootstrap is the bees knees, no two ways about it. Want yourself a spiffy new website with all this Bootstrap goodness baked right it? Contact the design team at Solamar!