Sample reset css file for web project

For developers working on projects, it can be frustrating to find odd and unexpected behaviour on the part of various html elements.

The best way to ensure you as the developer has complete control over all elements is to apply a base set of rules from which you can build your own set of rules.

Here is one example of a reset.css file that handle such instructions.

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Example of working print.css file

Very often developers create the most elaborate websites and user interfaces (UI).  However, it the excitement of creating fantastic looking web pages, they neglect to think about the printed page.

Whilst print is not major factor for a lot of websites, for others it can be a major design consideration.

At the very least, what we’re trying to avoid is forcing people to print out heavy images, page breaks that don’t work on printed pages, links that appear on the page as urls, incorrect page widths, unnecessary headers, footers & navigation bars.

Here is  a working example that will help set the basic print rules and which can be used as a starting block for  rules that are relevant to individual websites.

/**
* Print Stylesheet fuer Deinewebsite.de
* @version 1.0
* @lastmodified 16.06.2016
*/

@media print {

/* Inhaltsbreite setzen, Floats und Margins aufheben */
/* Achtung: Die Klassen und IDs variieren von Theme zu Theme. Hier also eigene Klassen setzen */
#content, #page {
width: 100%;
margin: 0;
float: none;
}

/** Seitenränder einstellen */
@page { margin: 2cm }

/* Font auf 16px/13pt setzen, Background auf Weiß und Schrift auf Schwarz setzen.*/
/* Das spart Tinte */
body {
font: 13pt Georgia, “Times New Roman”, Times, serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}

h1 {
font-size: 24pt;
}

h2, h3, h4 {
font-size: 14pt;
margin-top: 25px;
}

/* Alle Seitenumbrüche definieren */
a {
page-break-inside:avoid
}
blockquote {
page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid }
img { page-break-inside:avoid;
page-break-after:avoid; }
table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }

/* Linkfarbe und Linkverhalten darstellen */
a:link, a:visited, a {
background: transparent;
color: #520;
font-weight: bold;
text-decoration: underline;
text-align: left;
}

a {
page-break-inside:avoid
}

a[href^=http]:after {
content:” <” attr(href) “> “;
}

$a:after > img {
content: “”;
}

article a[href^=”#”]:after {
content: “”;
}

a:not(:local-link):after {
content:” <” attr(href) “> “;
}

/**
* Eingebundene Videos verschwinden lassen und den Whitespace der iframes auf null reduzieren.
*/
.entry iframe, ins {
display: none;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
line-height: 0pt !important;
white-space: nowrap;
}
.embed-youtube, .embed-responsive {
position: absolute;
height: 0;
overflow: hidden;
}

/* Unnötige Elemente ausblenden für den Druck */

#header-widgets, nav, aside.mashsb-container,
.sidebar, .mashshare-top, .mashshare-bottom,
.content-ads, .make-comment, .author-bio,
.heading, .related-posts, #decomments-form-add-comment,
#breadcrumbs, #footer, .post-byline, .meta-single,
.site-title img, .post-tags, .readability
{
display: none;
}

/* Benutzerdefinierte Nachrichten vor und nach dem Inhalt einfügen */
.entry:after {
content: “\ Alle Rechte vorbehalten. (c) 2014 – 2016 TechBrain – techbrain.de”;
color: #999 !important;
font-size: 1em;
padding-top: 30px;
}
#header:before {
content: “\ Vielen herzlichen Dank für das Ausdrucken unseres Artikels. Wir hoffen, dass auch andere Artikel von uns Ihr Interesse wecken können.”;
color: #777 !important;
font-size: 1em;
padding-top: 30px;
text-align: center !important;
}

/* Wichtige Elemente definieren */
p, address, li, dt, dd, blockquote {
font-size: 100%
}

/* Zeichensatz fuer Code Beispiele */
code, pre { font-family: “Courier New”, Courier, mono}

ul, ol {
list-style: square; margin-left: 18pt;
margin-bottom: 20pt;
}

li {
line-height: 1.6em;
}

}

Questions to consider before building your website.

1) What do you want to the website to do for you?
Other than getting new customers what else do you want your website to do for you?

Do you want to save time and make it easier for customers to access information?  As such, should you include FAQ and downloadable resources.  It is to capture email accounts so you can market to them, as such do you need to integrate with Mailchimp or other email newsletter services.

Without actually knowing what you want your website to do for you, how can a developer offer a solution?  
Should you expect to be asked these questions.  I think so.

2) Should the web designer spend time learning about your business?Designing a website requires a lot of time upfront getting to know your business.  Getting to understand your target customers, their buying patterns, your competition, how you are different and/or better than your competition, and hence understanding your essential. 

 

3) How good is the web designer’s communication?
When choosing a web designer, you need to have a rapport.  You have to feel comfortable with them, feel like you can be critical and that they are committed to achieving your goals.   There are a lot of good designers around who simply can’t take criticism or are uncomfortable talking to business owners one on one.

4) Is the web developer able to generate traffic to the website.
It goes without saying that you need traffic to your website and get results online, so it is essential that you make sure the web designer you use has the SEO skills needed to draw traffic and convert that traffic to enquiries.ne.

 

5) Does the web designer know how to build a responsive website?
Google is penalises websites that aren’t mobile-friendly. So making sure your web designer creates your website with responsive design is absolutely necessary.

10) How much should it cost?
Price shouldn’t be the main determining factor when looking for a web designer. You can expect to pay for what you get. Good web design takes time, and that’s what you pay for – their time.  Cheap websites are cheap for a reason.  They look ok, but have not been designed for your purpose.  The cost increases significantly when you think of the opportunity cost.  You only paid $500 for your website, but it gets no enquiries, so it’s actually costing you thousands of dollars every month.

 

 

 

Why pay to maintain my website

So, you’ve created a fantastic website.  You spent a bit more than you initially wanted, but the end result is beyond your initial expectation too.  Having spent your money you now all you want to do is leave it to itself and forget about it for a while.

But, now the agency that designed the website are talking about a maintenance contract.  What exactly is that all about?

What is website maintenance made up of?
There are two types of website maintenance.  The one that I’m not referring to in this post is content maintenance.  A website is only as good as the content.  If you have nothing to say then don’t expect much traffic and as a result, too many enquires.   Live, organic, informative, changing, engaging content is key to Google success, which in turn leads to inquiries.

The second type of maintenance is software infrastructure, the core code that makes up your website and the plugins or additional scripts that makes your website stand out.  That’s the focus of this post.

Website maintenance.
Just like any software (Windows, Excel, Dreamweaver), the codebase needs to be routinely updated to support the latest hardware updates and to keep pace with new, more robust features.  The software that makes up your website is exactly the same.  
The most obvious example is security.  As your website dates, it becomes susceptible to malware and virus’.  Unless these vulnerabilities are managed your website could be compromised for significant periods and at great expense to fix.

The popular CMS ‘WordPress’ is particularly vulnerable because of its popularity.  The thing that makes it so popular (free to use) is the thing that makes it attractive to hackers.
Yes, you can get alerts when plugin updates are due, however, you need to test these updates to ensure they do not negatively impact your main website.

What does a contract include:
Framework updates to ensure that the very core of the website is operating efficiently.  You want to know that the code that underpins your website is not suffering from memory leaks or performance overloads.
This can only be done by a regular monitoring of the site. 
If left until an issue arises it can cause a noticeable disruption to performance (affecting your business) and a big chunk of time/money to resolve.

Plugin updates need to monitored very closely.  Free plugins are extremely attractive to developers because of the time saving the present, however free comes with a cost at some stage and that’s security and compatibility.  As updates are made available you can’t assume the new plugin will work seamlessly with the rest of your site.  Just as the old one was tested for compatibility, the new one should be too in order to avoid crippling your website.

Site Backups are part of most hosting agreements, but not all hosting agreements are created equally.  You don’t want to find that your site backups are only available for certain restore points, or that the database can be restored but not the files.  Before any plugin or core file updates, you need to know without hesitation that a backup is available to restore the working copy immediately if an update fails.

So what would an update involve
Typically we review your website once a month.  We check the speed and the loads it places on the server.  If we find issues we determine what is causing it and if it is website related we address those issues.
At the same time, we look at the core website software and make sure there are no alerts circulating about emerging vulnerabilities.  If we find any we schedule an update.
During the same review cycle we look for alerts affecting any plugins used on your site and if necesary we update or disable the plugin.  
If we have to disable a plugin we need to find an alternative solution (however this may involve additional costs beyond the standard contract).

If we find that an update to code is necessary, we do the following.

  • We make a complete backup of the site and it’s databases
  • We document what test we intend to conduct to ensure the plugin is working
  • We apply the plugin update (out of office time) and run the test
  • If anything goes wrong we do a complete restore and investigate what is required to do better update.

Site maintenance is a necessary precaution to making sure the website you developed to generate business enquires continues to meet it’s objectives.
It is not something you want to avoid.

 

 

 

 

Why redesign a website

Redesigning a website can be a daunting task.  On a business’s list of priorities, the scale of the project can lead to procrastination and business stagnation.  Perhaps updating your business website is genuinely not a priority, but if you’re not sure, here are a few reasons to contemplate.

Your company had recently rebranding, perhaps servicing a new market that has different expectations when communicating it with.

Your website is outdated and features images, fonts or layouts that once worked but are no longer in vogue with your audience.

Internet browsers have improved vastly in recent years both in terms of speed and supported features.  Your site is not taking advantage of these improvements.

Your website is not responsive.  With 50% of traffic to websites coming from mobile devices, your website is not meeting audience expectation.

So what should I think about?
Well before jumping headlong into a redesign project, you should be mindful of your business landscape.  Ask yourself the following questions

What is good/bad about our current website.  Are we changing for the sake of changes or are there issues that must be addressed in order for our company to succeed.

Check out your Google Analytics account and make sure you know what pages have been particularly popular or unpopular  You don’t want to break something that is working.

Take a peek at your competitor’s websites.    There are tools out there that will tell you what their most popular pages are and can help you identify what you can do better.

Talk to customers.  Ask them what they want or need in order to do more business with you.

Why we don’t offer standard prices

Lots of companies publish the price and breakdown of their website design/development packages.
You’ve seen them before, Gold, Silver & Bronze packages, $500, $2,000, $5,000.

This can be reassuring for customers for whom price is the most important component of the job.  These clients feel comfortable knowing what they have to pay upfront, even if they have very little idea of what they actually need for their individual business.

But this model only really effective for the designer if there is a fixed number of design concepts, fixed number of pages and images.  If the numbers aren’t fixed the point between profit for designer and expectation of the customer can be very strained.
But what happens if the customer wants social media integration or search engine optimisation.  Who pays for that, the designer as an ‘expected’ feature of a package or the customer who must put their hand back into their pocket.

In our industry, we can’t offer fixed price solutions because all projects differ.  We can assume all projects will have a common fixed base of requirements, homepage, 5 content pages, 8 images, a contact form, but what else might be required.  What happens to the client who requires 200 pages and images.   How about if the client wants contact emails to be saved to a database or integrated into Mailchimp.  And of course what about the customer who wants ten revisions of pages because detailed requirements weren’t extracted early on.

Companies who offer fixed priced packages fall into a few categories. 
Those who are new to the industry and don’t know how to price their work.  These groups often find they have under priced their projects and it affects their ability to deliver the quality solution their customer expects.
Another work exclusively around free design templates for WordPress.  For this group ‘close enough is good enough’.  This mentality might be due to the fact they need to make a  profit on cheap packages or because they don’t know how to do any better.

Bear in mind, you don’t go to a doctor and expect a fixed price outlook to your condition nor can you expect a plumber to give you a set price on a job they haven’t worked on yet.

We fully understand how comfortable it is for clients to know how much they can expect to pay for a project before they start.  We are also aware that we are the experienced party in the exchange and we are expected to be able to let customers know as early as possible in the initial conversation what we expect the final price to be.
To give a realistic price requires understanding what the customer needs, what their ultimate objective is and what price we need to offer the solution at so we can make a profit.

Give us a call, let us explain it in more details.

Graphic design is more than just logos

Our graphic designers are trained, experienced visual communicators,  who create visual concepts by hand or by using computer software.  Their designs are developed to improve the way you communicate ideas to inspire, inform, or captivate your consumers.

Our graphic designers help to make create brands that make our client organisations readily identifiable by using a variety of mediums to communicate a particular idea or identity to be used in all forms of marketing, advertising and promotions.   Obvious examples are fonts, shapes, colours, images, print design, photography, animation, logos, and billboards. They also collaborate with artists, multimedia animators, and other creative people on many of their projects.

Blue Lily Studios have decades of experience developing brand strategies and creating memorable logos and artwork, however, our graphic designers are also on other projects such as website UX design and many data entry screen designs for server-based applications.  We understand what people need to see on screens and what will make them react most favourable during the on-screen process.

Our designers have an allocated work time which is dedicated to ongoing learning.  They are expected to stay contemporary with new and updated computer graphics and design software, either on their own or through formal software training programs. They must be able to create designs that are artistically interesting and appealing to clients and consumers. They produce rough illustrations of design ideas, either by hand sketching or by using a computer program.

 

WordPress – Why not to use it.

WordPress is the most popular CMS (content management system) in the world with a market share of 20% of all websites on the internet.

However, here are a number of reasons why not use it.

Security & hacks
Because of it’s popularity, WordPress is routinely targetted by hackers.  Often people say that’s not important to because no one would want to hack my site.  But hackers target vulnerabilities in exactly your type of website because they aren’t regularly maintained.  Once compromised, your website is used to send spam across the internet.  WordPress is extremely vunerable unless regularly maintained.

Inconsistent Programming 
WordPress have a very mature development framework, however there is nothing to stop developers adapting their own approach at every level.  This has two negative consequences.  It becomes extremely difficult to manage code if you can’t anticipate where the developer is making their coding updates, especially if you have more than one developer working on a project.  And if developers are not following the established development framework you application is likely to fail after the next major core WordPress update.

Plugins
One of the best features of WordPress is the availability of a massive library of free or commerical plugins.
There are two drawbacks to this.  Not all plugins compliment each other and installing one plugin can disable another, causing significant development time fixing the issues.
Second drawback is that because a free plugin may offer 90% of what you want, people often settle of sub standard solutions without asking what it would cost to have their actual requirement delivered as desired.

Availability of developers
Not all developers are created equally.  WordPress is free, it’s plugins are free and there are tons of tutorials on Youtube to help you get development started.  However at it’s core, WordPress has a mature framework for ‘correctly’ developing applications.
Few ‘competitively priced’ contractors have been trained properly to develop applications using the framework.  The net result is you hire a developer who gets their task done on time and to a low budget.  However, that developer didn’t comply with the framework, so unless you rehire them, the next developer (experience or not) will have to learn what the previous developer did before last time before they can begin to look at your next project.

 

WordPress – 5 reasons why you should use it

Here are some of the top reasons for using WordPress as the Content Management System (CMS) for your next website project.

Popularity
WordPress is the most widely used CMS in the world.  Roughly 20% of all websites build use it’s development platform. As a result, many users are already familiar with the WordPress CMS, requiring less staff training when building a new site.

Open Source (Free)
At the most basic level the product absolutely free.  You don’t even need hosting to get started as it can be hosted on it’s free shared hosting platform.  There are tons of plugins to extend it’s capability for free and there are thousands of free design templates to get you started immediately.

Development Framework
For those who want to dig below the surface and develop their own unique design templates or application, WordPress offers a development approach that if followed correctly, ensures their applications will be speedy and will continue to operate successfully through successive core upgrades.

Simple to use
WordPress was initially designed as a simple blog posting tool.  As such, if all you want to do is post a blog, it’s simple to use straight out of the box.  As the application developed in a CMS that was suited it more complicated projects it’s developers stayed true to the original administration environment.  This means that it’s as easy to use the fully featured rich CMS as it was to use the original simple Blog.

Low maintenance costs
Because it’s a mature product, incremental upgrades are simple to implement.  In fact automated updates can be set up so that the core files are always up to date.  And, because of it’s popularity its easy to find trained designers and developers at competitive prices.

Difference between fluid, reponsive & adaptive design

The main difference between Responsive and Fluid/Liquid Design is that Fluid designs are based laying out your website proportionally so elements take up the same percent of space on different screen sizes.

Responsive Designs on the otherhand uses CSS Media Queries to present different layouts based on screen sizes/type of screen. 

Whilst Adaptive designs see the developer creating completely distinct webpages to be served up to the user based on the screen/device they are using at the time they view it.

Fluid Design
The aim of Fluid or Liquid design is to maintain the same spatial weighting of all elements.  This approach works well on different sizes of screens of the same sort. They look the same on a 24″, high resolution monitor as the would on a  12″ lower resolution laptop. 
When it comes to mobile phones however, the user experience can be compromised due to the screen size of the devices.

Responsive
Responsive design’s begin with scalability in mind.  The designs will present different devices layouts tailored specifically for the type of screen.   
If you’re working on mobile the entire layout may be reconfigured in a single column to suit the phone screen

Adaptive
Adaptive designs require the designers and developers to consider the purpose and experience they envisage customers might require.  They may limit design elements on phones to make it faster to load or focus on particular features of the website that they believe meets the overwhelming requests for users on that device.