Website design refresh

Posted on by

It has been nearly 3 years since I first launched the freestyle developments website and it was long overdue for a design and code refresh. Today I finally relaunched the site.

For me, the biggest change has been to move to a HTML5 doctype. The site now utilises many of the new HTML5 tags, such as header, footer, nav, section, article, aside and time as well as some of the new HTML5 forms attributes. Many thanks goes to @rem and @brucel for their fantastic HTML5 book, which I gleaned a lot of useful information from.

I’ve also given it a bit of a visual refresh, to use some CSS3 properties that I’m now regularly using on sites I build: drop shadows, rounded corners – that sort of eye candy. It means that my CSS no longer validates with no errors, but I’m hoping people in the know will be able to see past the vendor specific CSS property prefix errors e.g. “-moz-”, “-webkit-”.

I’ve gone for a Jello Mold layout to give me the flexibility of a fluid layout within parameters I control. I love fluid layouts, but their biggest enemy is widescreen displays, which makes reading text difficult due to the long line lengths, which is minus points for accessibility.

Assuming your default font size is 16px, my site is fluid between 700px and 1280px. Outside of these browser widths the site is rigid. It means that the site never gets so small that the content is unreadable, and never become so wide that the line width is a hindrance to legibility. Another nice thing about the Jello Mold is that between the max and min, the site re-sizes itself in an organic way, which really has to be experienced to be appreciated (give it a go now, go on).

I’ve also updated my CSS to use the YUI reset sylesheet. I don’t agree with absolutely everything that YUI are doing with their CSS stylesheets, but they have some really interesting ideas and valid points. Either way, it is nice to have part of my styles coming off a CDN and is a bit more up to date than the reset I used to use.

In accordance with my post on the EM unit and browser zoom, I’ve updated my stylesheets and removed all references to pixels in favor of EM’s like I have been doing with all my new website builds for a while now. I don’t set a font size for any of my pages html or body elements, allowing the user to choose the size of my website by setting their default font size for their browser, which is 16px for most browsers.

Anyway, I think that is all I have to say for now. Enjoy the new site and all the interesting tech that comes with it. If this all sounds good to you, and you’re looking for a freelancer like me. Get in touch.

2,564 thoughts on “Website design refresh”

  12. Сегодня для медработников менеджер по закупкам обучение курсы доступна в практичном дистанционном формате через профильный институт. Если необходимо обновить допуск к работе подготовиться к периодической процедуре или разобраться с требованиями по документам здесь можно пройти путь спокойно и без сложностей. Все процессы выстроены так чтобы специалисты могли совмещать процесс с работой а каждый шаг сопровождался поддержкой специалистов.

  13. Для многих специалистов сегодня для сотрудников сферы здравоохранения логопедия профессиональная переподготовка предусмотрена в практичном дистанционном формате с поддержкой профильного института. Когда требуется подтвердить квалификацию пройти подготовку к очередной процедуре или разобраться с требованиями по документам здесь можно пройти путь спокойно и без лишней бюрократии. Формат работы продуман так чтобы можно было учиться без отрыва от занятости а каждый шаг сопровождался поддержкой специалистов.

  14. Хочешь продать монеты? Подробнее профессиональная оценка быстрый выкуп и надежные условия. Работаем с редкими инвестиционными и антикварными монетами. Выплата сразу после согласования стоимости.

  15. Хочешь продать монеты? куда продать антиквариат в Нижнем Новгороде профессиональная оценка быстрый выкуп и надежные условия. Работаем с редкими инвестиционными и антикварными монетами. Выплата сразу после согласования стоимости.

  17. Женский журнал https://stepandstep.com.ua всё о красоте моде здоровье и отношениях. Практичные советы тренды лайфхаки и вдохновляющие истории для женщин которые стремятся к лучшему каждый день

  18. Женский журнал stepandstep.com.ua всё о красоте моде здоровье и отношениях. Практичные советы тренды лайфхаки и вдохновляющие истории для женщин которые стремятся к лучшему каждый день

  25. Домашние попытки обычно идут по двум сценариям. Первый — «пить понемногу чтобы не трясло» что продлевает запой и усиливает истощение. Второй — резко прекратить и «терпеть» после чего симптомы отмены усиливаются волной особенно ночью и человек снова пьёт из страха. Врач помогает избежать этих крайностей: стабилизировать состояние и дать план который делает первые сутки предсказуемыми и безопасными. Подробнее тут – https://narkologicheskaya-klinika-klin12.ru/platnaya-narkologicheskaya-klinika-v-klinu/

  30. Сегодня вашему бизнесу топ менедж для среднего бизнеса поможет организовать эффективные внутренние процессы без бардака и ручного учета. В одном сервисе просто назначать задачи следить за дедлайнами вести финансы компании работать с сотрудниками и держать процессы под контролем. Инструмент подойдет для компаний любого масштаба где важны скорость дисциплина и порядок. Руководитель получает больше контроля а команда работает слаженно и быстрее достигает результата.

  31. Для бизнеса сегодня вашему бизнесу автоматизация бизнеса за 1 день помогает создать четкую работу команды без бардака и ручного учета. На одной платформе удобно контролировать поручения контролировать сроки отслеживать финансы координировать персонал и понимать что происходит в компании. Сервис отлично подходит для малого бизнеса отделов продаж и растущих компаний где важна эффективность и прозрачность. Руководитель экономит время а команда действует согласованно.

  32. Online car games masin-oyunlari.com.az racing driving simulators and 20 games in one place. Get behind the wheel navigate the tracks and get the adrenaline rush without downloading.

  33. Online car games masin oyunlari com az racing driving simulators and 20 games in one place. Get behind the wheel navigate the tracks and get the adrenaline rush without downloading.

  38. Зависимость редко начинается как «всё плохо». Чаще это выглядит как способ справиться с напряжением: расслабиться после тяжёлого дня быстрее уснуть пережить стресс или конфликт. Постепенно употребление становится регулярным дозы растут а трезвость даётся всё тяжелее. При попытке остановиться появляются бессонница тревога внутренний тремор потливость тошнота скачки давления раздражительность. В этот момент человек пьёт уже не ради удовольствия а чтобы не столкнуться с ухудшением. Наркологическая клиника в Клину нужна чтобы перевести ситуацию в понятный медицинский процесс: сначала оценка состояния и рисков затем безопасная стабилизация после — лечение зависимости и профилактика повторения. Углубиться в тему – http://narkologicheskaya-klinika-klin12.ru/vrach-narkologicheskaya-klinika-v-klinu/https://narkologicheskaya-klinika-klin12.ru

  41. car games online araba oyunlari racing drifting parking and driving. Over 20 games are available for free — play now and hone your skills.

  42. Портал по инженерии https://build-industry.su и перепланировке: проекты согласование нормы и практические решения. Полезные статьи сервисы и экспертиза для безопасного изменения планировок и внедрения инженерных систем

  43. Дома и коттеджи https://orionstroy.su под ключ в Москве: от проекта до готового жилья. Профессиональный подход контроль качества и комфортные условия сотрудничества

  47. Чаты строителей https://stroitelirussia.ru в России— официальный сайт для общения и обмена опытом. Объединяем строителей со всех регионов России обсуждения вакансии советы и полезные контакты

  48. Ремонт и отделка квартир https://kaluga-remont.su а также строительство коттеджей под ключ. Комплексные услуги опытная команда и контроль на каждом этапе работ

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>