Tag Archives: web development

U2AlbumReview Website Reboot

23 Aug

Bookmark and Share

Visit U2albumreview.com
I’ve been meaning to finally complete a facelift and overall reboot of my U2albumreview.com website. The original website was first around since 2008 but was screaming out for a facelift since then. Why did I feel it needed a redesign? Well I made the website before I knew anything about web design and development, so I wanted to put my knowledge and expertise into good use. I also felt it would be better if I designed the website on a CMS like WordPress so I can easily update data.

Well now, after just a few weeks work of redesigning and painstakingly transferring all the information and redirecting old urls, the website reboot is finally done! Check out U2AlbumReview.com and let me know what you think. If you also have any questions about any plugins or design features on the website, feel free to ask and I will answer any questions.

An alternative approach to choosing the Colour Scheme for your website

1 Jun

Bookmark and Share

Choosing a colour scheme for your website is usually an easy task. You get the project brief from your client, do a little research on the business or company and stick with the existing company/business colours and branding.

However, what happens when the colour scheme is not apparent or clear, or when your are dealing with something broad and less obvious. Perhaps you are dealing with with an up and coming business with no strong branding, maybe you want to build your own work portfolio but don’t know where to start.

One alternative approach I learnt from a former TAFE lecturer in regards to choosing colours for a website is to find them from nature. If you look at a nature picture, maybe a waterfall, forest or desert you will usually see that colours in a natural environment blend perfectly together complementing each other in terms of hue, saturation and brightness.

Compare this with a city landscape or any other man-made structure and you will see that the colours do no complement each other at all. They contrast each other and do not appear natural next to one another. Here is what I am suggesting you do now:

  1. Load up Adobe Photoshop or Fireworks
  2. Find a picture of a natural landscape that you can associate with the purpose of the website you are building. For example if you are building a website for a wildlife conservation charity, then perhaps you can get a picture of a forest scenery.
  3. Copy and Paste it into Photoshop (or Fireworks).
  4. Create 6 or 7 square boxes and place them below each other in a vertical list next to the picture.
  5. To the of the square boxes, create 3 or 4 more boxes (depending on how many colours you want for your website) also in a vertical list.
  6. Use the Eyedropper tool to choose 6 or 7 colours from the picture and put them into the square boxes.
  7. Out of the 6 or 7 colours boxes (colour swatches) choose 3 or 4 that you would consider using as a colour scheme for your website

Colour Swatch for the movie: Into the Wild
Colour Swatch for one of my favourite movies: Into the Wild

Using this technique you can easily find colour schemes that complement each other and may work well for the website you are building. So if you are ever stuck choosing a colour scheme for a website that may not be so obvious, then I suggest you find it from nature!

Optimizing images using Adobe Photoshop’s Image Processor

31 May

Bookmark and Share

On occasions you may want to resize and create thumbnails from a large collection of images. Or perhaps you may want to reduce the quality of a large number of photos. Maybe you may want to do both resizing and image quality optimizing. So how would you go about doing this?

Well if you have Adobe Photoshop, then you can automate this process for as many images as possible. Photoshop’s Image Processor works in the same way as Firework’s old Batch Process works- by performing tasks- resizing, quality optimization, saving as a variety of file formats etc, and automating it for a large number of files.

To use Image Processor, Open up Adobe Photoshop, then go to File > Scripts > Image Processor. You can also use Image Processor in Adobe Bridge.

  1. The first thing to do when you have Image Processor open is to select the folder the images are in. Click the button Select Folder to find your folder.
  2. Next, select the destination folder you want the processed images to appear. You may want to make a separate folder for these images or if you want the images to appear in the same location, check that option.
  3. The third step is to determine what tasks you want to perform on the source images. Choose what file format to save the images as (JPEG, PSD, TIFF), the quality of the processed images and the new image size dimensions
  4. You can set other processing options in the 4th segment. For all the detailed information about these options, you should check out this Adobe Help Page.
  5. Click Run to automate the process. This may take a few minutes depending on the amount of images that need to be processed.
  6. You can save the current processing settings as an XML file that can be used again at any time. Simply click Save and choose a location. To use a saved setting, click Load and find your XML file.

Adobe Photoshop Image Processor

Once you have used Photoshop’s Image Processor once, you will easily get the hang of it. You will find that by automating image processing, you will save a lot of time and effort.

Setting up your Pinglist for WordPress

13 May

Bookmark and Share

If you do not know about WordPress’ inbuilt capability to ping certain websites, then I suggest you read through this post and set up you Pinglist as soon as possible. Pinging other websites from WordPress simple tells certain websites that you have updated or new content which will allow fast indexing of your webpages in search engines such as Google and Yahoo.

WordPress by default only has a handful of websites that it ‘pings’ to. However you can dramatically decrease the time it takes to index your webpages by adding more and relevant websites to this pinglist. This will also help your SEO (Search Engine Optimisation) efforts since your webpages will appear in search engines for certain keywords quicker.

To set up your WordPress pinglist simply login to your admin area and then go to the ‘writing’ link under the ‘Settings’ tab. Once there, go to the Update Services heading (down the bottom) as shown in the pic below.

Wordpress Pinglist

Below is a pinglist that you can use to replace the current default list. Simply copy and paste this list to replace the current one. If you manage to find more sites to add to this pinglist, simply add them to the ‘Update Services’ box.

http://zing.zingfast.com
http://zhuaxia.com/rpc/server.php
http://xping.pubsub.com/ping/
http://xmlrpc.blogg.de
http://www.zhuaxia.com/rpc/server.php
http://www.xianguo.com/xmlrpc/ping.php
http://www.weblogues.com/RPC/
http://www.weblogues.com
http://www.snipsnap.org/RPC2
http://www.snipsnap.org
http://www.popdex.com/addsite.php
http://www.popdex.com
http://www.newsisfree.com/xmlrpctest.php
http://www.newsisfree.com/RPCCloud
http://www.mod-pubsub.org/ping.php
http://www.lasermemory.com
http://www.imblogs.net/ping/
http://www.holycowdude.com/rpc/ping/
http://www.feedsky.com/api/RPC2
http://www.catapings.com/ping.php
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://www.blogsnow.com/ping
http://www.blogshares.com/rpc.php
http://www.blogsdominicanos.com/ping/
http://www.blogroots.com
http://www.blogpeople.net
http://www.blogoon.net/ping/
http://www.blogoole.com/ping/
http://www.blogdigger.com/RPC2
http://www.bitacoles.net/ping.php
http://www.a2b.cc
http://weblogues.com/RPC/
http://weblogues.com/ping/
http://wasalive.com/ping/
http://trackback.bakeinu.jp/bakeping.php
http://topicexchange.com
http://thingamablog.sourceforge.net/ping.php
http://syndic8.com/xmlrpc.php
http://snipsnap.org/RPC2
http://signup.alerts.msn.com/alerts-PREP/submitPingExtended.doz
http://services.newsgator.com/ngws/xmlrpcping.aspx
http://rpc.wpkeys.com
http://rpc.weblogs.com/RPC2
http://rpc.twingly.com
http://rpc.technorati.jp/rpc/ping
http://rpc.technorati.com/rpc/ping
http://rpc.tailrank.com/feedburner/RPC2
http://rpc.reader.livedoor.com/ping
http://rpc.pingomatic.com
http://rpc.newsgator.com/
http://rpc.icerocket.com:10080
http://rpc.britblog.com/
http://rpc.blogrolling.com/pinger/
http://rpc.bloggerei.de/ping/
http://rpc.blogbuzzmachine.com/RPC2
http://rcs.datashed.net/RPC2/
http://rcs.datashed.net
http://r.hatena.ne.jp/rpc
http://popdex.com/addsite.php
http://pingqueue.com/rpc/
http://pingoat.com/goat/RPC2
http://pingoat.com/
http://pinger.blogflux.com/rpc
http://ping.wordblog.de/
http://ping.weblogs.se/
http://ping.weblogalot.com/rpc.php
http://ping.syndic8.com/xmlrpc.php
http://ping.snap.com/ping/RPC2
http://ping.rootblog.com/rpc.php
http://ping.namaan.net/rpc
http://ping.myblog.jp
http://ping.kutsulog.net/
http://ping.feeds.yahoo.com/RPC2/
http://ping.feedburner.com
http://ping.fc2.com/
http://ping.fakapster.com/rpc
http://ping.exblog.jp/xmlrpc
http://ping.cocolog-nifty.com/xmlrpc
http://ping.blogs.yandex.ru/RPC2
http://ping.blogoon.net/
http://ping.blogmura.jp/rpc/
http://ping.bloggers.jp/rpc/
http://ping.blogg.de/
http://ping.blo.gs/
http://ping.bitacoras.com
http://ping.amagle.com/
http://packetmonster.net/xmlrpc.php
http://newsisfree.com/RPCCloud
http://newsblog.jungleboots.org/ping.php
http://mod-pubsub.org/ping.php
http://mod-pubsub.org
http://lasermemory.com/lsrpc/
http://imblogs.net/ping/
http://holycowdude.com/rpc/ping/
http://hamo-search.com/ping.php
http://fgiasson.com/pings/ping.php
http://feedsky.com/api/RPC2
http://effbot.org/rpc/ping.cgi
http://coreblog.org/ping/
http://catapings.com/ping.php
http://bulkfeeds.net
http://blogupdate.org/ping/
http://blogstreet.com/xrbin/xmlrpc.cgi
http://blogsnow.com/ping
http://blogshares.com/rpc.php
http://blogsearch.google.us/ping/RPC2
http://blogsearch.google.tw/ping/RPC2
http://blogsearch.google.sk/ping/RPC2
http://blogsearch.google.se/ping/RPC2
http://blogsearch.google.ru/ping/RPC2
http://blogsearch.google.ro/ping/RPC2
http://blogsearch.google.pt/ping/RPC2
http://blogsearch.google.pl/ping/RPC2
http://blogsearch.google.nl/ping/RPC2
http://blogsearch.google.lt/ping/RPC2
http://blogsearch.google.jp/ping/RPC2
http://blogsearch.google.it/ping/RPC2
http://blogsearch.google.in/ping/RPC2
http://blogsearch.google.ie/ping/RPC2
http://blogsearch.google.hr/ping/RPC2
http://blogsearch.google.gr/ping/RPC2
http://blogsearch.google.fr/ping/RPC2
http://blogsearch.google.fi/ping/RPC2
http://blogsearch.google.es/ping/RPC2
http://blogsearch.google.de/ping/RPC2
http://blogsearch.google.com/ping/RPC2
http://blogsearch.google.com.vn/ping/RPC2
http://blogsearch.google.com.uy/ping/RPC2
http://blogsearch.google.com.ua/ping/RPC2
http://blogsearch.google.com.tw/ping/RPC2
http://blogsearch.google.com.tr/ping/RPC2
http://blogsearch.google.com.sg/ping/RPC2
http://blogsearch.google.com.sa/ping/RPC2
http://blogsearch.google.com.pe/ping/RPC2
http://blogsearch.google.com.my/ping/RPC2
http://blogsearch.google.com.mx/ping/RPC2
http://blogsearch.google.com.do/ping/RPC2
http://blogsearch.google.com.co/ping/RPC2
http://blogsearch.google.com.br/ping/RPC2
http://blogsearch.google.com.au/ping/RPC2
http://blogsearch.google.com.ar/ping/RPC2
http://blogsearch.google.co.za/ping/RPC2
http://blogsearch.google.co.ve/ping/RPC2
http://blogsearch.google.co.uk/ping/RPC2
http://blogsearch.google.co.th/ping/RPC2
http://blogsearch.google.co.nz/ping/RPC2
http://blogsearch.google.co.ma/ping/RPC2
http://blogsearch.google.co.jp/ping/RPC2
http://blogsearch.google.co.it/ping/RPC2
http://blogsearch.google.co.in/ping/RPC2
http://blogsearch.google.co.il/ping/RPC2
http://blogsearch.google.co.id/ping/RPC2
http://blogsearch.google.co.hu/ping/RPC2
http://blogsearch.google.co.cr/ping/RPC2
http://blogsearch.google.cl/ping/RPC2
http://blogsearch.google.ch/ping/RPC2
http://blogsearch.google.ca/ping/RPC2
http://blogsearch.google.bg/ping/RPC2
http://blogsearch.google.be/ping/RPC2
http://blogsearch.google.at/ping/RPC2
http://blogsearch.google.ae/ping/RPC2
http://blogroots.com/tb_populi.blog?id=1
http://blogpeople.net/ping
http://blogoon.net/ping/
http://blogoole.com/ping/
http://blogmatcher.com/u.php
http://blogdigger.com/RPC2
http://blogdb.jp/xmlrpc
http://blogdb.jp
http://blogbot.dk/io/xml-rpc.php
http://blog.goo.ne.jp/XMLRPC
http://blog.goo.ne.jp
http://blo.gs/ping.php
http://bitacoras.net/ping/
http://bitacoles.net/ping.php
http://bitacoles.net/notificacio.php
http://bblog.comping.php
http://bblog.com/ping.php
http://audiorpc.weblogs.com/RPC2
http://api.my.yahoo.com/rss/ping
http://api.my.yahoo.com/RPC2
http://api.my.yahoo.com/ping
http://api.my.yahoo.co.jp/RPC2
http://api.moreover.com/RPC2
http://api.moreover.com/ping
http://api.feedster.com/ping
http://a2b.cc/setloc/bp.a2b
http://1470.net/api/ping
http://www.a2b.cc/setloc/bp.a2b

Using this pinglist, I have had my blog posts indexed in as quickly as 2 minutes. At maximum, my pages are indexed within 24 hours. How did I know that? Well I currently have the SEO toolbar installed in Firefox which has a button that will show the cached version of a webpage. You can also do this in Google by going to the search bar and typing in this:

cache:http://www.yourwebsite.com/

At the top of the cached page it will show the last time the page was indexed by Google.

How to enable save tabs in Firefox 4

12 May

Bookmark and Share

I’ve only just recently made the late upgrade to Firefox 4 as I’ve been waiting for certain plugins to be compatible with the latest browser version. And while I’ve been pretty impressed overall with Firefox 4 there was one thing that really annoyed me about this new version update- That I didn’t have the option to save tabs when I exit Firefox.

With the older versions of Firefox I had the option to ‘save tabs and quit’ (see pic below), but I had no option to do this with Firefox 4. I did some research and apparently this feature is set off by default in Firefox 4 and needs to be turned on. If you want to know how to restore this feature just follow the simple steps below:

  1. Go to your address bar and type about:config
  2. It will ask you to confirm, click the button to continue
  3. You will see a page with a lot of configurations and settings arranged in rows. In the Filter bar search for two properties: browser.showQuitWarning and browser.warnOnQuit
  4. If they are set to false, then double click to set them to true

Do you want Firefox to save your tabs for next time it starts?
Do you want Firefox to save your tabs for the next time it starts? I sure do!

And thats it! To test it out just open a few tabs and then close Firefox. It should prompt you: Do you want Firefox to save your tabs for the next time it starts? If it doesn’t then you may need to take a further step:

Go to the tools menu > options and where it says When Firefox starts, make sure that it is set to Show my home page and not Show my window and tabs from last time. If it is set to Show my window and tabs from last time, this means that your tabs and windows get automatically saved and it will void the options we set earlier and Firefox will just automatically exit the browser without giving you the option to save the tabs or just quit.

That should be simple enough to configure, but if you have any questions then let me know.

6 Deadly SEO Mistakes You Should Avoid

31 Mar

Bookmark and Share

For a majority of websites, most of their web traffic comes from search engines, therefore it is very important to know the right manner in which you can maximize your search engine rankings. Many website owners either neglect or simply are not really familiar with the best SEO practices. Here are six mistakes web developers should avoid when designing and programming their website.

Poor Web design
A website’s graphical design and navigation will affect its ability to retain website visitors and aid them in navigating your website. Search engines take into account a website’s bounce rate when determining its search engine rankings. A website’s design does not merely refer to the graphical element but also its hierachy structure. Search engines like to have URLs that are readable and filled with relevant keywords.

Steer clear from having php queries in URLs- they make it hard for search engine robots to crawl and they don’t do you any favours for the search terms you are trying to rank for. If you want to restrict search bots from accessing any areas of your site- such as error or restricted pages or tell search bots when to index your site remember to include a robots.txt file and a sitemap.xml file.

Overusing Graphics and Animations
Search engine robots navigate through your website’s source code and cannot read the content on graphics or animations. It is a good idea to avoid using an image in situations where a HTML text could be used instead. If you must have an image as a text, in a logo for example, remember to include that text in the ALT and TITLE (for Firefox) tags.

Websites that are primarily built on Flash cannot currently be read by search engine robots, therefore if you decide to incorporate flash into your website you need to make sure you accompany it with some HTML text. Another downside of having a graphics-heavy website is that search engines take into account the loading times of your web pages, which means your website may be penalized for loading too slowly.

Little or no Backlinks
Many websites rely primarily on search engines as their main source of traffic. If you website has little or no backlinks, your website will perform poorly in the search engine rankings. Search engines such as Google rely on mathematical algorithms that determine a site’s pagerank. If your website has many backlinks coming from other websites with a high pagerank, you can expect your website to perform fairly well depending on your competition.

Inproper use of Keywords
Before you input any content into your website, you must first do your research into your niche. Be specfic about what keywords that will suit your website. If your website is about your company or brand, remember to include those keywords that make up the brand or campany name.

You also need to be careful about what keywords you try to target, as some may already have a lot of competition. Try to target keywords that are well searched but have less competition. There are many online research tools to help you with this, one of which is Google’s Keyword Tool.

Insufficient use of HTML and Meta tags
Many website owners underestimate the role that HTML and meta tag play in search engine rankings. The HTML Title tag and Meta Description tag are the two most important on-page optimization techniques to help improve your search engine results page for particular keywords, while also helping visitors know what your site is about from a list of search engine results.

Use keywords in these tags that differentiate different pages from one another. Be selective in the keywords you try to target as this will determine which visitors enter your site.

Lack of New or Unique Content
Search engines like new and unique content. It is not a good idea to include duplicate content in your website as you may be penalized by the search engines. When writing content for you site, keep in mind not only the keywords that are relevant to your website, but also your website’s readers or customers.

Your approach should be that you are writing for your visitors, but also keeping in mind the search engines and keywords. It is always best to write you own content, however, if you choose to hire a writer, be very clear about the style, content and length that you require for your website.

Using WordPress Permalinks for SEO friendly URLs

30 Mar

Bookmark and Share

If you have a WordPress blog and don’t know about using permalinks, then I will show you how easy it is to make your URL structure more SEO friendly in just a few short steps.

Firstly login to your administrative backend and look for the Settings header on the left sidebar. Underneath that should be a link to the ‘permalinks’ page. On the page you should see that under ‘Common Settings’, that the ‘default’ option is chosen. The example URL should have some php query at the end of it eg. ?php=123

If that is what your current link structure looks like on your WordPress blog, then I suggest you change it. By using the ‘Custom Structure’ option, you can change your URL structure to something far more SEO friendly. What I suggest you do is change it to /%postname% as shown below:

Wordpress Permalinks

This will change your URLs to a structure like this:
http://domain.com/post-title for an individual post.

The reasoning behind this is that Search Engines such as Google DO place emphasis on URLs when deciding to rank a particular page for its keywords. So therefore, if you have a URL that includes the post title, then there is a good chance your post title contains keywords that you want to rank for. In turn, the Search Engines take this into account and you will likely rank higher for particular keywords than if you had an unreadable ‘php query’ URL structure.

This is certainly not to say that you should spam your Post titles with keywords, just remember to make them relevant to the content that you are writing about. If you want to take this even further and want to customize your permalink structure even more, then I suggest you check out this page, on the Official WordPress site.

5 Essential WordPress Plugins for the Beginner Blogger

29 Mar

Bookmark and Share

When I first started learning about blogging and using WordPress I really didn’t really know what I was doing or how WordPress allowed me to install plugins that would of made my life so much easier. Now with a little bit more experience using WordPress, here are 5 essential WordPress plugins that will help all you WordPress Newbies kickstart your blogging experience and also a summary of why you should use them.

Before we start, remember that this list is for self-hosted WordPress blogs, not ones that are hosted on WordPress.com, which won’t allow you to install plugins.

  1. Akismet – Akismet is essential if you want to protect your site from comment Spam, which is a big problem for many wordpress blogs. You might not think it will be a problem now, but when your site gains more traffic, spambots will also come.

    The default WordPress installation will normally come with the Akismet plugin, so there is no need to download the plugin. However you will need to get yourself an API key, which you can get here. You won’t have to pay a thing if you select the ‘personal site’ option down the bottom.
  2. WordPress.com stats – Website statistics and visitor tracking is essential for every website, let alone a WordPress blog. One of the most convenient and reliable stats plugins I have ever used is the WordPress.com stats plugin. It provides live real-time statistics of things such as search engine terms, website referrers, top traffic pages and clicks.

    The minor inconvenience in installing this plugin is that you will need an API key which you can only get if you sign up for a WordPress.com account. You can sign up here.

    If you require more detailed stats such as visitor locations, then I recommend you sign up for a Google account and get Google Analytics. Get the code they provide you and place it in your blog’s footer template.
  3. All in one SEO plugin – The All in One SEO plugin is the best WordPress plugin for SEO. It allows you to customize your Meta tags for each and every page and post, control indexing, URLs, error pages and a lot more. By creating this kind of flexibility, you can customize the way your pages appear in search engine results pages and also help you rank higher for particular keywords since your website will become more search engine friendly.
  4. Contact Form 7 – In my opinion a Contact page is the most important page on any website. It is the one place where users can have access to you via mail. Sometimes though, it can also be an avenue for a lot of email spam. A simple and flexible solution is the Contact Form 7 plugin.

    It will protect your inbox from receiving spam by having a simple CAPTCHA code, while allowing you a lot of flexibility in how you will view your contact messages. I especially like the fact that the contact form incorporates AJAX, allowing on-page feedback. You can also modify the CSS, so your contact form blends in with the rest of your website.
  5. YARPP (Yet Another Related Post Plugin) – This plugin allows your blog to show ‘related posts’ at the bottom of every post. This may not seem like a lot but it will improve the interactivity and functionality of your website. Visitors will more than likely click a link to a related post after they have read through your post. You will retain site visitors and decrease bounce rate.

    What makes the YARPP plugin the best of its kind is that it is both easy to configure and also extremely flexible. You can control the meaning of a ‘relevant post’ by content, title, tags, categories or even choose to exclude posts based on some of those factors. From there you can then configure how relevant a post needs to be in order to appear as a ‘related post’, based on its ‘YARPP match score’.

    You can see this plugin in action on my post about the Flash game, Causality (at the bottom of that post).

To install these plugins or any others, you will simply need to use a FTP client such as FileZilla, unzip the file, and place the plugin folder in this directory:

root directory/wp-content/plugins. The root directory will normally be the public_html folder (For Apache web servers).

If you’re lucky you can also try searching for your plugin on the plugins page (On the Add New link under the Plugins heading) in the WordPress administrative backend. If you can find the plugin you are looking for, then you can install it directly from there without using an FTP client or your web server control panel.

301 Redirecting old pages using cPanel

22 Mar

Bookmark and Share

So you’ve just completed a massive overhaul of your website, maybe to a new domain, or maybe you’ve just revamped your site’s site structure and need old pages to redirect to updated locations. So how do you do it?

If you run you website on the Apache web server and cPanel as you server control panel, then the solution is simple. Recently, I needed to move my old portfolio website to this new domain without losing my search engine rankings I needed to find a way to do it.

Of course you could go and rewrite your old website’s .htaccess file, which would involving copying and pasting codes that you don’t really understand, but if you want to know the easiest way to permanently redirecting pages, then I suggest doing it through cPanel.

Firstly Log in to cPanel and then go to ‘Redirect’ which is under the Domains heading:
cPanel Redirect

Once you are there find the domain or page you want to redirect. Then type in the new domain or page location you want to redirect to in the ‘redirects to’ box. Check to see that the redirection type is ‘Permanent 301′ NOT ‘Temporary 302′.

Leave the rest of the tick boxes alone and click ‘Add’. You should then get a confirmation page saying the redirection was successfully. On the odd occasion you might get an error message saying a .htaccess file could not be created, but if you try again you should be successful.
Permanent 301 Redirect

There are few things you may need to keep in mind when permanently redirecting pages on root directories.

For example if you want to redirect your homepage at:

http://new-domain.com/

then you would also need to redirect

http://new-domain.com/index.php

This is just in the case somebody goes directly to the index.php file, in which they will go to un-redirected old page. The 301 redirection does not distinguish between the two versions so you would have to redirect both manually.

The same would go for a lower subdirectory like:

http://new-domain.com/pages/news/

Which in this case being the index.html, index.php or whatever the root filename is.

It is important to distinguish that a 301 redirect is not the same as a 302 redirect. A 302 redirect tells search engines and the browser that the page has moved ‘temporarily.’ Your new page will be indexed separately from the old page and you will not get the search engine rankings and traffic that you did for your old page.

What you want to tell Search engines and browsers is that this new page has moved to a new location. Search engines and browsers will ignore the old page and not index it, instead going directly to the new page. In this way you will keep your search engine rankings, considering the content is not significantly different from the old page, but rather just cosmetic changes.