back to top
shopping basket

View your basket

Photobooks from PiciScan

What our customers are saying:

I'm amazed by the superb resolution and quality of your digitised images, especially of the pro portraits

Read more...

The PiciScan Web Design Blog

Hi, I'm Mark Syred and I founded PiciScan back in July 2010. Since then, as well as doing the majority of the scanning, I have also designed, re-designed, and re-designed again the PiciScan website. I'm not entirely self-taught, but the majority of what I have picked up has been from helpful blogs, like this one, elsewehere on the Internet.

PiciScan Web Design Blog RSS Feed

Last updated: Thursday, 24 March 2016

A bit about this blog before I start

After having built the first incarnation of the PiciScan website using Microsoft's Office Live, Small Business tool, I was pretty sure that there was a better way. I became quite obsessed with the source code and wanted to make this as minimal as possible, thinking - rightly as it turned out - that if there was less code, the web pages would take less time to load up. I also didn't like to see code 'lying around' not doing very much. I enrolled on a basic web design night-class at a local secondary school to see what I could do.

One of the first things the tutor said during the first session was, "There are those people who like to write their websites from scratch in code… But, they're just weird!" I thought, "But that's me!" I was happy to be thought a little weird. The course was useful, introducing basic techniques. Halfway through the last session, css was mentioned for the first time and it was as if a light had been switched on in my head. A few people went on from the course to become professional web-deigners, others may never have looked at a line of html again. But, for me, it gave me the voacbulary and confidence I needed to go and learn more.

Most of the techniques I will describe in this blog, have been described elsewhere, but hopefully, I will break them down to their very basic steps. Where I remember where I got the information from in the first place, I will reference it. Otherwise, if you feel I am copying your work, I apologise right now.

If you have anything to add to what I write, please add it in the comments. If you're still learning, like me, then I hope you find what I write to be of use.

Box Sizing: Border-Box

Box Sizing: Border-Box

Posted: 24 March 2016

I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margin ...

Read more

Shortening CSS, Teaming Up

Shortening CSS, Teaming Up

Posted: 21 January 2016

A CSS rule-set consists of a selector and a declaration block: h2 /*The selector*/ {margin: 10px;color: blue; /*The declaration block*/ } The selector refers to the HTML element that's being targeted, and the declaration block tells the browser how to ...

Read more

Shortening CSS Margins And Padding

Shortening CSS, Margins And Padding

Posted: 14 January 2016

Both margin and padding are used to provide white space between one div's content and another's. The difference between them is that margin is external and padding is internal. padding is part of the browser's calculation of a div's width and height ...

Read more

Shortening CSS, Border Shortcut

Shortening CSS, Border Shortcut

Posted: 07 January 2016

There is much written about borders in css across the internet, but I wanted to add to the plethora of information by sharing two tricks for achieving more with borders with less typing. This will be the first of a brief series of posts on shortening your css ...

Read more

Embed A YouTube Video On A Responsive Website

Embed A YouTube Video On A Responsive Website

Posted: 21 May 2015

If you're building a responsive website and have videos on YouTube that you would like to include, you might hit on a bit of a problem: the YouTube embed code. Google are all about standards compliant design and encouraging designers to make their sites ...

Read more

CSS3 Background Patterns

CSS3 Background Patterns

Posted: 14 May 2015

Occasionally, as I trawl the web, and especially twitter, I will come acros webdesign ideas and solutions that I think are truly remarkable. This is either because they look at something old in a new way or it saves the developer time and data to achieve ...

Read more

Fading in, Back To Top Link With CSS and jQuery

Fading in, Back To Top Link With CSS and jQuery

Posted: 7 May 2015

On whatever device you are viewing this site, you will notice an 'up-arrow' appearing when you scroll down the page. Click on this, and you will be taken back to the top of the page you are viewing, and the arrow will have disappeared. This post explores ...

Read more

Show Your Latest Tweets on Your Website With Javascript

Show Your Latest Tweets on Your Website With Javascript

Posted: 1 May 2015

Credit for the creation of the JavaScript that runs this must go to Jason Mayes. He became frustrated with the fact that Twitter's own API for displaying your latest tweet(s) stopped working. I myself was faced with a similar problem and turned to ...

Read more

HTML 301 Re-directs

HTML 301 Re-directs

Posted: 23 April 2015

In a previous blog post, I discussed how to create re-directs for PHP files. But, not all of your pages will be PHP files, nor will all of your errant inbound links. I STILL get Google's Webmaster Tools flagging 404 errors on pages that I deleted ...

Read more

Star Wars: The Force Awakens Trailer

Star Wars: The Force Awakens Trailer

Posted: 17 April 2015

There is a lot going on in this trailer to get excited about and below, with screen prints from the trailer, I'm going to highlight seven things that have me wishing this movie came out tomorrow ...

Read more

Creating a Frame Around an Image

Creating a Frame Around an Image

Posted: 16 April 2015

Something quite simple this week, but that does add a nice effect to an image on a webpage. And, again, you need not look very far for an example of this effect. At the base of the page, there is a preview of the latest post on both of our blogs ...

Read more

Rantex! That is all...

Rantex! That is all...

Posted: 9 April 2015

Refresh this page. Go on. It'll feel good. Honest! Done it? Notice anything ... different? No? You might not have done. On a mobile, you'll only notice the change in the footer, but on a desktop, you'll see the picture advertising one of our scanning ...

Read more

Responsive Image Sprites Using Only CSS

Responsive Image Sprites Using Only CSS

Posted: 26 March 2015

Before I launch into the explanation of how to achieve this, I'd just like to explain what image sprites are. If you've ever played Horace Goes Skiing, Lotus Esprit Turbo Challenge (am I showing my age?) or pretty much any game in the 80's or 90's ...

Read more

Scrolling, Following Sidebar using jQuery and CSS

Scrolling, Following Sidebar using jQuery and CSS

Posted: 19 March 2015

Were you to view any page on this website, save the homepage, on a desktop or tablet computer, you will notice some pictures pointing out other pages you might like to visit, following you down the page. This scrolling sidebar can be used for anything ...

Read more

Make Your Posts Stand Out On Social Media

Make Your Posts Stand Out On Social Media

Posted: 12 March 2015

If you add a link to a post on Facebook, you might have noticed that it will often add a small preview of the page linked to below your text. The same is the case in Google+ and to a lesser extent in Twitter. Have you ever seen those previews and wanted …

Read more

Responsive Dropdown Navigation with jQuery and CSS

Responsive Dropdown Navigation with jQuery and CSS

Posted: 05 March 2015

Whether you are creating a responsive website from scratch or retro-fitting a non-responsive site, one of the hardest things to get right can be the navigation; especially if you want to make use of dropdown sub menus. As I browse the internet …

Read more

Keeping the Header and Footer the Same With PHP

Keeping the Header and Footer the Same With PHP

Posted: 26 February 2015

When I first started writing the PiciScan site out from scratch in Notepad, I would have the header and footer of each page within the body of the individual file I was editing. This was great, I thought, all I had to do was copy the code for the header…

Read more

301 Re-directs to Improve SEO

301 Re-directs to Improve SEO

Posted: 19 February 2015

If you're not making use of Google's Webmaster Tools, you should be. It comes with a whole variety of useful functions, not least of which are the Crawl Errors that Googlebot encounters as it crawls your website. Sometimes, these will come up as 404…

Read more

How to force re-direct a browser to https using htaccess

How to force re-direct a browser to https using htaccess

Posted: 12 February 2015

So you've bought a shiny new SSL certificate for your website and you've gone through all the instructions from the host provider and the certificate vendor and you type in your URL, expecting to see your lovely address with a padlock beside it…

Read more

The Latest From our Scanning Blog

Christmas 2015

Christmas 2015

Posted: 14 December 2015

It’s nearly the time of year to be going up into the loft and bringing down all the Christmas decorations, locating the tree and seeing if those lights from last year still work, or if you need to buy any more...

Read more

The Latest From our Web Design Blog

Box Sizing: Border-Box

Box Sizing: Border-Box

Posted: 24 March 2016

I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margin ...

Read more