SMICK.NET | Website of Mike Smick Graphics and Web Developer

In-Browser Temporary Editing for Screenshots – Bookmarklet

If you ever need to make a webpage screenshot to show a UI change, or maybe just mockup purposes, a nice way is to utilize the browser bookmark toolbar and a script that enables Content Editable property on the body of the web page.

When you do this, you can click around the text and start typing. Things like button text, table, paragraph copy will start to change.

Drag the following links to your bookmarks toolbar (make sure it’s showing on you browser (View > Toolbar > Bookmarks)). The first link enables text editing, the second link disables it again. And if you need to scrap your changes for some reason and redo them, just hit refresh on the page, it will reload to the state it was in.

Make HTML Editable

Turn Off Editing

Once you get your changes right, you can take a screenshot or print the page and your changes should remain for those purposes. I imagine this tip helping project managers who want to show a developer how a task should be completed but have struggled doing so using graphic software.

December 2, 2015 at 11:28 am | design, webdev | No comment

My thoughts on website animations

Everyone seems to want animations these days. And they usually don’t realize how much more expensive it can get. Animation has its place on the web and finally we are creating experiences that we have dreamed of being able to do. But at the same time, I can’t help run through my mind a series of questions when animation starts getting hairy as part of a project where it has no business being, whether for ROI or being in the budget in the first place. The biggest question with animation is, if it’s easy enough to be cheap, is it worth doing or has everyone already seen it, making it just white noise.


Upon multiple viewings, does it become something you’re just waiting for?

Is it slowing performance on any device?

Does it make editing your site more difficult?

Does your audience care that something moves around?

The sun will eventually burn out taking all of humanity with it. Knowing this, will you still care about spending money on the animation?

Is it a commonly used trendy convention (played out?)

Is it your idea, or was it somebody selling it to you?

Does it likely score you more business?

Does it pull the eyes away from other important messages?

Does it make your offering look more expensive?

Does it help get point across?

Is it impressive (to people that actually matter)?

February 16, 2014 at 7:55 am | design, graphics, webdev | No comment

Some thoughts on SaaS projects and pricing

There are a lot of web services out there that impress me. Some I’d really like to commit to but I simply can’t justify the cost. It may benefit me to have but I just can’t make myself pay money for it against what I feel is a proper price. I think the pricing structure on many of these new services is just off and becomes a turn-off for sole-proprietors. Because there is a lot of competition, it makes your product easy to ignore. The trend of $29.99 per month a very common price for SaaS products. Things like SaaS accounting or enhanced social media tools and bulk email software show that trend. I’m starting to see $39.99 as a base price too. I think some of these programs can become deeply ingrained in the workflow of companies. And some find their service uniquely meeting their needs. So big deal on the price right? Well I think it’s fair to make a few comments on pricing and SaaS trends in general from a perspective of a small business owner.

  1. Your name doesn’t mean diddly to me once I’ve evaluated your service. I know you needed a funny name to capture me and the attention of media and the heart of the public at first but it ends there. The service is either strong or weak. And the more “creative” the name, the more silly I may find recommending it to others. (e.g. GIMP). If your service is disappointing and you’ve associated it with baby mongoose well then congratulations, I now hate baby mongooses. (mongeese?) Whatever, just don’t overdo the name. I’d rather have a boring name and be rich than any alternative really.
  2. When you base your pricing directly on your competitors and other Saas projects, or in general follow trends, it’s obvious and annoying. I realize imitation is like an economic model, but a lot of us think you simply have no clear way of justifying anything. I realize that I may be hard to please and others buy into the trap more easily, but keep in mind that when you compare yourself to others, you also have to react more often to others. So if your competitor that you worked so hard to match drops their price, where does it leave you if you based everything so closely on others.
  3. I’m seeing 7 and 14 days trial are common and “Sign up Free” button next to that, as if you you think that’s somehow incredibly generous. Now I realize you read a blog post somewhere that said that was a cool way to get sign ups. But once again you’ve helped me conclude how unimpressive you are at this. Here’s a hint for you: At companies large and small, nobody has any time to evaluate something properly and share their thoughts and get feedback in just 7 or 14 days and be able to do a demo with everyone. Even 30 days still looks like you are stingy idiots. All of us evaluating this crap (I mean your really great offering) know that it’s costing you barely pennies to have our account folder created. All the communication is auto-generated so when you put a 30 day limit on this it just sounds artificial and arbitrary and lacks confidence. Instead why not give me three months to evaluate the software. Let me have enough time to make a decision among my 5 stakeholder colleagues. And what if I get everything done in that 3-month period without paying? Well if that scares you, it sounds like you need to kill off free trials all together. Because I know plenty of people who can complete the same project in seven or fourteen days that others would stretch to three months. Someone can always game the system. I think this comes down to confidence and actual worth. If your service is more of a one-and-done kind of thing maybe a monthly fee isn’t really appropriate and you need to view it that way.
  4. Take a look at Turbo Tax and TaxCut. Nobody likes paying for tax software. But we do it. And we sit on it for months, finally use it for 2 days and then it gets binned till next year. We paid maybe $30 or $99 for that and it’s something we could have done essentially for free on paper. I’m not necessarily praising Tax Cut or Turbo Tax because I can’t get over the fact that the IRS doesn’t have it’s own legit tax wizard software. And that we pay less for submitting (paper) which takes more overhead on their end to bother with. Whatever. What I’m saying is just look at those models outside your industry especially those where everyone buys them almost like mindless drones. Find out what they might be doing right.
  5. Don’t act surprised that people want to self-host. Why not plan for it where you can make some real money from that option. Some companies really don’t like or have policies against having 3rd parties host their data. They may really love your offering and would use it except for that it can’t be self-hosted. They might even be more than happy to pay a massive sum in order to use your software in-house. And your fee structure could be wildly different for that kind of client. These clients might be trying to move away from some buggy Sharepoint install and replace with your service. They could be paying a consultant team $50,000 a year to maintain it. If yours is a dedicated service that requires less maintenance, you might still be able to make say $15,000 or $20,000 by having a self-hosted method, provide support that beats a more generalized consultant and everybody is happier.
  6. Have a one-project model. Not everyone is going to live in this software. Sometimes it’s just a piece of software you use for a phase of one project and then you get out. I realize that I could just unsubscribe, but I don’t want to deal with that chance that the project gets postponed in the middle and then resumes 45 days later and this fee is just another detail to worry about. If I know that I can get this phase of my project out of the way by using your software and it’s gonna just work and not disappear, I’d be comfortable choosing your service. Did you all forget that people pay for peace-of-mind? Well start remembering because that’s really the point of software, to make the details easier to deal with and give us a comfortable workflow that matches our brain better. People might prepay for the software, use it actively for 2 months, would like it available but uneditable for 14 months and afterwards completely deleted. Account for this, make it easy for us to pass costs to our clients in a predictable way.
  7. I look at the number of users limitation on Saas products and again it just looks artificial. Artificiality breeds mistrust. Think about it. because I have four people I have to pay 10 times the amount because I’m suddenly an enterprise customer? The thresholds simply aren’t generous or realistic enough for me. One user vs three users isn’t bogging down your servers. Smart customers know this. So why are we pretending that this threshold is meaningful. I don’t have an answer for this dilemma that fits every company but I can just reiterate that peace of mind and engendering confidence should be the goal. Arbitrary limitations do not engender confidence with me. Or consider this. Show me why a fourth person makes all the difference in the world and should double your cost and my price. Give me a page that explains why four users increases your support volume so much that you have no other choice.
  8. Equal price for additional users doesn’t feel right. Although I can see in some cases it probably makes the most sense. It’s very democratic but let me just comment on this structure a bit. So if I have your program dedicated to a specific set of tasks my company depends on, I probably have a dedicated user for it and happily pay $XX.95 a month for her to get her job done. But I probably also have people who sort of buzz in and out to check on things just periodically. One one hand, I don’t want to set functionality limits on these secondary users, but they will use it so much less that the value isn’t as high for them. To me those users shouldn’t cost the same as the dedicated user and maybe should be considerably less. The upside is if it’s cheaper to add people to the account the more likely I’ll add more people and you might gain another $4.95 a month for three more users who logged in two times the entire quarter. This is another example of setting people’s minds at ease and reinforcing the reality that it costs very little to have an account on a server somewhere.
  9. If your website has default Bootstrap written all over it, and your app looks like bootstrap that’s totally fine with me. Absolutely fine to the point where if you’re getting complaints I think you should ignore them. Bootstrap can do most people quite well. Because it’s so common it also caches well and speeds everything up the more popular it is. It handes web app functionality and it’s a very cost effective way to do UI. Rather than a yawn, I’ll probably think you’re a pretty smart team. With that said, by using unstyled bootstrap also revealed that you’ve leveraged and saved money from open source software and I absolutely expect savings passed on to me. Can you see that there’s a distinction. That I expect a savings yet I’m not devaluing it? There is a real distinction there in terms of reputation. I actually think it’s very smart business. I use a self-hosted app right now that’s bootstrappy for invoicing. I like it a lot and I know that it can be modified more easily and upgrades and add-ons will also share that efficiency. It’s a good move to play in a lower-overhead tier. Because of that, I will not absolutely demand, but I will assume a better price. Keep this in mind and adjust accordingly. But be smart about it. Look at fast food. It’s very inexpensive and very profitable when you make efficient decisions. Software can be better because efficiency decisions don’t effect long-term health either.
  10. I wasn’t sure I’d get to ten, but here goes. Leave behind older browsers without shame but do your best to support all the latest ones especially mobile. Some things are available on Chrome that aren’t on Firefox and that bothers me because there’s cutting edge and bleeding edge. Certainly IE and Android and iOS and Opera make it pretty difficult task to support everything. Old browsers don’t really help you or your client base. And though I said earlier that you should support the idea of self-hosted installs and the opportunities there I firmly believe that older browsers hinder you moving forward efficiently. Moving to Saas offerings to me is a signal to progression. And the amount of time trying to implement something sophisticated such as a html5 canvas app backward compatible to previous versions of IE mean that the rest of us pay a lot more for your overhead to maintain a very small number of clients. As a result, features and fixes and mobile improvements don’t happen because the team is forced to focus an inordinate amount of energy to old stuff. With that said, if a product of yours worked on IE in a previous version, maintain that version for people and allow people to cross-grade smoothly if possible, but don’t continue to move backwards. If I’m stuck on IE8 for the next three years, I’m probably not used to change and improvements anyway so keep me on the old version that gets little to no upkeep. Consider scaling your prices accordingly too. If the old version gets 5% of the maintenance maybe the agreement needs an end-of-life clause and an adjustment to pricing makes sense. Use these old versions to leverage customers to upgrade to the latest browser and version of your system. Make it clear that an upgrade savings leaves IE8 behind and the benefit is a cheaper monthly price. Consider these options and don’t discount the benefit to transparency for things like this. If you need to change prices to support old systems or new upgrades, make it clear and transparent.

My last comment regarding Saas pricing is that no matter what you think about your product, it’s no where near as essential as email and reliable email can be had for $24 a year down to near zero. So if you’re not as essential and everyone falls back on email as the most dependable way of transmitting communication, how does that configure in how people will perceive your product’s value and what will convince them to sign up. I see this a lot. A product is useful and replaces email chains and attachments but it’s priced way out and the added hassle of getting everyone on board with logins is a brain hassle that we end up paying for when we can just fall back to email for the time being. Think about that.

January 12, 2014 at 12:43 pm | computers, freelance, rants, webdev | No comment

Ways of organizing your CSS to achieve flow

Could you be writing your CSS better? I’ve been thinking about my project flow lately and noticed there’s a lot less flow and a lot more rework than there should be. I think that’s because I’m always trying new things. But I suffer the consequences of not establishing consistency and clarity. In this post, I’m talking specifically about how you wire up your main CSS file. When I talk about organization here, I’m talking about categories inside that css, so it’s easy to traverse. I firmly believe it can help speed up development and improve everything.

CSS Comments

This is how you can create categories. Write CSS comments out so they visually look like category headers.  Example:

/* ========   This is a Category Separator CSS comment   ========= */

Everything under this comment would be idenfied with it as a category.  I’ve made a lot of variations on this type of header. I’m not sure what  you like but using special characters appears to work well. I like Equals signs because they create a thick obvious border.

Categorize by function

What are the bits of CSS affecting?  Consider that if you are covering font changes, you can group all your typography under one header. So when you make a font change, presumably that section will be easy to find and less stuff to read through. Same for layout. Are you changing the padding for one or more divs? Put it under the Layout / Div category.

/* ========   Reset (if applicable)   ========= */

/* ========   Colors   ========= */

/* ========   Typography   ========= */

/* ========   Layout / Div   ========= */

/* ========   Misc classes   ========= */

Categorize by task / override

CSS means Cascading Style Sheet. The cascade is like the waterfall down a multi-level rock formation. The code described at the top, falls all the way down. So the global rules you put at the top. Underneath that, you continue with the exceptions to the rule, going from genral to specific. You can think of this and how your project is built. The template will have some standard things, and trickle down to the very specific. Some changes might only occur on specific pages, while others only occur in a single spot on one page and never again.

/* ========  Base (styles every page)   ========= */

Things like the menu bar, the header maybe (unless it will change in appearance leveraging CSS)

/* ========   Site Section Level changes   ========= */

/* ========   Specific Page Styles or Overrides   ========= */

/* ========   Occasional Styling   ========= */

/* ========   Minutiae (could almost be used inline but decidedly better here)   ========= */

Categorize By Visual Areas

This one is really common for me, but I grow it organically for each project rather than commit to specific labels each time. I’m not necessarily sure how not to do this in some respect on projects because my brain thinks this way.

/* ========  Body  (A few type or color global values )  ========= */

/* ========  Header  ========= */

/* ========  Navigation Menu  ========= */

/* ========  Content / Main  ========= */

/* ========  Gallery  ========= */

/* ========  Sidebar  ========= */

/* ========  Footer  ========= */

/* ========  Misc. or further addendum ========= */

I just want to point out this last Misc. section I also would add things like classes that the WYSIWYG editor uses.

Collaborating with Others

If you work alone, you benefit from being able to drive standards 100%. If you work with others, you want to best conform but also to discuss and agree to ways to do projects. Mostly it will come down to cross-training.  A lot of developers do quick and dirty CSS while fixing the widget they are working on and unfortunately never go back to clean it up.  This behavior will go on and it just needs to be repeatedly trained.  Ongoing project improvements and maintenance require some attention to details.  When you put things in categories a benefit you’ll find is eliminating redundancy. When everyone is referring to the same codeblock of CSS for edits to the base or header or typography, there’s a good chance they will see the previous entry for that class so it won’t be repeated.

When you work in a version control system you can see who added what to the code, but whether or not that’s the case, consider this. Some changes might be best identified near the code itself.  Let me give a quick scenario.  Let’s say you are a 3rd party agency taking on a new section of the site.  Your front end dev may not have a couple days to get a full understanding of the site, and all the current or outdated pages under the hood. Your task might be to build a certain landing page page in the CMS. If you have say 4 hours to work on something while the main developer is on leave. Instead of meddling with the code, create your own section.  If it happens to break some outdated legal page, at least your code is easy to find.

/* ========  Edits by Open Ground Co (for x landing page 11.30.2013) ========= */

Another variation on this, if you happen to need to make a fix to an existing line, consider a quick comment after it:

.classname {padding-left:-1.2em; }  /* == OG edit 11.30.2013 == */

These variations and tips are attempting to say the same thing: “Begin with the end in mind.”

December 1, 2013 at 12:36 pm | computers, CSS, design, freelance, Front End Development, graphics, webdev | No comment

How to create an admin user in WordPress when you only have FTP access

So this is pretty cool. If you lost your admin information, but you still have ftp access you can edit the functions.php file in your theme to create a new admin user. This is a hack and really useful, but also means you need to protect your own sites if you happen to have other people with FTP access.

//this goes in functions.php by the way.
function new_admin_usr(){
$user = 'FillInThisNewAdminID';
$pass = 'ANewPassword';
$email = '';
if ( !username_exists( $user ) &amp;&amp; !email_exists( $email ) ) {
$user_id = wp_create_user( $user, $pass, $email );
$user = new WP_User( $user_id );
$user-&gt;set_role( 'administrator' );
} }

April 1, 2013 at 5:35 pm | webdev | No comment

Estimate projects using OpalCalc

I created a video tutorial of a sample website project breakdown using some new software I found called OpalCalc. Estimating project costs for my freelance website and design projects is made easier with OpalCalc.  I think though you can do the exact same thing using other tools, this little app has a way about that works for people whose brain is maybe wired differently, or who just need something to help lay it all out quickly.

October 26, 2012 at 5:23 pm | design, learning, training, webdev | No comment

The infected

Thanks to an evil sequence of events, nearly every single one of the sites I maintain or host for people became infected last month with viruses. This virus was injected somehow into a variety of files and showed up (if people ran certain antivirus scans) on their system as a trojan. I’m not sure how effective it was other than causing an alert. Unfortunately I didn’t know about how prolific the virus was. I was working on my Mac laptop and my iPad. I had no reading of a virus, no infection. Later i did identify that some of the sites were contacting an IP address when the page loaded. Even worse I installed a mac version of the virus software people were seeing the alert with and I got no warnings then either.

I’m very sorry for the inconvenience. I’ve learned a lot in the past few days on this topic. Coincidentally the webhost I use, suffered a hack invasion around the same time period. Possibly related, but I’m not sure.  I do know that one of my sites was able to infect the others itself, meaning the code sourced back to another site.  Also, in a couple cases, plugins for the WordPress CMS were vectors for the hack as well as a theme I was running had the virus inserted into javascript files. WordPress is pretty solid, security-wise on its own, but plugins can be more vulnerable.

I wanted to show you a part of the virus. This piece was an injection of code into the main page (index.php) files  of various sites and subfolders. The code is also escaped or encoded itself so you can’t see exactly what it’s doing.  The code part, anyone could copy and duplicate. Not as easy to insert into a webpage though from the outside.

The fixes? I have several. After doing some manual removals, I upgraded all the sites’ WordPress software. WordPress had an upgrade available around the same time too. This upgrade will overwrite the virus files with the fresh install.  I’ve also looked at the plugins and themes of the sites to ensure they aren’t infected as well and upgraded when possible.  And I’ve installed some watch files on the site so I can detect changes like this myself later on.

This has not been a fun experience, very time consuming. I’ll be making some other changes to separate my sites more so at least they can’t infect each other again either.

March 4, 2012 at 2:32 pm | forensics, webdev | No comment

Free and open source CMS’s that don’t suck

Other than for a couple outlying examples, a CMS is the right choice for a website, period. Now keep in mind though, the the point is to make your site easier to update and retain flexibility that you need. A CMS can be an enabler.  What a CMS often does though is put you in a position where a slight modification on a single page requires you to go back to the drawing board and figure out how this odd page will still work. Unless of course a plugin or two will save the day.

But I wanted to recommend a few that you may not have heard of, content management systems that just rock. Everyone needs choices, especially in technology.


You probably know about this one. It is awesome. I have used it for years and I’ve bought some of the best open source commercial add-ons for it because it’s a mainstay. But I want you to know that even WordPress can make your life difficult when you want to customize a single page or section. It’s great when the plugins work and solve the problem, but sometimes they just don’t and you’ll be building something outside scope that can take you a while. So you have to keep the ROI in check. Good planning will tell you how WordPress will make you happy and make you sad.


I hope you know about ModX. Because it’s genius. It takes the good parts of a CMS and adds in a feature called snippets. These are chunks of code such as PHP or Javascript code and insert it into a post easily. You can store these snippets and use when you like with an easy tag added in the page editor. Unlike WordPress, ModX makes this easy and makes it more attractive for some projects.  Get revolution from


Concrete5 looks so beautiful. The method they use to log in and break up a page, which allows on-page editing is something you’ll really be able to sell your clients and friends on using. Buy the add ons, support a good open source system and you’ll see how everybody wins.


Another extensible open system. The name itself encourages you to open it up, tinker and continue development.


Like a few of the others, this system presents no limits to how you want your site designed. It offers modules and widgets to cleanly extend your site’s capabilities. They also have a vibrate community and some very professional training videos.


Wolf CMS has the php coder in mind. You can publish regular text of course in the CMS editor to make your pages, but the real benefit comes because you can add PHP code, loops and things right in the editor. This is often shunned by other CMS’s, but it is a welcome feature. So you might expect as this is built for coders, it might have an interface that you’d want to avoid. Not so, in fact it offers one of the cleanest admin sites I’ve seen.


I’m not sure this would be my first choice, however Symphony is unique in that it uses XSLT as the templating background. The system is efficient and the way it handles dynamically resizing of images is unique and quite clever.

Whichever you go with, make sure you find the sources of support that help you the most. If you want to pay to get an annual support package from the company, that’s one thing. If you’d like to just know there are a few hundred people lurking in that CMS forum, then you can post questions as you build and tweak your next website using the CMS that suits you best.

October 26, 2011 at 4:20 am | publishing, webdev | 2 comments

Fighting the PDF web problem

PDFs are a pain. They are VERY good for a few things, but they make sharing difficult because of a few reasons. 1 is for mobile browsing, the browser has to handle the PDF, download it, launch the client. And so many sites don’t identify the download size of a PDF, or alert you in the first place that the link is a PDF.

Because of the annoyances embedding converted PDFs has become somewhat popular, taking a PDF, converting it using a 3rd party service and them embedding it using Flash or a unified Javascript / HTML player.

These are somewhat improved over a straight PDF embed and download. But you’ll find some services are better, faster or cheaper than others. And if you’re taking the time to optimize, upload and embed your document, you want it to be available for the future and easily accessed.

Scribd is arguably the most popular doc embed services. They went from a Flash player to a very capable HTML5 player. It works well and renders fast. It also has a great full screen feature. But for downloading and printing, your visitors will have to login to the service which is annoying, jarring and takes them away from your site. It’s not that the reasoning of Scribd isn’t clear, it’s just not the model many of us would like.

In any case, I wanted to keep this short and offer you a few ways to get docs online and embed them to get around the PDF problem. One only hopes these technologies don’t introduce a host of new problems for you.

September 15, 2011 at 1:26 pm | media, publishing, webdev | No comment

How to link to a GPS coordinate on a webpage using geo url

Since smart phones are all smartypants these days, many of them have preloaded map system or are hooked to Google Maps. And with the popularity of mobile sites, it’s nice to think we can share our locations with people to quickly find us on GPS.  I discovered through a few sources that you can actually link in a webpage or email a link to GPS coordinates.  This is pretty cool and I think has some use cases.

“Hey, come to our office open house party where we have hidden buried treasure! [inserts multi-line street address]”

Now my Nexus One is smart enough to detect some addresses on a page or email and send to Google Maps. But that doesn’t mean all phones are, nor does it mean that Google Maps is the recommended GPS app. If you were writing an email or a website that could help assist someone finding your place, why not link right to the location for GPS as well as typing out your address? And for good measure, underneath that you could link to the Google or Bing Map as well to give them choices. OR you could even use a QR code to link to it from a paper flyer. (Yeah you like that idea don’t you!)

Here’s how you write a GEO URI in HTML for use on a webpage:

<a href="geo:38.62464092991612, -90.18476128578186">go here</a>

But wait, that’s a fine bit of knowledge however, how does one get the coordinates to a location in the first place?

Good question! Is it something in Google maps you can easily get? Unfortunately it’s not an “out-of-the-box” feature of Google Maps, but I’m going to make it simple to get GPS coordinates using a quick Javascript hack on the Google maps webpage.

  1. Find your location on Google Maps, right-click on the map and choose “Center on this location”
  2. Paste this code snippet into the browsers address bar (all by itself) and press enter.
  3. You’ll get a popup that returns the GPS coordinates: (38.62464092991612, -90.18476128578186)
  4. Remove the parentheses and construct the geo url as I did above.
    <a href="geo:38.62464092991612, -90.18476128578186">go here</a>

That was the full HTML code. If you were writing an email to people, you’d want to write in Rich Text mode and then do a hyperlink to just the geo:38.62464092991612, -90.18476128578186 part.

So let’s try it together shall we? Crank start your mobile browser and… Here goes nothing!.. GPS LINK GO!!!

Note: If you tried to click that GPS link from your PC right now, it will likely fail because your home PC / laptop doesn’t have a GPS program to launch. So come back here with your phone and try it when you get a moment.

More Information / Sources

GEO URI Wikipedia Article
Javascript Google Map Coordinate Hack
Dive Into HTML5 Geolocation

January 16, 2011 at 5:54 am | learning, webdev | 1 comment

Next Page »