Grit and Oyster Limited

WordPress navigation and responsive web design

One of the trickiest things to deal with that I’ve been finding in committing to responsive web design is that it really challenges to think about your site navigation.

Generally speaking this is a good thing. Critical to the success of any website is clear and logical navigation — so anything that forces you to think more carefully about how your navigation works should be positive. Particularly if it leads to simplification.

So over the last few months I’ve been developing a little library of navigation patterns to use on the responsive WordPress themes that I develop. Essentially these patterns are about answering the question of what to do with your menu when the width of your screen shrinks down to the size used on mobile devices. Mostly these are using media queries with CSS, but some use a little bit of JavaScript.

In developing this library I’ve been relying pretty heavily on the ideas developed by Erick Arbe on his site ‘Adventures in Responsive Navigation’. This is a really useful resource. There are a lot of practical ideas here — but he also understands that RWD forces you to think about your navigation in different way. This WordPress.tv video also acts as a good introduction to these issues:

http://wordpress.tv/2013/04/17/erick-arbe-wordpress-navigation-in-responsive-design/

What I’ve not yet really tackled is what to do with the more complicated drop-down menus on responsive sites and the tricky issue of getting these to work with touch screen devices. Something that needs a more detailed post of its own.

Dashes in WordPress

Here is a little note about dashes and hyphens and how WordPress handles them.

WordPress can do some clever things with typography — and some of these it does as standard. Look, it’s just done one of them in the previous sentence.  I typed two hyphens (or minus signs) into the editor and WordPress has automatically converted that into an em-dash. WordPress will also change a hyphen into en-dash when used in the correct place.

Not only does this make the text read better, and satisfy the small but passionate group of people who really care about these things, it is also really useful when writing posts in plain text or markdown. So here is a little reference of what to type to get different dashes:

Hyphen

one--two

= one–two

one - two

= one – two

En-dash

one-two

= one-two

Em-dash

one -- two

= one — two

More about this can be found in this post by Mark Jaquith from June 2012.

Genericons: a free icon font

I was looking the other day for an icon to indicate a drop down navigation menu in a mobile layout. I wanted something that would be easy to implement, flexible, and relatively lightweight. I decided that I would do it using an icon font, but that meant finding a font to use.

I chose Genericons – and was so impressed with it that I decided to permanently integrate it into ‘Oystershell’ my WordPress starter theme so that it will be easily available for use in future projects.

Some example icons from the font.

It has been released by Automattic so it has a number of features that are really handy for WordPress users. This includes these icons designed to indicate each of the native WordPress post formats.

The Queen’s Speech 2013: Digital Aspects

On 8 May 2013 the Government announced its legislative programme for the year in the Queen’s Speech.

In it I spotted three major aspects of relevance to the digital world and one smaller one.

Intellectual Property Bill

The first of these is proposed legislation to “make it easier for businesses to protect their intellectual property.” This bill is the Government’s response to the recommendations of the Hargreaves review that was published in 2011.

The bill contains a number of, mostly technical, measures that aim to simplify the law around intellectual property rights. The idea is to make the law easier to use and enforce, and so make it more accessible for British businesses – particularly SMEs – to use. Underlying this seems to be an understanding of the need for IP law to adapt to changes in technology and meet the challenges around digital copying. So hopefully these changes should be of help to digital designers in protecting their work.

The bill also contains measures to bring UK patent law into line with Europe and to enable the creation of the Unified Patent Court, part of which is to be based in London. This introduces a single patent system for most EU countries and would mean that it would be possible for British businesses to protect their inventions across all these countries with a single application.

Draft Consumer Rights Bill

The Government announced the publication of a Draft Consumer Rights Bill “establishing a simple set of consumer rights to promote competitive markets and growth”. In this bill they are aiming at consolidation bringing together eight different pieces of legislation on consumer rights (including digital content) and updating the law to;

“Provide clarity in areas where the law has not kept up with technological advances. For example, setting out clearer consumer rights for the quality of digital content like e-books and software.”

This draft bill was published on the 12 June 2013 and “Chapter 3” of the draft does deal with consumer rights over digital content. Its intention is to ensure that digital content would have to be of satisfactory quality, fit for purpose, and be as described.

Proposals on the investigation of crime in cyberspace

In the Queen’s Speech Her Majesty announced;

“In relation to the problem of matching internet protocol addresses, my Government will bring forward proposals to enable the protection of the public and the investigation of crime in cyberspace.”

How familiar Her Majesty is with internet protocol addresses I am unsure but the Home Office certainly is. Deputy Prime Minister Nick Clegg had vetoed the inclusion in the Speech of Home Secretary Theresa May’s Communications Data Bill, known to many as the “snoopers’ charter”, after concerns over privacy and civil liberties. However, as he did so Clegg did concede that the issue of matching IP addresses needed to be addressed. So it seems that the Home Office ensured that this aspect was in the speech.

This is quoted from the Government’s guidance notes:

“As the way in which we communicate changes, the data needed by the police is no longer always available. While they can, where necessary and proportionate to do so as part of a specific criminal investigation, identify who has made a telephone call (or sent an SMS text message), and when and where, they cannot always do the same for communications sent over the internet, such as email, internet telephony or instant messaging. This is because communications service providers do not retain all the relevant data.

When communicating over the Internet, people are allocated an Internet Protocol (IP) address. However, these addresses are generally shared between a number of people. In order to know who has actually sent an email or made a Skype call, the police need to know who used a certain IP address at a given point in time. Without this, if a suspect used the internet to ommunicate instead of making a phone call, it may not be possible for the police to identify them.

The Government is looking at ways of addressing this issue with CSPs. It may involve legislation.”

*BBC News: “‘Fresh proposals’ planned over cyber-monitoring”

National Curriculum

The final, smaller, aspect that I noticed was that as a part of the plans for a new National Curriculum confirmed in the Speech the Government will be;

“Replacing the discredited ICT curriculum with a new, ambitious computing curriculum.”

A consultation on doing this closed at the beginning of June.

Managing WordPress from your iPhone and iPad: The basics

WordPress for iOSThe other weekend I noticed in my Twitter stream that someone I follow, an experienced blogger, was having trouble updating their website using their iPad. This was until another friendly soul told them about the dedicated WordPress app that is available for that purpose. Suddenly they became much more productive.

I’ve learnt a few tricks and tips about blogging on the go using such devices but, based on that insight, I thought it would be useful to write about the basic steps that you can take.

Posting new articles to a WordPress website using the web browser on your iPhone or iPad can be difficult. While you can manage many aspects of your site by logging into the admin as usual the user interface isn’t really designed for use with a touch screen and you will find some tasks difficult to do.

A far better alternative is to download the dedicated WordPress app for iPad and iPhone and use that to access your site. Within this app you can edit and add new posts. You can also add and edit pages as well as moderate comments.

When creating new posts I tend to use other writing apps to compose my text and then paste that into the WordPress app to upload and publish it. But you can write posts directly into the WordPress app if you want.

To get started download the app from the Apple App Store. When you’ve opened it select “Add a Blog” from the settings and choose “Add Self-Hosted Blog”. Add the full web address of your site, your username, and your password. Then save. You should now be able to access the content of your site from within the app.

The WordPress app is free – but if you are prepared to spend a little money – there are a number of other blogging apps which should also be able to connect to your WordPress site. One popular one that I have used is Blogsy which is available for £2.99 from the App Store.

Not an Apple devotee? My apologies that this post is Apple centric. That is what I have experience of using. But I know that users of Android devices can also update their WordPress site on the go by using the android version of the WordPress app.

Note that if you have previously tried to use the WordPress or similar app to edit your site and had difficulties because of “XML–RPC support” this should no longer be an issue. You used to have to go and make sure that this was switched on in your settings. However, since WordPress 3.5 this support has been enabled as standard.

Changes to the typography on the Grit & Oyster website

Over the last few days I’ve been making some changes and improvements to this website. The most significant being a major change to the use of typography.

The Grit & Oyster website as it currently stands is a work in progress. I didn’t want to spend ages getting it ‘perfect’ and not getting it ‘out there’. So I had always intended to come back and make adjustments. However, I received some ‘friendly feedback’ that suggested I had got the typography wrong and probably needed to pay some attention to that aspect sooner rather than later. Which was fair comment.

My original choice of using EB Garamond with Junction had made the text seem too ‘busy’ and I hadn’t taken enough care with the layout and spacing of the text. The pages were not as comfortable to read as they should be, the overall effect was not the simple elegance I was aiming for, and there seemed to be some some problems with display on some device and browser combinations. So I decided I needed to make some changes.

I wanted to keep with using a Garamond as my signature serif font but I decided I needed to pair it with a simpler sans serif. I also decided that I would switch their roles. The sans serif would become the main heading font and the Garamond would be used for the body text.

In order to improve legibility in the body text I’ve moved to declaring just ‘Garamond’ for the body text in the CSS. I’m still using EB Garamond in various places for branding and ornamentation. The sans serif I’ve chosen is Droid Sans.

I’ve set the base font size for the content area at 18px. This has a line height, calculated using the golden mean, of 29px.

This means that all text, and other elements within the flow of a page, should fit within a grid of 29px.

This has resulted in a font scheme as follows (all measurements are in pixels):

[table]
,Font,Weight, Size,Line Height,Bottom Margin
P,Garamond,Regular,18,29,29
H6,Garamond,Bold,18,29,0
H5,EB Garamond Italic,Regular,18,29,0
H4,EB Garamond Small Caps,Regular,18,29,0
H3,Droid Sans,Bold,29,29,0
H2,Droid Sans,Regular,36.5,36.5,7.5
H1,Droid Sans,Regular,44,44,14
[/table]

CSS Sticky Footer

A few weeks ago I was looking for a new solution to the problem of getting a web page footer to stick to the bottom of the page using CSS. This needed to be something that keeps the footer aligned with the bottom of the browser even when the page is light on content.

The most elegant solution I found was this one: