Category: css

Email Gets A Make Over Today: Gmail Embraces CSS Media Queries

As of today, you will be able to use CSS media queries with Gmail and Inbox by Gmail. What does that mean exactly? It means you can ensure that your message is formatted the way you intended, whether it is viewed on a computer, a phone in portrait mode, or a tablet in landscape mode by using a css media query. You’ll even be able to change styles based on rotation, width, and resolution. Your emails, which stylistically have been trapped in the 90s in regards to design flexibility, will now have the potential to be more responsive, with formatting that can be optimized for every device. Goodbye to standard styling for desktop, tablet, and mobile! Hello gorgeous communications! Let’s hope all other mail service providers embrace this new option soon too.

If you are a business that sends out marketing emails, or a business that would like to start sending out beautifully designed and branded communications, just give Design Web Louisville a shout. They have reusable template designs ready to purchase or custom order.

Is Custom Web Design Dying? – The End of Professional Web Design

There was a time when people had to build their own website, or at least hire someone to craft a good site. However, pundits are saying that the customized web design approach is going the way of the buffalo. Is this in fact true? Is web development and design a thing of the past? There is certainly a lot of evidence to point towards that. Could be that the evolution of HTML, CSS, and other things are starting to be so simple that no one needs professional grade help? Or is it that consumers have no idea what they want, until they see it in action? Emulation is starting to take over in some instances, and while that may seem unethical, designers are bending to consumers that are going to pay, and as you may know, standing your ground may not pay the bills.

The Most Important Factors of Design For Websites Today

If you look at what consumers want, and the desire of web users, in terms of important web design choices, you’ll find that a majority will want a site that works. If it works, even if it’s a minimalist design, they’ll want that over a nice looking, attractive and cutting edge digital experience. This is a complete shift from Flash-heavy web design, and splash pages that hit the web in a few years past. Function over fashion is what you should adhere to as a designer. Thinking more like a UX designer instead of a graphic designer will help benefit your client’s web experience. If a site works, if information is garnered with ease, and sales are made, then what’s the point of flashy design work? That’s the kind of questions developers are struggling with right now.

The Saturation of Themes

Don’t give up on custom HTML and CSS designs just yet. You will find that with the over saturation of themes, templates and more, you will want to edit things yourself. The theme “game” is getting a lot of web designers and developers paid to work on a variety of things moving forward. Theme designers push out so much code in a mass-marketed, conveyer belt style that you will not be able to compete with on a technical side.

Learning to edit, modify, and build a template within a CMS like WordPress, Drupal or Django. That’s where knowing HTML, PHP, Javascript, and CSS comes in handy. You may not build a site from notepad up, but you will definitely be editing code over and over again to get it just right.

The Evolution of WYSIWYG Framework

In the past, you needed to get programs like Dreamweaver to build sites. Today, you just need to set up a free account at one of the many dot-coms that are reselling simple hosting plans on the backbone of WYSIWYG editing solutions. That means that you will be able to edit, build, and even use images on a fast paced solution.

The problem here is that things are closed off, limited, and don’t have much in the term of customizations.

Is Custom Design Dead?

The answer is no. While some will decry the death of programming, design, and more, you’ll find that if you learn CSS, HTML, PHP, and figure out how to customize templates, you will always find work. People may like templates, just like purchasing cars of the same color, but customization is still something that they’ll want, and it is beneficial on many levels. It’s not enough to be tech savvy nowadays; learning code, and editing by hand will come in handy more often than not. If you aren’t ready to learn code, and don’t want to use the same-old, cookie-cutter template solution, then contact us at Design Web and we can create a fantastic site for you.

Mobile-First vs. Desktop-First

Over the years, websites have become even more important to the success of a business. Even the most expensive, high reaching newspaper ad could never hope to bring you this number of leads. It makes sense that the internet is quickly becoming one of the most powerful and popular places to advertise your business. However, web design itself is a vicious beast. For business owners, it sounds like a foreign language and is hugely confusing to try and understand during the process of actually buying a website. For a web designer, getting the right design and style is absolutely imperative to completing the job properly.

A question which is regularly being asked these days by web designers is whether the client would like to have the website designed mobile first, or desktop-first. Business owners might not see the importance of this, but this is a MASSIVE part of the design process.

Responsive websites became a huge thing a few years ago and to combat the change in the way people viewed the internet as whole, responsive sites were introduced. Rather than have a dumbed-down mobile site and a complex desktop site that does not work with mobile devices efficiently, designers started to create websites that can automatically edit their width and height, so they show up efficiently on desktop or mobile devices.

But what is the best order to create the websites in? Can there be any problems from doing it the other way around?
Mobile-First

Mobile first design is fairly simple – you start the process by creating the mobile version first. Unlike normal mobile sites, no information or detail is being omitted from the design. It’s much easier for a business to take the mobile site and make sure it translates properly.

The flipside is that only 25% of users are only checking the web via mobile. This number is growing, so keeping the mobile crowd in mind can help your website gain attention while people are out and about. If you have a business that also has physical location, a mobile website is definitely needed.

However, starting with the mobile version means that sometimes you need to omit features you would liked to have had. For example, flash videos can be a big no-no for websites on mobile devices at the moment as lots of devices struggle to load them outside of direct platforms like YouTube. When you start with a mobile-first design, you are more progressive. You will add small increments as you go, which can stop your website from becoming overwhelming to the user.
Desktop First

Desktop first websites have been the standard for many years. A desktop based site will usually have more features and additions than a mobile website. The temptation is there to go crazy and add lots of features to the overall design and finish. Once your desktop site has all its bells and whistles, how do you then turn that into a mobile version?

A site with too much going on will be hard to translate into a mobile site and if the mobile version is dumbed down, it can make it look like an afterthought rather than an equal share. This is quite a common perception of less feature heavy mobile websites. Whereas with a mobile first design, you may find yourself adding more as you go, a desktop first design can have you chasing your own tail, removing things to make the site optimal for both desktop and mobile.
So What Are You Saying?

Aside from our back and forth arguments, it’s certainly easier to come from a mobile-first range. This gives you the chance to build something cool, efficient and minimalist. You can stop information overload or looking too eager very easily with this type of design ideal. It’s definitely easier to build a minimalistic, but cool view and then add more to it as you go than create something with ten layers of information, but no scalable strategy for the future. At Design Web we can build your site with mobile-first design and make it look nice on all devices.

The CSS Position Element

Learning a programing language, especially one created for website design, can be a real challenge. There are many small, but important, things to keep track of, as well as counterintuitive laws that have to be mastered.

One problem that many people run into when learning to code CSS styles, is the difference between absolute CSS positioning, fixed CSS positioning and relative CSS positioning. This can be particularly difficult for those just learning web design or development, with little prior coding experience. Below is a guide to help you figure out the difference between absolute, fixed, and relative, as well as their implications in web design.

Absolute Position

Of the two, the absolute CSS position element is normally easy to understand. Absolute tells the browser that whatever comes next in positioning should be placed in a particular position on the page. This removes it from the normal flow of the document. This will not interfere with other elements of the webpage positioning.

By writing the command, you guarantee that it will always display in a certain position on the site, regardless of what happens with the rest of the web page. This has a number of functions in web page design, and can lead to creative and unique design ideas.

Normally, absolute coding has four directional positioning elements tied to it; left, right, bottom, and top. When putting in the distance from the edges, remember that it is an offset.

Relative Position

Like absolute position, relative position also uses the four directional positioning elements, top, bottom, left, and right, but it uses them in a different way. The primary difference is that relative position is based not on the browser view port, but is rather in the normal flow. This means that it will be located within the normal flow of whatever document you are working in, just offset from the boundaries of containing element. This keeps everything within the normal flow of the document. As a result, relative position is perfect for web development that wants to keep everything centralized but spaced appropriately.

A Mix of Both

By knowing the difference between relative and absolute positioning within CSS Styles, you gain added technical knowledge in how to properly align and space various elements in a webpage. You can use relative and absolute positioning together. When an absolutely positioned element is nested within a relatively positioned element, the child element will be positioned within that parent element. When taking a look at other people’s websites, take a note at the various elements involved, and see if you can figure out if the relative or absolute positioning is used. Finally, the best thing you can do is to play around with the formatting options, and learn through experience what the difference looks like when practically applied.

Fixed Position

Unlike absolute and relative positioning, fixed positioning is based upon your browser window. If you set an element to a fixed position, it will stay in that position, even when you scroll. Some examples of this fixed positioning are sticky headers that follow you down the page or a sidebar that stays on the side of your browser as you scroll.

There are many other types of CSS position attributes, but these tend to be the most widely used. If you are still having trouble wrapping your head around using these elements, give us a call or write an email and Design Web will help out with any of your web development or web design needs.

The CSS Display Property

For many, the designs and implementations behind the face of a website are baffling to look at. Indeed, even for somebody with experience of HTML and CSS, it can still be quite a grueling process to get used to. A key asset in manipulating a website to look just as you need is using commands like margins, and display types. Display types are a massive part of the design process and helps keep everything exactly where you need it to be.

This, in turn, allows for much more creative designs for your website, allowing you to move things around to the part of the page it can be most effective. However, like just about every other element out there in coding, even the slightest mistake can cause you many hours of stress.

There are various different forms of the display command that you can put into action. They all allow varying looks to your page and where things will end up, and knowing what each of them does is very important to getting the look and feel you are after.

display: inline (inline-flex, inline-block, inline-table)

Inline does exactly what you might imagine it would. It effectively keeps everything on the flow of one line, rather than pushing it down to the next line. For example, this piece of code: li {display: inline}, will create a list which will stay on the same line as each other rather than take it to the next line for each part of the list. Traditionally, lists run stacked on top of each other rather than across the page, but this helps you keep everything on one line.

It also keeps any other elements directly in line with the list – things like bold text or text that has an emboldened box around it. You can still add margins and other elements to this type of display, but it will only move horizontally.

You could also include an inline-block command. This creates a changeable height and width parameter, as well as the ability to use margins. This makes it especially useful for creating interesting graphics using just the web features given to you, rather than graphics or other elements.

display: block

Block display creates a standalone box away from other parts of the design. It will fit the entire width given creating a box, with a line break both between and before. This allows you to create a padding and margin for the box. A common example of a block usage would be a heading on a webpage.

Typically, it will sit with a significant amount of space between it and anything else. Sometimes, it may have a clear graphical highlight added.

display: none

This total removes the element from the page entirely. It’s not available to click on, and won’t be visible to any of the viewers of the page. This can be useful for switching out parts of the website you aren’t sure about, but don’t want to remove entirely at present. It will still load in the code, so if you display:none a large element, you site will still have a high load time.

This creates a table layout, and you can use a wide variety of different results like the table option. Tables allow you to have a lot more control on the positioning and overall style of a part of your website, allowing you to quickly and easily create professional looking layouts and tables without having to undergo anything too arduous.

It effectively forces things which aren’t tables to act like one. This might be quite a rare use of the display feature but it’s still there just in case you need it.

Over the next few weeks, we will go into other aspects of web development, including various CSS3 and HTML elements. Remember, the Design Web can help you with your web design and development. We not only build sites, we can also teach you how to develop sites yourself with one-on-one personal training on location or via teleconference.

The CSS Float Property

As the proud owner of a shiny website, you won’t want to leave yourself in a position where your site becomes a burden to you. Unfortunately, sometimes a lack of patience or knowledge when making coding a website can lead to problems with future maintenance. There are also some cases where certain designs just do not handle some types of coding very well.

The CSS float property is one of these exact issues. It gives you the chance to float an image into a specific part of the website, allowing text and the like to float around it. This can be useful, of course, for creating certain effects –but if used incorrectly, it can become a bit of a nightmare.
Yes, float does have specific uses in the web development world BUT it has to be used in specific instances. Unfortunately, many designers simply don’t do this and it can leave websites looking cheap, especially on larger displays, and make future maintenance frustrating. A fine alternative to float is inline-block, and it works the majority of the time, doing the exact same job you wanted with float, without the headache that comes with!
An image which is floating left will stay to the left side of the page, with all text appearing on its right. This can be useful for certain designs, and will look quite cool when used in the right context. When used effectively, a floated image gives context to the words on the page, allowing your page to flow much better.

However, it can cause significant problems with the overall layout of the site as mentioned above. For example, here are some of the most common times that float will be used on a web page:

Creating a unique web layout that is going to be made almost entirely of images – ala Windows 8

Getting the parameters just right in small sections of the website like a user panel

Floating any form of image, paragraph, division or list (presuming your design can handle it)

However, you shouldn’t start messing around with float if you aren’t 100% sure how your website should look in the end. Although some pages are created entirely from using the float property to manipulate the design, others feel less comfortable trying such a maneuver – trying to design this yourself without the relevant experience is going to cause you a lot of problems.

You need to get the widths and percentages absolutely bang on, and this can take hours of work and practice. Therefore, you should get used to using float as a tiny helper for just magnifying and perfecting little changes to your site. It’s far too delicate a tool to be used commonly and leaves your website open to being an absolute minefield later for technicians looking to optimize your page.

If you still need some help learning or trying to use the float property , we can help. Design Web offers not only websites for your business, event, school, or group, we also offer training and classes in web development.

Email Marketing 101

The way business was done few decades ago is far different from the way it is done today. There are various internet marketing strategies that have been revolutionized, such as email marketing, to help businesses and organizations effectively advertise and promote their products and services. Email marketing is one of the most powerful internet marketing strategies that can help online businesses reach their targeted audience from different parts of the globe.

You might be really familiar with email, but email marketing a bit different. Professional-looking and attractive emails containing the right information and message to clients will enable you to engage with your customers and reach your targeted markets. However, the main problem with it is that it is really difficult to make sure that email works across all email clients. Marketing emails are written just like websites, except they need to be styled and structured in different ways. Most email clients are not as robust as web browsers, so the code has to be written like you were writing a website in 1999. Fortunately, there are many different email marketing services and products that can ensure that your email marketing endeavors will be successful. In order to ensure that your email will work in all email clients, such as Gmail, Outlook, Thunderbird, etc., you either need to have your emails created by someone who is experienced in writing HTML emails or you can use a service, such as Mailchimp.

The Right Email Marketing Services for Online Marketing Success

There are many various email marketing services that will enable you to become really success in your mass emails to potential clients. Email marketing through great services such as Constant Contact, Mailchimp, or using templates such as Ink by Zurb, will ensure that your email marketing campaigns will bring in the sales.

Constant Contact and Mailchimp are some of the most valuable email marketing services available in the market that will enable you to reach your targeted customers in no time. They come with many innovative features and a wide variety of great templates that you can choose from. These services also offer good metrics in order to easily track campaign responses, easy uploading of essential data and integration with CRM or customer relationship management applications. Another impressive feature that these services also offer is an email-delivery. You can be sure that there is no extra code being added, which can often happen with email clients such as Outlook. If you have a bit of skill, you can use email templates like Ink by Zurb. With Ink, you can quickly create and develop responsive HTML emails that perfectly work on just about any email client or device.

Creating high quality marketing emails that will best work for all your clients is really important. Fortunately, with the help of a reliable company, like Design Web, you can ensure that your emails will definitely reach your targeted clients and they will be able to view them perfectly. This will ensure you that your email marketing goals will be perfectly achieved. Design Web also creates custom email templates and OFT files that can be reused easily by non-technical users. With the help of Design Web, creating responsive and professionally looking emails is really simple.

What does 2014 hold for web design?

The internet has seen a few massive changes in 2013, especially the world of web design. Websites have become more powerful than ever before, and as we enter into 2014, there is likely to be as many changes again this year. Think about it, we have never had the power that we do today – mobile devices, super-fast internet connections, new web design tools – and 2014 looks like it’s going to be an even more exciting year for both web designers and those looking to have a website made.

Here are just some of the trends that we expect to see as we enter 2014:

More Responsive Layouts
If there is one thing that is becoming a commonplace factor in any respectable website, then that is a responsive design for your page. A responsive website is like a chameleon – it blends to fit the environment it is being viewed upon. If you look at it on your PC, it will look a lot different to if you look at it on your Smartphone.
As we enter the year where Google predicted we would have more internet users on mobile devices than PCs, it’s no surprise to see these one-size-fits-all style of websites becoming more common place. Web designers have the tools to adapt their websites to any environment, and this looks to be the first port of call now.

HTML5
HTML5 is finally here, and web designers across the glove are enjoying the new power it has put in their hands. Better support, stronger web standards and CSS3 integration, you can create outstanding animations and elements that take no toll on the websites space or loading time. As we get deeper into 2014, expect animations that actually load when the page opens to become common place. Flash is dead. Long live Flash!

Ajax Becomes Stronger
The power of Ajax, added to the power of HTML5 is going to create shockwaves across the online community. You can now change the URL of your browser without having to reload the page! A simple yet massively powerful tool, this allows you to create a website that loads faster and easier than ever before. This cuts back on HTTP request, and allows websites to run with much less cutter in the background.

It is these coding changes and design edits – the move from big buttons to hover menus, for example – that is going to make the real difference this year. If web standards stay the same, then these new techniques are going to make the world of web design more powerful then you could possibly imagine.
If you are looking to shatter the online world with your presence, there has never been a better time to get a friendly, cool and reactive website that will last you for many years. In the past, web pages have lasted only months before they needed a new lick of paint – these new designs could be here for the longest of terms.