nationbuilder-landingpage

Mobile Political Web Designs Receive some love From NationBuilder

Posted by & filed under Blog.

Our friends at NationBuilder have recognized Otreva and our recent political campaign web designs.

Otreva: This Scranton, PA, firm includes designers, developers and strategists. They specialize in responsive design for desktop, tablet and smartphone site use. Their recent projects on NationBuilder include Hanger for Governor (case study pictured) and Kokura for District Judge.

We specialize in responsive design for desktop, tablet and smartphone site use from one site backend. Check out some of our past works in our portfolio.

modern-green-home

2013, The Year of Responsive – 13 Beautiful Responsive Web Design Examples

Posted by & filed under Web Development.

2013 will be the year responsive web design gains mainstream adoption. Some may argue it already has mainstream adoption however I think a quick look through the fortune 100 list of websites shows that corporate America isn’t there yet.

Consumption of web content has drastically changed over the past 5 years with the number of users using ONLY desktops dropping quickly. According to Nielsen, the majority of US subscribers now own a smartphone. With internet in their pocket 24/7, users are turning to these mobile devices more often that not to consume their favorite content. By using responsive web design to tailor a website’s presentation to the device’s screen, we improve user experience on the growing number of internet enabled devices. Not only is size something to consider but also the touch friendliness of the site. Many early responsive sites we saw didn’t always consider this key difference from desktop devices. However, as best practices evolved over the last 2 years, responsive web designs are truly becoming device agnostic.

Here are 13 responsive web design examples I like to kick off “The Year of Responsive”.

Modern Green Home

modern-green-home

Red Bull Music Academy

redbullmusicacadamy

The Next Web

the-next-web

Google Nexus

google-nexus

Time

time

Skinny Ties

skinnyties

Temple University

temple

Microsoft
microsoft

Mashable

mashable

BBC One

bbcone

Indochino

indochino

Passenger Focus UK

passengerfocus

Barack Obama

president-obama

Interested in a responsive web site for your next project?

stackoverflow-answers-by-otreva

Answer to: Overlay youtube embedded video with image, hide image when clicked and autoplay

Posted by & filed under Uncategorized.

If using the HTML5 iframe from YouTube, the above won’t work as the video will play in the background with autoplay=1 set BEFORE the image is clicked. I instead used .append() to append the iframe after the click on the image so the video would only autoplay after the click event for the image.

<body>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 

<div id="ytapiplayer2" style="display:none;">
</div>

<img src="https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1" id="imageID" />
<script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#ytapiplayer2').append('<iframe width="1130" height="636" src="http://www.youtube.com/embed/YOURVIDEOCODEHERE?autoplay=1" frameborder="0" allowfullscreen></iframe>');
$('#imageID').hide();
});
</script>
</body>

federal credit union web design internet entrepreneur web design

Press Release about two new projects we launched @ Otreva

Posted by & filed under Blog.

Scranton, PA (PRWEB) July 31, 2012

Otreva Designs, a Pennsylvania website design company, announced today the launch of two responsive websites in the second quarter of 2012 that help their clients reach visitors on all types of devices including smartphones and tablets. The new websites boasts a variety of features which include a fully customized Content Management System (CMS) and a user friendly website structure. Responsive Web design is a developer’s concept that suggests design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

The first site, Krisjones.com, was created for internet entrepreneur and best selling author Kris Jones. The site was designed to be a portal to Kris’s different projects, photos, calendar of speaking engagements, and past blog posts. The site is setup different than most blogs and utilizes the available screen real estate for any device on which it is viewed. It also features a social network wall stream that aggregates all of Kris’s recent posts from various social networks.

The second site, PennEastFCU.org, was re-designed to provide credit union customers with an easy to use interface, quick access to online banking, as well as up to date information about Penn East Federal Credit Union’s new products and services. With smartphone and tablet usage still in a rapid growth period, this new responsive site feature ensures Penn East Federal Credit Union will stay ahead of the game in terms of their offerings to customers.

The W3C (World Wide Web Consortium), an international community which develops the protocols and guidelines that ensure the long-term growth of the Web, announced last month that media queries are now a recommendation. Even before this recommendation, current versions of all major browsers already support CSS3 media queries however more and more websites are likely to adopt media queries in the coming months and years with the W3C recommendation. “Responsive Web design is a web development concept. When implemented correctly, it can help improve the user experience, but not completely solve it for every user, device and platform,” said Mike Averto, lead developer at Otreva Designs. “Every custom solution makes for a better user experience. As web developers, we strive for that every day.”

About Otreva Designs
Otreva Designs is a web marketing company focused on creating web products that help website owners reach their online potential. Creating a website is only a small part of internet marketing. Otreva Designs also offers custom application development, Search Engine Optimization, and PPC Management. For more information on Otreva Designs & its PA Web Design services, please visit http://www.otreva.com or call 888.570.8166

Source: http://www.prweb.com/releases/2012/7/prweb9754203.htm

http error wordpress pdf, png, jpg, upload

WordPress HTTP Error on image, jpg, png, pdf uploads

Posted by & filed under Blog.

Does the above error look familiar? It probably doesn’t happen on file uploads less than 128kb right?

If you have searched around and can’t find the answer, read on.

If you are running Apache, and have Set PHP to run as FastCGI, this is probably your solution. The information below is specifically for Centos Plesk users. FcgidMaxRequestLen –>This is your problem. Before updating to the newest version, it was defaulted to 1gb. Now it is 128kb.

Quick fix if you are command line savy:

  1. SSH into your server
  2. Use your preferred editor (nano or vi) to edit the following file 
    /etc/httpd/conf.d/fcgid.conf
  3. Paste the following just before the final closing </IfModule> tag 
    FcgidMaxRequestLen 1073741824
  4. Don’t forget to restart apache for the change to take effect
    5. /etc/init.d/httpd restart

You should now have no issues with new uploads in WordPress.

microsoft-dynamics-there-is-a-problem-communicating

Dynamics CRM There is a problem communicating with the Microsoft Dynamics CRM server.

Posted by & filed under Blog.

I installed Dynamics CRM 2011 on-premise the other day and tried connecting the Outlook CRM connector but kept running into the error message:

There is a problem communicating with the Microsoft Dynamics CRM server. The server might be unavailable. Try again later. If the problem persists, contact your system administrator.

I was always able to access the site through my web browser to the server’s IP address. But if I tried http://servername in my browser, I would have to enter my username and password 3 times and then get a 401.1 error.

If I tried http://servername I had the same error as if I tried http://192.xxx.xxx.xxx in the outlook connector. Little did I know that that would lead to my answer.

I tried multiple times going through this wizard with no luck.

http://rc.crm.dynamics.com/rc/2011/en-us/online/5.0/outlook-troubleshooting.aspx

Background on my install:

  • Dynamics 2011 On Premise
    • Originally was Roll Up 5 but I upgraded to 6 > 7 > 8
    • Updating didn’t change anything
  • My CRM Application Pool was running with a custom account and not network service.

 

Suggestions if you have this problem:

  1. Can you access the web service via http://servername ?
    1. If you get 401.1 error after entering your account info 3 times, continue on with this guide, you likely have a Kerebros authentication issue.
    2. If the above works for you, you likely have a different error than I and should stop here.
    3. Open IIS Manager on the CRM server,  and click expand next to your servername.
    4. Click Application Pools
      1. Are CRMAppPool and  CrmDeploymentServiceAppPool running as a domainuser or NetworkService?
      2. Mine were domainuser so I ran the following from an elevated command line:
        1. setspn –A HTTP/servername:5555 domainserviceusername_or_computername
        2. setspn –A HTTP/servername.company.com domainserviceusername_or_computername
        3. setspn -L Domainservice_account_name
      3. Finally I went into the CRM Deployment Manager on the CRM server and right clicked on Microsoft Dynamics CRM and click properties.
      4. I set all 4 addresses to exampledns.exampledomain.com:80
      5. Then when I went back to Outlook, I was set!

Here is what led me to the above solution.

stackoverflow-answers-by-otreva

Answer to: Using jQuery Masonry IsAnimatedFromBottom

Posted by & filed under Uncategorized.

Wow, thanks Kevin. I’m not a JS expert but that was easy. That is what happens after staring too long at this.

/** First Instance **/
var $container = $('.smallcolwrap');
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector : '.smallcol',
        columnWidth: function( containerWidth ) {
            return containerWidth / 3; },
        isAnimated: true
      });
    });

/** Second Instance **/
var $container1 = $('.slickr-flickr-gallery');
    $container1.imagesLoaded(function(){
      $container1.masonry({
        itemSelector : 'li',
        columnWidth: 160,
        isAnimated: true
      });
    });

/** Third Instance **/  
var $container2 = $('.navigationHome');
    $container2.imagesLoaded(function(){
      $container2.masonry({
        itemSelector : 'li',
        columnWidth: function( containerWidth ) {
            return containerWidth / 2; },
        isAnimated: true,
            animationOptions: {
            duration: 250,
            easing: 'linear',
            queue: false
            }
      });
    });

stackoverflow-answers-by-otreva

Answer to: Using jQuery Masonry Many times in the same site

Posted by & filed under Uncategorized.

I would use query_posts like this below, you can probably also simplify the code:

<?php query_posts( array( 'post_type' => 'portfolio', 'showposts' => 10, 'orderby' => 'date', 'order' => 'desc')); ?>

<ul>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <li>
         <a href="<?php the_permalink();?>">
             <strong><?php the_title(); ?></strong>
         </a>
    </li>
<?php endwhile; ?>
</ul>
<?php endif; ?>



You can find the parameters that query_posts accepts in the WordPress Codex.

stackoverflow-answers-by-otreva

Using jQuery Masonry Many times in the same site

Posted by & filed under Uncategorized.

I’m trying to use jQuery masonry 3 times on the same site. Each code block works independently but when trying to use all 3 at once, only the last one works. How can I combine these to work yet keep the different values and selectors each has?

/** First Instance **/
    var $container = $('.smallcolwrap');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : '.smallcol',
            columnWidth: function( containerWidth ) {
                return containerWidth / 3; },
            isAnimated: true
          });
        });

    /** Second Instance **/
    var $container = $('.slickr-flickr-gallery');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : 'li',
            columnWidth: 160,
            isAnimated: true
          });
        });

    /** Third Instance **/  
    var $container = $('.navigationHome');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : 'li',
            columnWidth: function( containerWidth ) {
                return containerWidth / 2; },
            isAnimated: true,
                animationOptions: {
                duration: 250,
                easing: 'linear',
                queue: false
                }
          });
        });