Category: Responsive


DKemp Designs MobilegeddonSo Mobilegeddon has arrived and you are not ready.

The full swing of mobile internet usage has arrived. More users use mobile devices than desktop for search, entertainment and social media. Websites and applications that are not mobile optimized take a hit in search rankings and bounce rate.

So, what is a web designer to do? First, decide what area you want to specialize in. Not next week, now. The Internet of Things will require custom user interfaces for endless screens. Pick a few types to focus on. Next, check out online and off line courses that can get you up to speed with the latest technology, watches, home appliances, vehicles or other.

Next, change your mindset from simple laptop/tablet/phone sizing. Know that consumers will be moving seamlessly from watch to tablet to giant TV screens for information and entertainment. With the Internet of Things, this mix includes home appliances and cars. Icons and content have to scale accordingly with many non-standard view ratios. Also know that voice interaction is prominent and poised to scale even larger. Learn the intuitive ways users interact using voice and have fall back designs for accessibility.

DKemp Designs multi-screen

And most of all change your design approach from ‘responsive’ to ‘mobile first’. Instead of designing for specific devices and breakpoints, have designs scale gracefully from the smallest to the largest screen with appropriate assets.

Need more help? Contact DKemp Designs for a free consultation. Get mobile now.

Save

Save

Save

Save

Save

Save

Speed Up Your Website with CSS

With more customers using mobile to access your sites, it just makes sense to make sure you have blazing fast load times. Customers on mobile will click off after just 2 seconds if your site does not load.

One of the things you can do to have faster load times is to minimize the amount of JavaScript or jQuery used. So how do you balance the awesome effects leveraged with these tools against the needed load time? Use more CSS transitions and animations in your site.

CSS has really expanded the range of effects possible without additional load on end users. One very popular effect for responsive design is the slide out menu. This effect allows users to have instant access to the menu with one hand and no fumbling!

This excellent video courtesy of Codecourse shows how to create a great slide out menu with only CSS and HTML. No snippets, no JavaScript at all. This video rocks and will take you to the next level as a designer. And if you want a great mobile website with this effect, contact DKemp Designs, we’ll be happy to help.

The website BerArt posted an infographic showing 50 of the things we don’t do that used to be daily habits. Many of these innovations came not just from the technology that made it possible, but from the design of devices that made it convenient.

Design affects so many of our activities and choices it should not be taken for granted. So if you are a business owner, be sure you utilize a solid designer like DKemp Designs, for marketing and web design. Stand out from the pack and get your customers in the door with design that reflects your business and goals. Make sure all your marketing is mobile ready and check out the infographic below and see how many of these things you still do on a regular basis.

 

DKemp Designs technology

Credit: BerArt

If you are a designer, you know responsive is the keyword of the decade. When designing for yourself or clients, everything must incorporate responsive design. With email marketing at an all time high, and 50% or more of customers viewing and opening emails on tablets and phones, responsive emails are a critical tool to master.

Techsnoop has rounded up some FREE templates to make the whole responsive email thing easier. Use these tools to quickly spice up your own or customer email campaigns.

Zurb

A great collection of templates for all types of newsletters. The basic layouts are created and you add colors, images and fun.

EMail on Acid

There is only one template here, (see above) but it offers many options for customization.

If these are helpful to you, send us a link to your web version so we can see.

Update 5/3/2017; Email on Acid has requested that the link to their site be removed. We have complied.

 

 

 

 

 

Save

Have a blog or website featuring WordPress that needs a refresh?  Here are some great free WordPress themes to spice up your website or blog for FREE.

And because we want you to be up to date with the latest, all of these themes are responsive, meaning they will display beautifully on all devices from PC to tablet to smartphone.

AccentBox-ThemeAccentBox A fully responsive and beautiful layout so that you can view it in different devices without any need of extra plugin.  It has unlimited color schemes.
basic-product-img

 

 

 

Basic.  If you are wanting to get your hands dirty in WordPress code, this may be the theme for you.  The purpose of the Basic theme is to give you a starter theme so you can be your own designer. It only contains the basic layout styling so you can customize the theme with your own perferences using the Themify option panel. The layout is completely responsive and works on any resolution of desktop and mobile devices.

 

 

 

esplanade-full

Esplanade  A modern and stylish theme with a responsive layout and slick, streamlined design with a flexible options page offering lots of features and control.  You can customize the layout, design elements, color schemes and typography along with traditional WordPress functionality like custom menus and post thumbnails.

 

DKemp DesignsWhen designing sites for customers, productivity is key.  Meeting deadlines can make or break your business.  Any tool or resource to shave off time is helpful.  The tutorials below are free and show the time saving benefits of Dreamweaver CS6.

There has been a lot of discussion on when and why to upgrade to the Adobe Creative Suite CS6 version.  Many designers feel it is too soon after CS5.5 to expend resources to upgrade software.

But in the case of the CS6 changes, it might be time to bite the bullet and upgrade.  There are significant changes that increase productivity and smooth workflow in the CS6 Suite.  One of the best is the ability to create mobile-ready sites for your customers that take the headache out of figuring break points and other mobile issues.

In the case of Dreamweaver, there is now a fluid layout option that allows you to create responsive CSS on the fly when designing.  You can move assets around and the code is automatically updated for you.  This takes at least half of the work load off writing the CSS code for a mobile ready site.

In our second tutorial below, creating simple CSS transitions with Dreamweaver CS6 is demonstrated.  If you have a portfolio or e-commerce site, this can again be a real time saver.

So, enjoy the tutorials, save time, make money.  And be sure to let us know in the comments if this has helped you.

Happy working from Techsnoop at DKemp Designs