HTML is a markup language, which means you can style and alter the text on a page by surrounding the element in containers called tags. For example, if we want to bold text, we can add the <strong> tag around the text.

<strong>Bold Text</strong>

By surrounding the text with the open and close <strong> tags, we’re able to strengthen the font. The close tag is the same as the open tag in most cases, but with a forward slash. The three parts of our bold HTML element are:

1. <strong> – I’m open!
2. Bold Text – I’m being marked up!
3. </strong> – I’m closed!

If we want to italicize the text, we can use the <em> tag that emphasizes our text. Just as we did with <strong>, we’re going to 1) open the <em> tag, 2) add the text we’d like italicized and 3) close our <em> tag with a forward slash. Our final result would be:

<em>Italicized Text</em>

We can even take things to the next level with bold and italicize on the same text!

<strong><em>Strong and Italicized Text</em></strong>

Other useful tags include:

For more information on HTML and a great reference for other tags, check out W3Schools or contact us at 954.523.2181 for more information.

The web developer will work on predominantly on PHP, MySQL, and JavaScript libraries for select e-commerce and custom application websites. You will also need to know CSS & HTML to complete upgrades to those websites, but mostly it is PHP and MySQL.

About PaperStreet
PaperStreet creates new web sites and revitalizes aging ones. Located in downtown Fort Lauderdale, we have designed over 600 custom web sites in the past ten years. Clients love our designs as we impress and get results. Check us out online at http://www.paperstreet.com.

You must know:

- PHP
- MySQL
- JavaScript (jQuery and other libraries)
- CSS3 and CSS2 too
- HTML and HTML5
- How to Meet deadlines
- CodeIgnitor Framework

Knowledge of this will be helpful:

- WordPress & Content Management
- Search Engine Optimization (SEO)
- Adobe Creative Suite

Position Type:
Freelance – Set projects with dedicated amount of hours per project and budgets.

Salary Range:
Please send us your hourly rates and requirements.

How to Apply:
You must do the following to apply.
1. Email us at careers [at] paperstreet.com with the subject:  Back-End Freelance Web Developer + Your Name
2. Include in the actual email a few paragraphs about yourself. Be yourself, be unique and to the point.
3. Include a link to your portfolio in the email. We want to be able to click on links.
4. Attach your resume in PDF format.

At PaperStreet you will work on front-end development, slicing and dicing websites to make our award winning designs go live.  We will give you very detailed Photoshop concepts, and you will hopefully give us back a fully working website, ready for content insertion.

About PaperStreet
PaperStreet creates new web sites and revitalizes aging ones. Located in downtown Fort Lauderdale, we have designed over 600 custom web sites in the past ten years. Clients love our designs as we impress and get results. Check us out online at http://www.paperstreet.com.

You must know:
- CSS3 and CSS2 too
- HTML / xHTML / HTML5
- jQuery and other JavaScript Libraries
- How to Meet deadlines

Knowledge of this will be helpful:
- Adobe Creative Suite (Dreamweaver & Photoshop)
- Content Management Systems (WordPress, will train on our Total Control)

Position Type:
Freelance – Set projects with dedicated amount of hours per project and budgets.

Salary Range:
Please send us your hourly rates and requirements.

How to Apply:
You must do the following to apply.
1. Email us at careers [at] paperstreet.com with the subject: Front-End Freelance Web Developer + Your Name
2. Include in the actual email a few paragraphs about yourself. Be yourself, be unique and to the point.
3. Include a link to your portfolio in the email. We want to be able to click on links.
4. Attach your resume in PDF format.

Google Analytics is a free tool that provides webmasters with detailed information about each aspect of their website visitors. One area you can track is browsers. Browser statistics will help you make design decisions and also determine whether it’s worth the investment to install snazzy technological features.

For instance, in the example website below, 36% of users are using Firefox, while only 21% use Internet Explorer. You may even see other browsers and platforms such as PlayStation 3 or BlackBerry phones. Also of note is that the Safari browser is used 12% of the time, more than doubling the national average of 5%, which means you’ll want the site to look perfect in Apple’s browser.

Going a step further, Google Analytics even tracks the browser version. Of the 36% of visitors who use Firefox in the above example, over 60% of them are on the latest version: 5.0.1. Interesting to note is that about 20% of those visitors are a couple versions behind on 3.6.

Why is This Info Important?

What’s important to know about browser versions is that just like automobiles and cell phones, the newer the product, the better the performance and the nicer things will display. A BMW released in 2011 will drive faster and handle better than a 2001 Toyota, despite them both having four tires. Web browsers work in the same way with Internet Explorer 6 being the Toyota and Firefox 5 being the BMW, despite them both having scrollbars and back buttons.

Using the example above, if we analyze Internet Explorer’s 21%, we’ll notice that over 65% of IE users are a version behind on 8. With IE 6 only accumulating 25 visits per month, or less than 1% of total traffic, it would not be time efficient or cost effective to tweak a massive drop-down menu that uses all the latest web standards and CSS3. On the same lines, if over 20% of your traffic is using Internet Explorer 6, then it’s clear that the menu system needs to function even if a deprecated one is used.

These numbers prove why browser testing is crucial when developing a new website. When building a website using the latest version of Firefox, only 1/5th of the site’s visitors will see the website as intended. Browser testing needs to be done on every browser and on at least the last three versions.

PaperStreet always incorporates browser testing into its custom web design process, ensuring that whatever browser your clients and potential customers use, the look and function will stay consistent and professional.

For more info, check out this info-graphic that illustrates the market percentage of each internet browser worldwide.

Total Control

Total Control has gone through several revisions since being developed by PaperStreet and currently operates under our newest server. Any site using Total Control will be hosted at PaperStreet, which also means nightly backups to our servers and excellent support. As mentioned earlier, Total Control is designed primarily for lawyers with specific sections for practice areas, seminars, offices, cases, news and more. Also, if you need a custom add-on, we can create it for you and customize Total Control to suit your needs.

WordPress

First released in 2003, WordPress is currently on version 3.1.1 and has been downloaded over 30 million times. Several major websites are based off WordPress with custom themes and colors disguising the standard WordPress design. A main component of WordPress sites are plugins, which, simply put, are user-developed applications created primarily for one task. For example, a great plugin we use at PaperStreet is the All-In-One SEO Pack, designed to make SEO tags easy to update. With a very large community, a plugin has been developed for nearly everything from database backups to contact forms.

Overall, both Content Management Systems are very useful and make updating the text on your page as simple as possible. As a developer at PaperStreet, I work with both systems on a daily basis and would recommend both. WordPress takes some customizing and will require more input at the start to set up local backups and attorney fields. On the other hand, Total Control will be easy right out of the box, but doesn’t have thousands of pre-built plugins. In the end, both allow for easy updating and will make your life easier.

For a brief demo of Total Control, please visit our Content Management section to learn more. More information about WordPress can be found at the official website. Also, don’t hesitate to contact PaperStreet and we’ll fill you in on all the details.

Site Structure

When redesigning your site, you should use a pyramid structure.

Large Site: If you have a large site (100+ pages), organize your content from your home page down and then into categories, sub-categories, and detail pages.

Mid-Size Site: For sites of say 10 pages to 100 pages, you can organize your content with home page, categories, and detail pages under those.

Small Site: If you have a really small site of less than 10 pages, just do home page and then detail pages all in the same hierarchy.

From an SEO perspective, the pyramid structure helps pass down “link juice” from your home page to the most important categories pages.Moreover, from a user perspective, it helps define to your audience what the most important categories are, and then indicate their detail pages.

301 Redirects

When redesigning your web site, it is a MUST that you redirect any old page names to their new versions.Your pages have most likely been indexed by search engines and linked to from other web sites.

If you do not redirect users, they will ultimately hit your dreaded 404 error page or your home page. This simply stinks and does not help the user or search engines.

By redirecting them to the appropriate page, this will help your website visitors actually find the new pages. Moreover, it will help pass any existing link juice for SEO purposes to those new pages. This will help them rank as high as the previous page, perhaps even more if you have updated the code, title tags, copy and internal linking of your new web site.

Yes, writing 301 redirects takes time. You need to plan them out and test. But it will benefit your site overall.

URLs

When redesigning your web site, you should consider having your URLs as close as possible to your root domain. This means that you want to keep your pages from being under sub-sub-sub or sub-sub directories.

• Good:”  www.yourdomainname.com/your-practice-area/
• Bad: www.yourdomainname.com/practice/subpractice/practice-name

It’s simpler to have a short URL and search engines seem to prefer URLs that are closer to the root of the domain.

Page Names

You should also consider very descriptive page names.

• Good: www.yourdomainname.com/your-practice-area
• Bad:”  www.yourdomainname.com?id=456

This helps users remember your content and is great for search engines, too, as they record all the keyword-rich text associated with your page name, or even links to that page from other sites.

Domain Names

If you have a great domain, stick with it. If your domain stinks, then now is a great time to change. Simply 301 redirect the entire old domain over to the new on site launch. What is a good domain or bad domain?”  Check out our article on how to select a domain.

• How to Choose a Domain Name for a Law Firm – Short, Old, .COM, with Keyword Phrase – http://www.paperstreet.com/blog/1570

Wrap -Up

If you have any questions, leave a comment or let us know how we can help.

Full Website

Mobile Website

As you can see from the two screenshots above, the mobile site opens up with a warning message meant to ensure visitors are not distracted drivers. Being on a mobile phone also means limiting graphics and website functionality in favor of speed and load times. The full site features a large map listing each observation submitted thus far, which will take a few minutes to load over 3G and your phone provider’s network. Leaving out the large background image is another feature that will improve the mobile site’s performance.

Once the warning message on the mobile website is accepted, the visitor is greeted with a friendlier page and navigation buttons (seen to the left). A good mobile site will sustain the important details from the full site, while condensing the layout for a smaller screen. By providing buttons large enough to be clicked by a finger, the visitor can easily navigate the mobile site and view reports, just as they would on the full site.

The layout of a mobile site should keep the same look and feel as the full website with similar colors and button styles. Keeping the main logo at the top of the site with a call to action will catch the visitor’s attention and give them a direct first step.

While browsing the mobile site, you’ll notice only the home page has the large navigation. Because the buttons take up so much real estate on a mobile browser, it’s common practice to add a “Back to Home” button on sub-pages. This skips the user right to the content, such as on the view reports page (seen to the right). Another best practice is to have your content in expand/collapse sections. Having some brief sentences with a “read more” button, which allows visitors to view your site’s full content, will keep visitors from being overwhelmed by a large amount of text.

Regarding the view reports page, there are some key differences between the mobile and full sites. On the full website, visitors are able to search reports by location and browse the “worst offenders,” which can be voted on. The voting functionality remains on the mobile site, but the search features have been removed. The mobile website is for quick information at a glance, so listing only the most recent reports is the best way to go. Visitors won’t be spending hours on a mobile site carefully studying an article and looking for news archives to learn more.

The main points to take from this blog post are as follows:

• Mobile websites and full version sites have some similarities between content and color schemes but differ greatly in presentation and purpose;
• Mobile websites can be thought of as summaries of a full website, complete with content, graphics, and features, but still able to provide valued information; and
• A mobile website needs to go through the full process with a new design, new purpose and new target audience to focus on.

For a closer look, be sure to visit Decide To Drive on a full-sized screen and a cell phone.

The issue was happening in Outlook, which was applying default blue underlines to all my links, even though each link had been manually styled differently. After fiddling around with a few techniques, I still wasn’t able to get my link styles to show up correctly in Outlook.

After further investigation, it became apparent that Outlook’s style sheet was overriding my own style sheet. The solution then became quite simple:

Add the !important; declaration to all the affected link styles to give them priority over Outlooks.

After applying the !important; declaration, the ugly default blue underlined links had vanished for good.

So the next time you run into a similar issue while working with any of your HTML email templates, try using !important declaration.

Logging in to WordPress

If you are already logged in, the following URL will take you to the admin dashboard. Otherwise, you will be prompted to enter your username and password. Replace YOURDOMAIN with your actual domain name: http://www.YOURDOMAIN.com/wp-admin/

If only the blog portion of your site is in WordPress, then you will need to add /wp-admin/ after the URL of your blog. If you are a PaperStreet client, this information will be provided to you in your launch email: http://www.YOURDOMAIN.com/YourBlogName/wp-admin/

How to Edit Your Content

Page Content

Once you log in to WordPress, you will be presented with the dashboard. To modify the content of the site, you only need to worry about a few sections on the navigation bar to the left. The pages on your site are housed under “Pages.“

If you click that section, you’ll see your website’s site structure. Dashes denote that a page is a sub-page of the one above. Click on whichever page you would like to edit. On the “Edit Page” screen, you can edit your text in the text editor. If you only see two rows of icons, click the last button “Show/Hide Kitchen Sink.”

If you would like certain text to be headings, you can select the text and change the format from paragraph to Heading 2 or Heading 3. Depending on the design of your site, heading 1 may be reserved only for the heading at the very top of the page. Click the big blue “Update” button, and you’re done.

To add a new page, click “Add New” on the side navigation or pages listing, then insert your page title and content. If your page should be underneath an existing section, then you will need to change the parent page. On the right side of the page, under publish, is Page Attributes. Here you can select the Parent page from a list of all pages on your site.

Templates in WordPress allow different sections of your site to have more than one layout. In our typical WordPress site, the Template option will stay as the “Default Template” for general pages. If it’s a practice area page, or attorney/staff bio page, then you may need to change to the appropriately named template.

Blog Content

If your site has a blog section, then this is edited through “ ”Posts” on the left side navigation. Editing and adding posts is basically the same as working with pages, with the addition of an excerpt, categories, and tags. The excerpt is typically used to display the very beginning of your post (or a short summary) on the main blog page, with a Read More link that takes you to the full post.

Categories are like a table of contents for the posts in your blog. You’ll be able to see them listed on your blog landing page. They are used to organize posts into main sections, and they will help visitors find content related to what they want to read about. Choose at least one category for your post. Tags are used to add additional keyword/topics to your posts. I recommend keeping the number of tags low, in order to not have search engines index an excessive amount of pages with similar content. I like to use around 2 to 4 tags.

Additional Custom Features For Editing Your Site

Every WordPress build is a little different. If PaperStreet built your site, then any instructions for custom functionality should be provided. You may see one or more of the following while logged in:

Editable Areas / Custom Post Types

On the left main navigation, you may see other post types underneath “Comments” and above “Appearance.” Adding or editing these works the same as pages. If you see a link titled “Editable Areas,” this contains information that is repeated throughout the site, such as footer links, text in the header/logo area, or sidebar information. There may be other custom post types, such as news.

Custom Fields – Using Verve Meta Boxes

When editing or adding a page, you might see fields like these underneath the main content editor. They are used for custom file uploads, images, vcards, email addresses, sidebar information, thumbnails, and more.

Tabs on a Single page – Using Page.ly MultiEdit

You may also see multiple tabs at the top while editing a page. Paperstreet sometimes uses this on attorney/staff bios. This allows you to edit all of the different sections individually, such as practices, quotes, photo, etc.

WordPress Design and Support

If you are an existing client and need additional WordPress support, give us a call or email the development team via helpme (at) paperstreet.com. If you are interested in us building your site in WordPress or another content management system, then please fill out our contact form.

Some businesses and law firms don’t even realize they have a problem. Perhaps your Search Engine Optimization (SEO) campaign is going great with visitors seeing your site at the top of Google. They’re clicking on the top search result and viewing your website, but nobody is calling for a free consultation. The issue could be the load time of your site.

Why Some Websites Load Slowly: Too Many Elements

A website is made up of many elements: CSS, images, HTML, javascript/jquery, flash elements and other specialized features. Each of these elements has a size to it, from 1 kb up to 1,000 kb (also called 1 MB). When you visit a website, your browser will download these elements to your computer and display them as a webpage. For example, if you have a rotating image slider on the home page, this could be the breakdown to load that single slider:

• 5 Images (60kb each) = 300kb
• Jquery library (Used to run Jquery script) = 70kb
• Jquery script (Used to create slider) = 20kb
• CSS (Used to style slider) = 10kb

So, that one slider on your homepage could be up to 400kb!

How to Know if Your Website Loads Slow: Calculating Web Site Speed

By using the Bandwidth Calculator, we’ll find out that the slider will take 58 seconds to load on a dial-up connection and five seconds on a broadband connection. Five seconds doesn’t seem like a long time, but remember, this is only for the image slider and not the entire website. The entire website could be up to 800kb, which means 10 seconds, and waiting 10 seconds for one website to load is quite a long time.

How do I speed up my website?

The simple answer is to remove large elements that take a long time to download. In our example, reducing the image slider to three images will remove 120kb and bring your size to 280kb, which knocks off two seconds from broadband and 18 seconds from dial-up. If you remove the image slider all together and just use one image, the total size goes down to 60kb, or about half a second.

If your home page has a lot of sections, perhaps placing some of them on a separate page is the way to go. Other tools, such as Yahoo’s image compression tool SmushIt, shrink image sizes while maintaining quality. PaperStreet always tries to implement these tools within each website we build. Of course, the best way for a fast load time is to load as few things as possible, such as Google.com, with its white background and one image.

If you visit your website and have to wait more than five seconds, contact PaperStreet for a consultation today.