Darkstar Media: Blog Categories

Category Archives: Web Design Coding

New website launch – The Sanderson Group

Jim Sanderson GroupThis week we are happy to announce the launch on a new brochure website for The Sanderson Group. For this project we handled both the graphic design work as well as the development.

The graphic design work had to stay within the Scotia Wealth Management branding standards, so we worked hand in hand with their branding team. For the development we created a custom WordPress theme using Twitter Bootstrap as our main CSS backbone. Bootstrap is great for creating responsive website design so the site will look great on any device.



New responsive website launched

Evan Thompson and Associates websiteWe are pleased to launch a new responsive website  for Evan Thompson and Associates. This website was rebranded, slimmed down, optimized, and uses our very own Twitter Bootstrap WordPress Theme for the responsive framework. On top of the Wordpress theme we developed, we also built a custom media gallery plugin to manage their extensive articles that they write for many major news outlets.



Google Sending Out Responsive Website Warnings

Is your website reponsive?
mobility warningDo you know what that means? As per wiki, it means
“Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”

As of April 21st, Google has announced they will be expanding their use of a site’s mobile-friendliness as a key-ranking signal. This change is going to affect all mobile searches, in all languages around the world and impact search results significantly.

As a result of this significant change, Google has been sending notifications to all the webmasters who have existing non-mobile friendly websites. The message also states that the pages will be affected in search results for smartphone users.

Some of the most notable changes include:

  • The Google bot has to be allowed to crawl JavaScript and CSS in order to pass the mobile-friendly test
  • The mobile friendliness is determined by the page level, rather than site wide
  • Tablets are not being affected
  • Google is working with a dedicated mobile index

The fact is that savvy webmasters already have these changes in effect.  Google has been telling us for years that it was coming. However, with this latest announcement, there are a number of webmasters who have a compelling reason to take action.

Now you have to decide if implementing a mobile site or responsive site is right for you. Mobile sites can be customized for mobile users, and they provide a cheaper and easier design. However, responsive designs are more flexible and the configuration that is recommended by Google; however, it does cost more upfront.

The right option is really going to depend on what your site does. The key is to ensure that your website is relevant, helpful and friendly so that you will have the best possible chance of ranking in organic searches on Google. If you need to get your website responsive to meet the needs of Google’s search engine rules, give us a call today.



Faster Website results with Google PageSpeed Insights

google-pagespeedThe internet has grown exponentially from just a highly competitive sphere for promotion and commerce to an overcrowded marketplace where visibility is essential to success. Most competent web developers are already aware of the more traditional tools of higher internet visibility: keyword saturation, social networking promotion, and search engine optimization. But with more and more competitors targeting your own audience, even optimizing your website for search engines is no longer enough. Surprisingly, a new factor has slowly emerged as a growing influence in site rankings-website speed. Google PageSpeed Insights

In 2010, Google came out publicly saying that no longer were keyword optimization, content and authenticity the only means of ranking a website. Website speed was now becoming a relevant factor in search engine rankings. This meant that if your website loaded into someone’s browser too slowly, the amount of traffic you could attract would significantly decrease. Many studies were conducted based upon this latest revelation about Google’s newest methodology for ranking, and the findings were not good for slower sites. In calculating the time-to-first-byte (the speed at which a browser received the first byte of data from any requested URL), there was a clear and causal relationship between the increasing TTFB and search engine rankings. This indicated that websites with better optimized back-end infrastructure (the background programs that help a website react faster in its interactions with users and thus load faster) are the sites that tend to rank higher in search engine results. So if you want to compete with sites that rank higher than you, posting to Facebook and using Twitter may not be enough.

However, just knowing why website loading speeds are important doesn’t help in speeding those loading times up. For this, you need to learn how to boost load times. This is why Google PageSpeed Insights can be extremely useful in this situation. This is Google’s online app that allows you to enter a website URL and analyze its load time performance as well as offer optimization suggestions. It mainly looks at the front-end infrastructure (the different ways users can and possibly could interact with your site) rather than how your site is best optimized to support these interactions (back-end infrastructure). This entails examining aspects that are independent of your network’s capability, such as images, JavaScript and CSS. When used in conjunction with other analytical applications such as GTmetrix, a developer could assess their front end performance and the back-end, further finding ways to optimize the overall performance of their website.

With this is mind, any developer should utilize PageSpeed Insights and GTmetrix to gauge their site’s loading speed performance. After this, developers should implement these easy fixes below to help them get moving in the right direction.

Leverage Browser Caching

Leverage browser caching refers adding expire or cache control headers to your site. When you do this, you are reducing the number of http requests a server needs to process, which reduces load times. You can add these by modifying your .htaccess file. In WordPress, this is actually easier to do than one might think. All you need to do is access your .htaccess file by going to cPanel and clicking on the File Manager. A pop-up box will appear and you will need to click on the Web Root option, all while ensuring the “Show Hidden File” option is ticked off. Once your .htaccess file is opened, all you need to do is cut and paste these directives at the top of the file:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##

After this is done, save your .htaccess file and watch your site’s loading time speed up dramatically.

Plug-Ins

If you are using WordPress, you will also want to install the plug-in W3 Total Cache as an additional way to speed up load times by improving conversion rates and helping pages render (or download) quicker. The plug-in. while speeding up some instances will also slow down others, but you do end up ahead of the game with a better score after installing it. The setup of WordPress is part of the issue and hard to get around.

Minifying CSS

You can minify, or compress your cascading style sheets (the programming language used to change the style of webpages) by going to the website cssminifier.com and following the instructions on how to input the language so you can in return receive the compression language . http://cssminifier.com/

Minifying JavaScript

Javascript is another programming language that allows users to interact with website. To compress the Javascript on your website, you can go to this site-javascript-minifier.com-which operates in pretty much the same way as the CSS minifier site. http://javascript-minifier.com/

Eliminating render-blocking JavaScript and CSS in above-the-fold content

Some Javascript and CSS script in above-the-fold-content (content on a website that is visible without scrolling down) can block rendering of your site and slow load speeds. To remove these scripts, put your Javascript files in the website footer. Also, it is additionally beneficial to try and combine any CSS scripts into others whenever possible. (The W3 Total Cache plug-in can cause an error here)

Once your site developer has fine tuned your website with these easy, basic adjustments, you can look into further ways to speed up your site’s loading time. Some other places for assistance include Pingdom and Google’s own Webmaster Tools  to help optimize any deeper levels of back-end infrastructure to reduce load lagging. Once you have speed up and refined your website as much as possible, you can now focus your attention on what really matters – your content.



Responsive WordPress Theme Developed for Blue Chip Leasing

Blue Chip LeasingWe are happy to announce the launch of another great new website, Blue Chip Leasing. We both designed and developed this website. The content management system used for this website is WordPress and it is fully responsive.

Special attention was paid to 3 key areas of the website and Blue Chip’s main services, Broker Partners, Vendor Partners, and Equipment Leasing. For these key areas we created Calls to Action on the home page as well as the sidebars.



Seven Elements of Great Website Design

website wireframeIn today’s post I wanted to talk a little about some of the elements that make up a great website design. There are a lot of design principles that go into website design but I chose seven I wanted to touch on today and those are:

These elements may not be as important from one designer to the next but they are certainly concepts that all designers should have in the back of their minds when designing sites for clients and those of you who go the do it yourself route should be aware of. Let’s get started shall we?
top ↑

Ease of Navigation

When designing a website, the ease with which visitors to the site will be able to find their way around should be one of the first problems addressed as a web designer.

Deciding on a navigation menu style, left side vs. top would be the first place to start. Each has its advantages but using this menu to help minimize clicks is the real gift. Visitors to the site want to find the information they need quickly and easily and you want them to be able to have access to the information without having multiple links cluttering up your page.

All pages should be accessible from all other pages so that users can quickly get back to where they started without too much hassle, and your navigational scheme/menu should distinguish itself from any ads you may have placed on the page so that there is no confusion.

Attention to detail is crucial when dealing with your site’s navigation. If visitors feel confused or hassled, they will not return.
top ↑

Calls to Action

You can use Call to Actions for many things on your website.

They bring a sense of focus to your site by highlighting a particular idea or product. It quickly draws the eye of the user to the point of the page or site and gives a sense of urgency … creating an “I need to know more!” focus about your goods or services.

Call to Actions can provide a direction to your users as well. It quickly tells them the steps to take to get more information on the topic you want them focused on.

Calls to Action can also help you judge the success of your website. By using tracking software plug ins which align with your Call to Actions, you can have a count of the number of clicks and page visits your site and your Call to Actions receive giving you valuable feedback.
top ↑

Informational Footer

It is so disappointing to see a footer at the bottom of a page that just contains a copyright and nothing else. This is a great space to be creative so let’s use it!

This footer is a great canvas for a second navigational menu or as an area to place social media icons as well as links for more information. You could also use this space as a way to connect with users on a personal level by placing funny graphics or visuals that have meaning to you.

It is also a great area for search engine optimization. By adding a secondary menu linking to your content elsewhere, you can improve SEO rankings without much effort.

Finally, It’s a great place, as a designer, to place a link to your design page as a way of helping users find out more information about possibly hiring you for their next website building project. Please don’t neglect this area!
top ↑

Stylized Buttons

Stylized buttons are a great tool to add to your site’s ease of navigation, organization, and engage your users but they can be tricky when it comes to applying them. Do not allow them to overwhelm the site.

To aid in navigation on your site, style buttons need to add to the functionality and it should be clear from the button graphic, where clicking it will take them. Choosing the graphic for a particular button is very important as you don’t want to confuse or overwhelm your visitors. Stylized buttons should organize the information, not make it less available.

Engaging your user with interactive buttons is always fun but again, you have to be careful. Always keeping aesthetics in mind, being cautious about overwhelming your users, making certain the button graphics match the purpose of the site, and that you are bringing continuity to the site with them, instead of taking it away, are all thing to keep in mind when using style buttons.
top ↑

Responsive Design

Responsive design … we hear that a lot and will continue to hear it a lot. Why? Because we are moving (pretty much have moved) into such a mobile society that it has become a necessity for websites to be designed to be responsive to mobile configuration. This allows the same website to be viewed from both a PC and a mobile device such as a cell phone or tablet. It also eliminates the need for a second site.

As far as SEO goes, having a site with responsive design can aid in your boosting your search engine rankings because the content is already there and there is no need for the engines to crawl two different sites.

Due to the ever changing technology of mobile devices, responsive design is your best bet when designing a site that will flex and grow with the fast pace of technological growth. You are assured of optimal visualization across multiple platforms.
top ↑

Content

Here it is again, content. I won’t send too much time on this because we have talked about it so much but it really cannot be stressed enough.

Content is king. It is now and it will continue to be from here on out. Producing fresh, relevant content is your websites best hope at staying current and falling into the category of one of those really great sites.

The better your content is, the more it will get shared across social media, the more it is shared across social media, the more hits your sites get, the more hits your sites get, the more product or services you sell. It’s a win-win.
top ↑

Images and Space/Visual Design

To say that images, space, and visual design are important to your web design would probably be an understatement. Your website is your storefront. It is your first impression and it shows off your goods and services. To sell or attract the most visitors you will need to use this space in a way that draws in your users but which does not overwhelm them. The space should sell your product, service or you.

Images can be amazing to website when used correctly. You need to make sure they are sized and cropped right, positioned correctly, and that follow the theme of your site. They need to work with your color schemes and engage your users. It isn’t a bad idea to use images that say something about you to develop a personal relationship with your visitors but use caution you aren’t choosing something too quirky or off-putting.

Being aware of your space is key to designing your site as well. The overall visual design should utilize white space as well as images in an effort to ensure that visitors do not feel overwhelmed with clutter. Less often really is more and it is especially true in web design when you are working in such a limited space. Everything should balance and flow in the direction you’d like the users eyes to move. The key is to push them in that direction using space and images without overwhelming them
top ↑

I hope you’ve learned a little something today about the elements of really great websites. The key points to remember would be to make your site inviting, make visitors want to return … engage them but don’t overwhelm them but most of all … have fun!

 



Responsive Website Launched: Triton Background Checks

Triton Background Checks

We are pleased to announce the launch of a new website, Triton Background Checks. This is a fully responsive hand coded website which has web form integration and clear “calls to action” which  lead users towards filling the forms. It works seamlessly with a WordPress blog which is used to handle all the latest news articles and company announcements.

Special attention was paid to SEO (Search Engine Optimization). They are currently on page one of Google and we plan to keep them there.

 



6 Trends in Web Design to Look Forward to in 2015

Hard to believe we are in the last few months of 2014 already!

As this year draws to a close, it’s only logical that as we look toward 2015, we begin to investigate the new trends in web design we may expect to see in the coming year.

We have already seen the demand for responsive mobile device sites evolve and it looks like that trend will only continue into 2015. In today’s post, we will examine responsive design and a few more trends expected to dominate web design in the New Year.

Responsive Design

One of the more dramatic changes in the coming year will be the web browsing shift from PC to hand held, mobile devices.

Responsive design refers to your web sites ability to switch views and ease of use from PC to mobile device. Our society has become so mobile and with the thirst for information while people are out and about, having your website formatted to switch effortlessly from PC to mobile viewing is no longer a just a bonus but quickly becoming a downright necessity.

If a user can’t easily navigate your website on the go from their mobile device, chances are pretty good they will not be back.

Flat Design

Flat design deals with what we see when we view a website.

Web designers are staging a revolution of sorts by throwing out the patterns, bevels, shadows, and textures of traditional sites and replacing them with flat, smooth, clean lines of flat design. Some pros and cons of flat design are as follows:

Pros

  • Elegant, clean lines
  • Bold, vibrant colors
  • Smooth, minimalistic look
  • Faster page load times

Cons

  • Flat design is pretty trendy right now
  • It runs the risk of being too simplistic
  • Color schemes can be hard to match
  • Ease of use is sometimes compromised

More Scrolling

Again, the steady switch to mobile device is affecting web design and designers are meeting the challenge by designing sites with more scrolling opportunities.

Mobile sites can be difficult to use even when they utilize responsive design simply because of the size of most mobile device screens. Click on images or tabs on the site can be difficult for even the most petite hands so, in an effort to promote ease of use, many designers are reworking sites to include more scrolling and less clicking.
This is particularly helpful in sites that have multiple pages. Making the site more user friendly should always be first and foremost in a designers mind. If the site is not user friendly, visitors will not return.

Larger Images

As the internet replaces other media, it has changed the way we like to receive information

We have largely become a very visual society. Using larger images with text overlay is a great way to capture your visitors’ attention and get them to stick around to read your text.

Images should be engaging but not dominate the entire page, nor should the page be cluttered with several small images. Finding the right larger image to pull in the reader but not overwhelm them is the key to making visitors to your site come back for more.

Background Videos

2015 will see a rise in the use of background video embedded into pages. Having too much information on a web site is a huge turnoff for browsers.

Not only does it clutter the page and make visitors to your site uncomfortable but it can also affect page load time.

Designers are getting around that now by embedding informative video into the site pages. Now, when you click on a site, you’re treated to beautiful imagery that tells a story about the site instead of having to read everything on the page. What did I say about the internet turning us into a more visual society?

Typography

In the past, type face and font packages have not been very cost effective for most consumers hiring a web designer.

Now with the advent and acceptance of open source formatting, such as Google fonts, who offers them for free, that is quickly changing. Open source formatting has also brought down the prices of commercial type face and font packages. Designers can now pass on their savings to the consumer.

Designers can really express their creativity with type face and fonts through these open source formatting opportunities. Being able to vary the type face on a new site makes it stand out from others in a way that would invite users back to the site over and over again.

So there you have it, a few things 2015 has in store for us. With all these new designs and features the future sure is looking bright for web design.

 

 



phpExcel: Adding accounting format and review

While working on a long-standing CMS (Content Management System) project I needed to find a way to export database results into a working Excel document. For years I have been creating functions which exported .CSV files which were then easily imported into Excel, but for this project a working Excel document was needed and I was lucky enough to stumble across PHPExcel. I am very pleased with this code and I have spent the last week learning it and writing an export function. You can download your own copy here https://phpexcel.codeplex.com/.

The functionality of PHPExcel is very in-depth and I only scratched the surface of what it can do. Basically it can do just about anything Excel can do. One thing it didn’t do was save number formats in the Excel accounting format, which was having the $ sign on the left of the cell while the numbers would be aligned right. Luckily it is very easy to modify and contribute to PHPExcel and I managed to figure out a way to add the accounting format.

This is how you add accounting format to PHPExcel

 

First open PHPExcel_1 > Classes > PHPExcel > Style > NumberFormat.php

Within this class add the bolded text.

class PHPExcel_Style_NumberFormat extends PHPExcel_Style_Supervisor implements PHPExcel_IComparable
{
// Add this
const FORMAT_ACCOUNTING = ‘_(“$”* #,##0.00_);_(“$”* \(#,##0.00\);_(“$”* “-“??_);_(@_)’;

}

Then when writing your export code you now have a new number format

$objPHPExcel->getActiveSheet()->getStyle(‘D’.$current_row.’:E’.$current_row.”)->getNumberFormat()->applyFromArray(
array(
‘code’ => PHPExcel_Style_NumberFormat::FORMAT_ACCOUNTING
)
);

One very important Item to note, this only works in Excel itself, not Open Office! If you are using Open Office it will not display the number format like Excel does, this is because of Open Office limitations, not PHPExcel.

While I haven’t found an official WordPress plugin for this, this site is a WordPress site and as you can see I have integrated the functionality into my website. Please use the form below to test out and see how it works. I hope you find this functionality as useful as I do.

Test it out yourself and export an Excel file

 





Only a text only name a proper number will work!!



Twenty Fourteen Responsive WordPress Theme Review

twenty fourteen themeTo start off the new year I decided to play with the new Twenty Fourteen WordPress theme. It is fully responsive and aimed towards online magazine web sites.  After some initial exploring and figuring out the new features, I was pleased with this theme. Here is the demo website you can use to try all the page and post types, http://twentyfourteendemo.wordpress.com. I won’t go into all the features and page types here, that site is a good resource for that. I will point out some great features and a couple of bugs fixes.One feature I liked was being able to set “featured” posts to display on the home page by using a pre-determined tag, they suggest using “featured”. It is a very easy way to feature the posts. In the past I would create custom fields and write PHP functions to display the posts.  This saves me having to do that programming. Also with these featured posts, you have the option to display the posts’ images in a grid format or slider format (jQuery lightbox slideshow). In the past I have found that getting the right jQuery lightbox can be tricky (it can conflict with other jQuery code in WordPress), so having this built in and working is a refreshing change.

The top menu swaps into a nice compacted responsive drop down menu when viewing the theme in tablets or smart phones. For developers, the media queries are very easy to follow in the style.css file.

The theme comes with 3 default pages: default, contributor and full width page. The full width page template is a bit deceiving.  I initially thought it would remove the left side widget area (not sure I like the left side yet), instead it creates a page with a full width header image, yet still keeps the widget area on the left.  Also, with the contributor and full width pages, the top title and featured image get cut off at the top.  This can be fixed in the CSS on line 3220 by changing the margin-top: –48px to margin-top: 0px. I imagine they will fix this bug in the first update. The tag is a bit long:

Change

.full-width .site-content .has-post-thumbnail .entry-header, .full-width.singular .site-content .hentry.has-post-thumbnail {
margin-top: -48px;
}

to

.full-width .site-content .has-post-thumbnail .entry-header, .full-width.singular .site-content .hentry.has-post-thumbnail {
margin-top: 0px;
}

The Twenty Fourteen theme is left aligned as well (I personally do not like this). It is an easy fix to center align your page. On line 805, the  .site tag can be modified, add margin: 0 auto.

Change

.site {
background-color: white;
max-width: 1260px;
position: relative;
}

to

.site {
background-color: white;
max-width: 1260px;
position: relative;
margin: 0 auto;
}
As I start to customize this theme more and dig into it with a real web design situation, I will discover new features and bugs and add them to this list. Overall though, I am pleased with the theme and will use it immediately for my base code of new themes.
3.5/5 stars

 



Or Call 416-450-5439